Hook in React란 무엇인가요?

React에서 Hook은 클래스를 작성하지 않고 상태 및 기타 React 기능을 사용하는 데 사용되는 React16.8의 새로운 기능입니다. React에서 일부 기능을 사용하기 위해 함수 구성 요소를 사용할 수도 있습니다. 상태를 유지하고 사용자 정의 후크를 통해 구성 요소 간의 공통 상태 작업을 구현합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React의 Hook은 무엇인가요?

react Hook은 React에 도입된 새로운 기능으로, React 함수 구성요소에도 상태가 있을 수 있습니다.

사용자 정의 Hook을 사용하면 구성요소 간에 공통 상태 작업을 수행할 수 있습니다.

의미: Hook은 React입니다. 16.8의 새로운 기능. 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. 간단히 말해서 함수 구성 요소를 사용하여 반응의 일부 기능을 사용할 수 있습니다

해결해야 할 문제:

구성 요소 간 상태 논리를 재사용하는 어려운 문제를 해결하려면 후크를 사용할 필요가 없다는 것입니다. 이전 구성 요소 구조를 수정합니다. 후크를 사용하지 않고 상태 논리를 재사용하는 경우 고급 구성 요소, 공급자, 고객 등과 같은 일부 고급 사용법을 사용해야 합니다. 이 방법은 초보자에게 그다지 친숙하지 않으며 이해하기 더 쉬울 수 있습니다

복잡한 구성 요소의 경우 논리를 분할할 수 있습니다. 예를 들어 라이프 사이클 기능을 사용할 때 서로 다른 라이프 사이클이 서로 다른 시점에 수행되어야 합니다. 따라서 현재 복잡한 구성 요소의 경우 일부 라이프 사이클 기능이 많이 있습니다. 논리의 가독성이 크게 떨어집니다. Hooks를 사용하면 컴포넌트 로직을 분할하고 동일한 로직을 함께 통합할 수 있으므로 가독성이 크게 향상되고 유지 관리가 용이해집니다. 처음 학습할 때 클래스 컴포넌트에 대한 이해가 필요하지 않습니다. 이 키워드는 현재 구성 요소에 있지만 후크에는 필요하지 않습니다. 클래스 컴포넌트를 사용하지 않고도 React의 특성을 구현하는 문제를 해결할 수 있습니다

한 가지 주의할 점은 Hook과 클래스 컴포넌트를 동시에 사용할 수 없다는 점입니다. 실제 사용 과정에서는 주의해야 합니다. 그렇지 않으면 오류가 발생합니다. .

react-hook 사용

react는 스택 후크와 효과 후크를 생성하기 위해 useState와 useEffect라는 두 가지 후크 함수를 제공합니다.

상태 후크

함수 구성 요소에서 useState를 사용하면 구성 요소의 상태를 사용할 수 있습니다.

useState의 입력 매개변수는 초기 상태이고, 출력 매개변수는 현재 상태이며, 상태를 업데이트하는 함수

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState가 처음 실행될 때 상태를 생성하고 이 상태가 사용됩니다. 후속 실행에서

효과 후크

useEffect는 구성 요소에 부작용 논리를 추가할 수 있습니다.

소위 부작용에 대한 개인적 이해는 DOM 작업과 같이 반응 범위를 벗어난 세계와의 상호 작용입니다. , 네트워크 요청 등 (솔직히 부작용이 무엇인지 완전히 이해하지 못했습니다.)

useEffect에는 두 개의 입력 매개변수가 있으며, 첫 번째 매개변수는 부작용 함수를 결정하는 데 사용되는 배열입니다.

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;

부작용에는 실행 프로세스와 선택적 정리 프로세스가 있으며, 반환 값 함수는 정리 프로세스를 정의합니다. 컴포넌트 함수는 렌더링 결과의 일부와 같습니다. 각 렌더링 후에 부작용이 실행되고, 렌더링 전과 컴포넌트가 파괴되기 전에 이전 부작용이 지워집니다. 이렇게 하면 부작용이 매 렌더링마다 읽을 수 있습니다.

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

렌더링할 때마다 부작용을 실행하지 않으려면 useEffect의 두 번째 매개변수에 배열을 전달하면 됩니다. 배열의 요소가 변경되지 않으면 부작용이 발생하지 않습니다. ;

커스텀 후크

커스텀 후크는 실제로 useState와 useEffect를 내부적으로 사용하는 일반 함수이며, 함수 이름은 use;커스텀 후크를 사용하면 컴포넌트 로직을 재사용 가능한 함수로 추출할 수 있습니다. ;

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });
  return isOnline;
}

TODO

렌더링 소품, 고차 구성 요소 및 효과 성능 최적화에 대한 참고 사항

추천 학습: "

react 비디오 튜토리얼

"

위 내용은 Hook in React란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!