React Hooks를 사용하면 React 클래스 구성 요소를 구축하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. 후크를 사용하면 함수 구성 요소로만 완전히 작동하는 React 애플리케이션을 구성할 수 있습니다. 더 이상 class Example extends React.component {}필요하지 않습니다.

기본 후크

일상적인 사용 사례를 위한 일상적인 후크.

React 기본 후크
- useState
- useEffect => 이 문서
- useContext => 출시 예정

useEffect

useEffect에 대한 공식 문서

useEffect 함수 인수

1. 구성 요소 수명 주기 동안 실행되는 함수입니다.
2. 값 배열 useEffect는 실행을 트리거하는 변경 사항을 감시합니다. 빈 배열을 전달하면 클래스 기반 React 구성 요소 componentDidMount및 componentWillUnmount메서드를 모방합니다.

설명

useEffect구성 요소가 화면에 렌더링될 때마다(특정 조건으로 함수 실행을 제한할 수 있음) 이후에 코드를 실행하는 데 사용됩니다. 하나의 구성 요소에서 의 여러 인스턴스를 사용할 수 useEffect있지만 항상 동일한 순서로 실행되는지 확인하십시오. useState및 기능이 동일한 순서로 실행되지 않으면 useEffect시간이 매우 나쁠 것입니다(올바른 순서를 수행하는 방법에 대한 자세한 내용은 아래 참조). useEffect함수는 함수를 반환하여 스스로 정리할 수도 있습니다.

예

기본 사용법 이해 및 실행 후 정리

다음 코드는 모든 렌더링 후에 실행됩니다.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

개인 웹 사이트
LinkedIn
Instagram