React에 내장된 후크 중 하나는 useEffect 후크입니다. 이것은 구성 요소가 처음 로드될 때 초기 렌더링부터 구성 요소 상태의 변경 사항까지 구성 요소의 모든 렌더링에서 실행되는 함수입니다. 이는 특히 데이터 가져오기 또는 DOM 조작과 같은 작업에 유용할 수 있습니다.

참고: 여기에 useState 후크에 대한 참조가 있으므로 빠른 검토가 도움이 된다면 내 . 또한 이 주제에 대한 The Net Ninja의 튜토리얼 비디오에 대한 링크도 마지막에 넣을 것입니다.

용법

useEffect 후크를 사용하려면 먼저 React 라이브러리에서 맨 위에 있는 구성 요소로 가져와야 합니다.

import { useState, useEffect } from 'react';

그리고 이제 우리는 return 문 위에 이 후크를 사용할 수 있습니다. 이 함수는 아무 것도 반환하지 않으므로 변수에 저장하지 않습니다.

const SomeComponent = () => {
  useEffect(() => {
    console.log('useEffect hook just ran because this component rendered');
  });

  return (
    // Whatever this component is returning
  );

끝없는 렌더 루프 피하기

끝없는 렌더링 루프로 끝날 수 있으므로 useEffect 후크 내에서 상태를 변경하는 것에 주의하십시오.

다음은 내부에 상태를 변경하는 함수useEffect를 포함하는 경우 발생할 일에 대한 단계별 설명입니다.

구성 요소의 초기 렌더링이 발생함

useEffect가 트리거됨

상태가 업데이트됨

상태 변경으로 인해 구성 요소가 다시 렌더링됨

다시 렌더링하면 트리거useEffect가 다시 발생합니다

.

3번으로 돌아가서 등등...

종속성 배열을 useEffect 후크에 대한 두 번째 인수로 전달하여 이 문제를 해결할 수 있습니다.

빈(종속) 배열을 useEffect 의 두 번째 인수로 전달하면 이 함수는 초기 렌더링 후에만 실행되며 구성 요소의 상태가 변경되더라도 트리거되지 않습니다.

  useEffect(() => {
    console.log('useEffect hook ran on initial render of the component, but no more!');
  }, [] // All we're doing is adding this empty array here);

이제 useEffect가 초기 렌더링에서 그리고 특정 값(즉, 상태의 특정 속성)이 변경될 때마다 실행되기를 원한다고 가정해 보겠습니다. 종속성 배열 내에서 해당 값에 대한 참조를 전달할 수 있으므로(여러 항목이 있을 수 있음) 이제 useEffect는 해당 상태를 감시하고 해당 특정 상태 값이 변경된 경우에만 트리거하는 것을 알게 됩니다.

다음은 useEffect 상태에 변경 사항이 있을 때만 트리거되고 다른 상태 변경 사항은 무시하는 number 후크가 있는 구성 요소가 있는 경우의 모습입니다.

const ExampleComponent = () => {
  // We are setting the initial state of `letter` and `number` using the useState hook
  const [letter, setLetter] = useState('A');
  const [number, setNumber] = useState(1);

  useEffect(() => {
    // We are logging this message to the console only at the first render of this component and when the `number` value changes
    console.log('useEffect only runs at initial render and when the `number` state changes/updates');
  // useEffect knows to watch for changes in the `number` value because we are passing it as a second argument here as a dependency 
  }, [number]);

  return (
    <div>
      // This button changes the `letter` state from `A` to `B`, but will not result in a trigger of useEffect
      <button onClick={() => setLetter('B')}>Will Not Trigger useEffect</button>
      // This button WILL trigger the useEffect hook because it is effecting the state change we are specifically listening for
      <button onClick={() => setNumber(number + 1)}>Will Trigger useEffect</button>
    </div>
  );
}

읽어주셔서 감사합니다. 즐거운 코딩 되세요! 😄

유용한 링크

React's documentation on the useEffect Hook