[React-복습] 9. HOC(고차 컴포넌트)

in React on React 입문


React 고차 컴포넌트(HOC, Higher Order Component)에 대한 스케치 포스팅이다.


01. 고차 컴포넌트(HOC, Higher Order Component)

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

구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 즉, 인자를 컴포넌트를 받고 새로운 컴포넌트를 리턴주는 것

const EnhancedComponent = higherOrderComponent(WrappedComponent);



01-1. HOC 예제

input과 button 컴포넌트가 WithLoading 컴포넌트에서 인자로 받고 새로운 컴포넌트로 리턴 결국은 공통적인 기능을 사용하기 위해 컴포넌트를 재활용한다는 개념

import React, { useState, useEffect } from "react";

/**
 * 고차원 컴포넌트 예제
 * - 해당 컴포넌트는 다른 컴포넌트를 인자로 받고
 * - 리턴을 고차원 컴포넌트(WithLoadingComponent)로 한다.
 * @param {*} Component
 * @returns
 */
export default function WithLoading(Component) {
  //독립적인 함수로 선언하고
  const WithLoadingComponent = (props) => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      const timer = setTimeout(() => setLoading(false), 3000);

      return () => clearTimeout(timer);
    }, []);

    return (
      <div>
        <h3>HOC 예제 - 컴포넌트 재활용</h3>
        {loading ? <p>로딩 중</p> : <Component {...props} />}
      </div>
    );
  };

  //함수(WithLoadingComponent) 자체를 리턴
  return WithLoadingComponent;
}

import WithLoading from "./WithLoading";

function Button() {
  return <button>버튼</button>;
}

export default WithLoading(Button);