[React] HOC(High-Order-Components)

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>;
  };
}

function Component() {
  return <div>Hello, world!</div>;
}

const blueStyle = { backgroundColor: 'blue' };
const ComponentWithBlueBackground = withStyle(Component, blueStyle);

export default ComponentWithBlueBackground;

3 ) 상태 추상화 및 조작 : HOC는 컴포넌트 사이에서 상태를 공유할 수 있게 해줍니다.

아래 withToggle HOC는 토글 상태를 관리하고 이를 WrappedComponent에 전달합니다. 이 HOC를 사용하면 토글 기능이 필요한 여러 컴포넌트에 동일한 토글 로직을 쉽게 재사용할 수 있습니다.

function withToggle(WrappedComponent) {
  return function (props) {
    const [isToggleOn, setIsToggleOn] = useState(true);

    const handleClick = () => {
      setIsToggleOn(!isToggleOn);
    };

    return <WrappedComponent onClick={handleClick} isToggleOn={isToggleOn} {...props} />;
  };
}

function ToggleButton({ isToggleOn, onClick }) {
  return <button onClick={onClick}>{isToggleOn ? 'ON' : 'OFF'}</button>;
}

const ToggleButtonWithToggle = withToggle(ToggleButton);

export default ToggleButtonWithToggle;

4 ) props 조작 : HOC는 컴포넌트의 props를 변경하거나 추가적인 props를 전달할 수 있습니다.

아래 withTextPropAdded HOC는 새로운 prop을 추가하여 기존 컴포넌트에 전달합니다. 이 HOC를 사용하면 기존 컴포넌트에 추가적인 prop을 쉽게 전달할 수 있습니다. 이를 통해 컴포넌트의 기능을 확장하거나 컴포넌트 간의 데이터 전달을 용이하게 할 수 있습니다.

function withTextPropAdded(WrappedComponent) {
  return function (props) {
    const newProps = {
      text: 'I am an text prop!',
    };

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

function Component({ textProp }) {
  return <div>{textProp}</div>;
}

const ComponentWithExtraProp = withTextPropAdded(Component);

export default ComponentWithExtraProp ;

HOC의 주의사항

HOC를 사용할 때는 몇 가지 주의사항이 있습니다.

1 ) HOC는 props를 변경하지 않아야 합니다. HOC는 받은 props를 그대로 내부 컴포넌트에 전달해야 합니다.

2 ) HOC는 원본 컴포넌트를 변경하지 않아야 합니다. HOC는 새로운 컴포넌트를 생성하므로 원본 컴포넌트를 변경해서는 안됩니다.

3 ) HOC는 렌더링 결과를 복사하지 않아야 합니다. HOC는 컴포넌트의 렌더링 결과를 그대로 반환해야 합니다.