HOC(High-Order-Components) ?

HOC는 고차 컴포넌트로 컴포넌트를 가져와서 새로운 컴포넌트를 반환하는 함수입니다.

Higher-Order Components는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다.

HOC 사용방법

HOC는 아래 코드와 같은 형태로 정의합니다.

withSample 함수는 인자로 컴포넌트를 받아서 새로운 컴포넌트를 반환합니다.

function withSample(WrappedComponent) {
  // 새 컴포넌트를 생성
  return (props) => {
    // 컴포넌트 로직...
      return <WrappedComponent {...props}/>;
  };
}

HOC의 용도

HOC는 컴포넌트 로직을 재사용하기 위해 사용됩니다.

1 ) 코드 재사용, 로직 추상화, 컴포넌트 분리 : HOC는 컴포넌트 로직을 재사용할 수 있게 해줍니다.

아래 withLoading HOC는 로딩 상태에 따라 다른 컴포넌트를 렌더링하는 로직을 담고 있습니다. 이 HOC를 사용하면 여러 컴포넌트에서 동일한 로딩 로직을 전반적으로 구현할 필요 없이, 로딩 로직을 재사용하고 중복을 줄일 수 있습니다.

function withLoading(WrappedComponent) {
  return function ({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Loading...</div>;
    } else {
      return <WrappedComponent {...props} />;
    }
  };
}

function Component({ isLoading }) {
  return <div>{isLoading ? 'Loading' : 'Loaded'}</div>;
}

const ComponentWithLoading = withLoading(Component);

// 사용 예시
<ComponentWithLoading isLoading={true} />

2 ) 렌더링 제어 : HOC는 입력받은 컴포넌트의 렌더링 결과를 조작할 수 있습니다.

아래 withStyle HOC는 렌더링 결과에 스타일을 적용하여 렌더링을 제어합니다. 이 HOC를 사용하면 각기 다른 스타일 적용한 여러 버전의 컴포넌트를 쉽게 생성할 수 있습니다.

function withStyle(WrappedComponent, style) {
  return function (props) {
    return <div style={style}><WrappedComponent {...props} /></div>;
  };
}