HOC(Higher-Order Components)

HOC(Higher-Order Components)란?

HOC는 고차 컴포넌트라고 불리며, 컴포넌트 로직을 재사용하기 위해 사용되는 테크닉이다.

=> 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수!
=> 때문에 같은 로직을 다수의 컴포넌트에 동일 적용해야할 때 굉장이 유용하다.
=> 고차 컴포넌트는 Redux의 connect 나 Relay의 createContainer 같은 타사 React 라이브러리에서 흔히 쓰인다.

예시)

function withExtraProps(WrappedComponent) {
  return class extends React.Component {
    render() {
      // 새롭게 추가된 props
      const newProps = { extra: 'some extra props' };
      // 기존의 props와 새로운 props를 합쳐서 WrappedComponent에 전달
      return <WrappedComponent {...this.props} {...newProps} />;
    }
  }
}

HOC(Higher-Order Components) 사용방법

- 로딩상태를 관리하는 HOC

import React from 'react';

// 로딩 상태를 관리하는 HOC
function withLoading(Component) {
  return class WithLoading extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: true,
      };
    }

    componentDidMount() {
      // 실제로는 데이터 페칭 등 비동기 작업을 수행
      setTimeout(() => {
        this.setState({ loading: false });
      }, 2000);
    }

    render() {
      if (this.state.loading) {
        return <div>Loading...</div>;
      }

      // 로딩이 끝나면 원래의 컴포넌트를 렌더링
      return <Component {...this.props} />;
    }
  }
}

- 기본 컴포넌트

const MyComponent = (props) => {
  return <div>Content loaded!</div>;
}

- HOC를 사용해 컴포넌트 확장

const MyComponentWithLoading = withLoading(MyComponent);

// MyComponentWithLoading을 렌더링하면 처음에 "Loading..."이 보이다가 2초 후 "Content loaded!"가 보임
ReactDOM.render(<MyComponentWithLoading />, document.getElementById('root'));

하지만, 함수형 컴포넌트가 생기고 hook이 도입된 이후로 HOC를 사용하는 경우가 많이 줄었다고 한다. HOC는 보통 클래스형 컴포넌트에서 react life cycle을 고려해 재사용 가능한 로직을 만들기 위해 사용되는데, 함수형 컴포넌트는 대부분 hook으로 대체 가능하기 때문!