반응: useEffect 후크 소개

이 기사에서는 최소한 React 사용에 대한 지식이 있고 React Hooks를 탐색하고 싶다고 가정합니다.

소개

useEffect는 React 애플리케이션에서 알려진 후크 중 하나입니다. 일부는 이를 "효과 후크"라고 부릅니다. 이 후크를 사용하면 기능적 구성 요소에서 부작용을 수행할 수 있습니다. componentDidMount, componentDidUpdate 및 componentWillUnmount를 모두 한 번의 호출로 처리합니다.

부작용에 익숙하지 않은 경우. 실행 중인 함수의 범위를 벗어나는 모든 실행입니다. 이 기사에서는 부작용에 대해 많이 다루지 않을 것입니다.

부작용의 예는 다음과 같습니다.

데이터를 가져오는 중

수동 DOM 조작

구독 설정

전역 변수 업데이트 중

질문: useEffect는 언제 실행되나요?

기본적으로 일반적으로 매우 렌더링된 후에 실행됩니다. 그러나 제어할 수 있는 방법이 있습니다. 구성 요소가 마운트된 후(componentDidMount), 다시 렌더링된 후(componentDidUpdate), 마운트 해제되기 전에(componentWillUnmount) 코드를 실행하는 방법을 살펴보겠습니다.

구성 요소가 마운트된 후 한 번만 실행하려면 다음과 같이 할 수 있습니다.

// Make sure to pass an empty array on the second argument
useEffect(() => {
  console.log(‘Component Mounted!’); // This will trigger only once.
}, []);

props/state 변수가 변경될 때마다 실행하려면 두 번째 인수에 변수 배열을 추가하면 됩니다.

// Pass a variable to the second argument, and every time that variable changes this useEffect will run.
useEffect(() => {
  console.log(‘Counter’, counter); // This will trigger every time counter state changes.
}, [counter]);

구성 요소가 마운트 해제될 때 정리를 수행하려면 다음과 같이 할 수 있습니다.

useEffect(() => {
    // Run on Component Mount
    const handleAuthorSubscription = author => {
      setAuthor(author);
    }
    API.subscribeToAuthor(userId, handleAuthorSubscriptionChange);

    // Run on Component Unmount
    return () => {
      API.unSubscribeToAuthor(userId, handleAuthorSubscriptionChange);
    };
  }, []);

useEffect 콜백 함수에 반환 함수를 추가하기만 하면 반환된 함수 내부의 코드는 구성 요소가 DOM에서 마운트 해제될 때 트리거됩니다. 우리는 이 함수를 사용하여 eventListeners, clearInterval, clearTimeout 등을 제거하는 것과 같은 정리 작업을 수행합니다.

useEffect에서 기억할 사항

첫 번째 인수는 콜백 함수입니다. 내부에서 부작용을 수행하고 상태 변수에 일부 데이터를 설정할 수 있습니다.

두 번째 인수: 배열에 데이터가 포함되어 있으며 해당 배열의 데이터가 변경될 때마다 useEffect가 트리거됩니다. 빈 배열을 전달하면 구성 요소가 마운트된 후 useEffect가 트리거됩니다.

이것이 제가 여러분과 공유하고 싶었던 전부입니다. 이것은 나의 첫 번째 기사입니다. 이 기사가 React Hooks의 기본 사항을 배우는 데 도움이 되기를 바랍니다. 개선을 위한 질문이나 의견이 있으시면 언제든지 댓글로 남겨주세요. 모두 환영합니다.

읽어 주셔서 감사합니다! :)