클래스 구성 요소에서 후크 사용에 대한 팁

React 버전 16.8 이후로 개발자 커뮤니티는 편의성과 간단한 인터페이스를 위해 후크를 채택했습니다. useState 및 useEffect와 같은 내장 후크를 사용하면 기능 구성 요소의 상태를 유지하고 수명 주기 방법을 설정할 수 있습니다.

더 중요한 것은 많은 라이브러리가 사용자 지정 구성 요소 또는 클래스 구성 요소와 호환되는 유틸리티 대신 후크를 지원하도록 전환했다는 것입니다. 이것은 질문을 강요합니다. React 클래스 구성 요소에서 후크를 사용할 수 있습니까?

개발자는 여전히 사용자 지정 후크의 강력한 기능이 필요하지만 이를 사용할 다른 방법을 찾아야 할 수도 있습니다. 동일한 보트에 있는 경우 클래스 구성 요소에서 후크 사용에 대한 이 가이드를 따르세요.

React 클래스 구성 요소에서 후크 사용

후크가 도입된 이후 많은 React 개발자는 수십 개의 클래스 구성 요소를 기능적 구성 요소로 리팩토링하기로 결정했습니다.

응용 프로그램에 수백 개의 클래스 구성 요소가 포함되어 있으면 불가능할 수 있습니다. 리팩토링하는 데 너무 오래 걸립니다.

일부 개발자는 클래스 구문을 선호하고 기능적 구성 요소 작성을 원하지 않습니다.

안타깝게도 클래스 구성 요소는 후크를 지원하지 않으며 내부에서 후크를 사용할 방법이 없습니다. 클래스 구성 요소 내에서 후크를 활용하는 유일한 실용적인 방법은 단일 트리에서 두 가지 유형의 구성 요소를 혼합하는 것입니다.

이론적으로 후크를 사용하면 기능적 구성 요소를 사용하여 값을 생성하고 해당 값을 props를 통해 클래스 구성 요소로 전달할 수 있습니다.

React 클래스 구성 요소에서 후크를 사용하는 다른 방법

이것은 클래스 구성 요소에서 후크의 값을 사용하는 간단한 예입니다. 예를 들어 보겠습니다.

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [number, setNumber] = useState(100);
  return (
    <div className="App">
      <Header hookValue={number}></Header>
    </div>
  );
}
class Header extends React.Component {
  render() {
    const someHookValue = this.props.hookValue;
    return <h1>{someHookValue}</h1>;
  }
}

useState 후크를 가져와 숫자 값으로 초기화된 숫자 상태 변수를 생성합니다.

자식 구성 요소는 헤더 클래스 구성 요소입니다. 후크를 사용하여 생성한 숫자 상태 변수를 전달합니다.

그런 다음 이 값을 자식 구성 요소에 표시합니다. CodeSandbox의 라이브 데모를 직접 확인하세요.