React Hooks를 기존 React 클래스 구성 요소에 통합

알고 있듯이 React Hooks는 상태 및 논리를 관리하는 대체 접근 방식을 제공합니다. 애플리케이션에 반응하세요. 그러나 후크의 장점을 수용하기 위해 기존 클래스 기반 구성 요소를 점진적으로 마이그레이션하고 싶을 수도 있습니다.

다행히도 이 문제에 대한 해결책이 있습니다. 바로 고차 구성 요소(HOC)입니다. HOC는 후크 기반 기능을 주입하는 함수로 클래스 구성 요소를 래핑하는 방법을 제공합니다.

후크를 사용하여 HOC 만들기

React를 통합하는 HOC를 만들려면 후크를 사용하려면 다음 단계를 따르세요.

1. 클래스 구성 요소를 인수로 사용하는 함수를 정의합니다.
2. 해당 함수 내에서 WrappedComponent라는 새 구성 요소를 만듭니다.
3. WrappedComponent 내부에서 원하는 React 후크를 사용하여 필요한 상태 또는 로직을 추출하고 활용합니다.
4. 후크의 반환 값을 클래스 구성 요소에 소품으로 전달합니다.
5. HOC 함수에서 WrappedComponent를 반환합니다.

예:

MyDiv라는 클래스 구성 요소가 있다고 가정합니다.

class MyDiv extends React.component {
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return 
{this.state.sampleState}
   }
}

MyDiv에 후크 기반 상태를 추가하려면 HOC를 생성할 수 있습니다.

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return ;
  }
}

HOC 통합

이제 MyDiv 클래스 컴포넌트를 withMyHook HOC로 래핑할 수 있습니다:

class MyComponent extends React.Component {
  render(){
    const myHookValue = this.props.myHookValue;
    return 
{myHookValue}
;
  }
}

export default withMyHook(MyComponent);

이 기술을 사용하면 상당한 리팩토링 없이 React 후크를 기존 클래스 기반 코드베이스에 점진적으로 통합할 수 있습니다.