🚐 고차 컴포넌트 사용하기

🙄 고차 컴포넌트(HOC)?

고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.

고차 컴포넌트(Higher Order Component)는 컴포넌트를 반환하는 '함수'이다. 컴포넌트를 인자로 받아 그것을 반환하기도 한다.

고차 컴포넌트를 사용하는 기본적인 이유는 추상화이다. 특정 기능이 여러 컴포넌트에 중복되어 나타날 경우 그것을 고차 컴포넌트로 한번 wrapping하면 추상화 계층을 제공할 수 있다.

예를 들어 유저가 페이지에 접근할 때 해당 유저가 로그인 중인지 여부, 혹은 특정 게시글이나 댓글의 작성자인지 확인하는 작업의 해결책 중 하나로 고차 컴포넌트를 사용할 수 있다.

🎅 예시(유저 권한 확인)

만약 특정 컴포넌트에서 유저의 권한을 확인할 필요가 있다면 다음과 같이 고차 컴포넌트를 구성할 수 있다.

const Board = ({ permission, ...props }) => {
  console.log(props);

  return (
    <div>
      <span>Hello</span>
      {permission && <button>delete</button>}
    </div>
  );
};

다음과 같은 Board 컴포넌트가 있다고 할 때, 우리는 해당 컴포넌트를 렌더링할 때마다 Board에 대한 권한을 알고싶다.

이것을 고차 컴포넌트를 이용해 만들면 아래와 같은 모양이 나올 것 같다.

const withCheckPermission = (TargetComponent) => {
  return function WithCheckPermission(props) {
    const [permission, setPermisson] = useState(null);

    useEffect(() => {
      async function checkPermisson() {
        const result = await fetch("/api/checkPermisson").then((res) =>
          res.json()
        );

        setPermisson(result);
      }

      checkPermisson();
    }, []);

    return <TargetComponent {...props} permission={permission} />;
  };
};

export default withCheckPermission(Board);

컴포넌트를 인자로 받는 함수가 추가 작업을 하는 또다른 컴포넌트를 반환하고 있다. 이것이 고차 컴포넌트이다.

아마 비동기적인 작업이 필요하다면 위와 같은 형태로 작업하지 않을까 예상해본다.

function App() {
  return <div className='App'><Board subTitle='Title' /></div>;
}

사용은 다음과 같이 일반 컴포넌트를 사용하는 것과 같다.

🎅 예시(유저 권한 확인 + 로깅)

만약 다음과 같은 경우라면 어떻게 해야할까? 우리는 Board 컴포넌트를 렌더링하고 그것을 console에 기록하고 싶다.

단순한 해결책은 WithCheckPermission에 console.log를 추가하는 것이지만 고차 컴포넌트를 이용해 해결해보자.

const withLogging = (TargetComponent) => {
  return function WithLogging() {
    console.log("Board is Mounted");

    return <TargetComponent />;
  };
};

export const WithLoggionBoard = withLogging(withCheckPermission(Board));

고차 컴포넌트의 TargetComponent에 다른 고차 컴포넌트를 인자로 넣는다면 해결할 수 있다.

의문점

<Component {...props} />

고차 컴포넌트에서 위와 같은 문법을 사용했다. 조금 이상하다고 느껴진다. 이게 어떻게 가능하지?