useEffect 후크는 React의 기본 부분으로, 기능적 구성 요소에서 부작용을 수행할 수 있도록 해줍니다. 자세한 내용은 다음과 같습니다.

useEffect란 무엇인가요?

• useEffect 후크를 사용하면 구성 요소에서 데이터 가져오기, 구독 또는 DOM 수동 변경과 같은 부작용을 수행할 수 있습니다.
• 이는 수명 주기 메서드인 componentDidMount, componentDidUpdate 및 componentWillUnmount의 조합으로 간주될 수 있습니다.

통사론

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

매개변수

1. 효과 함수: 첫 번째 인수는 부작용 코드를 포함하는 함수입니다. 이 함수는 렌더링이 화면에 커밋된 후에 실행됩니다.

2. 정리 함수(선택 사항): 효과 함수는 구성 요소가 마운트 해제되거나 효과가 다시 실행되기 전에 React가 호출할 정리 함수를 반환할 수 있습니다. 이는 구독이나 타이머를 정리하는 데 유용합니다.

3. 종속성 배열: 두 번째 인수는 종속성 배열입니다. 종속성 중 하나가 변경되는 경우에만 효과가 실행됩니다. 빈 배열([])을 전달하면 효과는 초기 렌더링 후에 한 번만 실행됩니다(예: componentDidMount).

사용 예

1. 기본 예: 마운트 시 데이터 가져오기

import React, { useEffect, useState } from 'react';

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
};

1. 정리 예: 이벤트 구독

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
;
};

1. 종속성 예: 소품 변경에 따라 효과 실행

import React, { useEffect, useState } from 'react';

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
;
};

모범 사례

• 종속성 지정: 오래된 클로저를 피하기 위해 종속성 배열에 효과가 의존하는 변수를 항상 포함하세요.
• 렌더링 시 부작용 방지: 렌더링 단계에서 부작용을 방지합니다. 대신 useEffect를 사용하세요.
• 정리 함수 사용: 효과가 구독이나 타이머를 생성하는 경우 메모리 누수를 방지하기 위해 항상 정리 함수를 반환하세요.

결론

useEffect 후크는 기능적 구성 요소의 부작용을 처리하기 위한 강력한 도구로, 현대 React 개발에 필수적입니다. 구문과 모범 사례를 이해하면 구성 요소 동작과 부작용을 효과적으로 관리할 수 있습니다.