HOC(High-Order Component)

geun·2024년 12월 29일

React

목록 보기

11/14

HOC란?

React에서 컴포넌트의 반복적인 로직을 재사용하기 위한 패턴중 HOC라는 것이 있다. HOC는 React에서 컴포넌트를 인수로 받아 새로운 컴포넌트를 반환하는 함수이다.
이는 React에서의 고유한 패턴이 아닌, 함수형 프로그래밍에서의 고차 함수 개념을 React 컴포넌트에 적용한 것이다.

const withExtraProps = (WrappedComponent) => {
  return (props) => {
    const extraProps = { additional: 'extra data' };
    return <WrappedComponent {...props} {...extraProps} />;
  };
};

위 코드는 withExtraProps라는 HOC를 정의하여 전달받은 컴포넌트에 추가적인 props를 전달하는 역할을 한다.

HOC의 사용 사례

1. 로직 재사용

반복되는 로직을 HOC로 추출하여 처리하면 여러 컴포넌트에서의 쉬운 재사용이 가능해진다. 다음 코드는 인증이 필요한 페이지를 위한 로직을 HOC로 처리한 것이다.

const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // 인증 상태 확인 로직

    if (!isAuthenticated) {
      return <div>로그인이 필요합니다.</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

2. 상태 관리

HOC를 사용하여 중앙에서 상태를 관리하거나, 특정 상태를 주입할 수 있다. 다음 코드는 데이터 페칭 로직을 HOC로 추출한 것이다.

const withData = (WrappedComponent, fetchData) => {
  return (props) => {
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      fetchData().then((result) => setData(result));
    }, []);

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

3. UI 장식

컴포넌트의 스타일이나 UI를 동적으로 변경하거나 추가할 때 HOC를 사용할 수 있다.

const withBorder = (WrappedComponent) => {
  return (props) => {
    return (
      <div style={{ border: '1px solid black', padding: '10px' }}>
        <WrappedComponent {...props} />
      </div>
    );
  };
};

HOC 사용시 주의할 점

1. props 충돌

HOC에서 전달하는 props와 원래 컴포넌트의 props가 충돌하지 않도록 주의해야 한다.

2. 디버깅의 어려움

HOC를 과도하게 사용하면 React 개발자 도구에서 컴포넌트 트리가 복잡해질 수 있기 때문에 displayName을 설정해주면 해결할 수 있다.

const withDisplayName = (WrappedComponent) => {
  const HOC = (props) => <WrappedComponent {...props} />;
  HOC.displayName = 
    `withDisplayName(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return HOC;
};