[UI Component] Design Patterns - HOC

HOC

- 앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공함

- ex) 컴포넌트 스타일 시트 설정, 권한 요청, 전역 상태 추가 등

- 고차 컴포넌트: 다른 컴포넌트를 받는 컴포넌트

- Composing

  - 여러 HOC 조합

  - HOC 사용하는 유명 오픈소스 라이브러리 -> recompose

- 몇몇 상황에서는 Hooks로 대체 가능

- 일반적으로 React의 훅은 HOC 패턴을 완전 대체할 수 없음

- 대부분의 경우에서 React의 훅은 트리가 깊어지는 상황을 줄일 수 있음

- 훅은 컴포넌트 내부에서 특정한 동작을 추가할 수 있게 해주지만, HOC에 비해 버그 발생 확률 높음

- HOC 여러번 조합해서 사용하면 모든 prop이 안에서 병합되므로
   어떤 HOC가 어떤 props에 관련 있는지 파악하기 어려움 -> 앱의 디버깅이나 규모를 키울 때 방해될 수 있음

 

- 예시

 

// DogImages.js
import React from "react";
import withLoader from "./withLoader";
import withHover from "./withHover";

function DogImages(props) {
  return (
    <div {...props}>
      {props.hovering && <div id="hover">Hovering!</div>}
      <div id="list">
        {props.data.message.map((dog, index) => (
          <img src={dog} alt="Dog" key={index} />
        ))}
      </div>
    </div>
  );
}

export default withHover(
  withLoader(DogImages, "https://dog.ceo/api/breed/labrador/images/random/6")
);

 

// withLoader.js
import React, { useEffect, useState } from "react";

export default function withLoader(Element, url) {
  return (props) => {
    const [data, setData] = useState(null);

    useEffect(() => {
      async function getData() {
        const res = await fetch(url);
        const data = await res.json();
        setData(data);
      }

      getData();
    }, []);

    if (!data) {
      return <div>Loading...</div>;
    }

    return <Element {...props} data={data} />;
  };
}

 

// withHover.js
import React, { useState } from "react";

export default function withHover(Element) {
  return props => {
    const [hovering, setHover] = useState(false);

    return (
      <Element
        {...props}
        hovering={hovering}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
      />
    );
  };
}

 

- 활용

---

[UI Component] Design Patterns - HOC