ReactJS에서 useEffect 훅 완벽 이해하기

1. useEffect의 기본 개념

useEffect는 React 컴포넌트에서 부수 효과(side effects)를 처리하기 위한 훅입니다. 부수 효과란 데이터 가져오기, 구독 설정, 수동 DOM 조작과 같은 작업을 말합니다.

useEffect(() => {
  // 실행할 코드
}, [의존성 배열]);

2. useEffect의 필요성

React 컴포넌트에서는 상태(state)가 변경될 때마다 컴포넌트가 재렌더링됩니다. 그러나 API 호출과 같은 작업은 매번 실행되면 불필요한 네트워크 요청이 발생할 수 있습니다. useEffect를 사용하면 이러한 작업의 실행 시점을 제어할 수 있습니다.

3. useEffect의 작동 방식

첫 렌더링에만 실행하기

빈 의존성 배열([])을 사용하면 컴포넌트가 처음 마운트될 때만 코드가 실행됩니다:

useEffect(() => {
  console.log("컴포넌트가 처음 마운트될 때만 실행됩니다");
}, []);

특정 값이 변경될 때만 실행하기

의존성 배열에 값을 넣으면 해당 값이 변경될 때만 코드가 실행됩니다:

useEffect(() => {
  console.log("count 값이 변경될 때마다 실행됩니다");
}, [count]);

정리(clean-up) 함수

useEffect에서 함수를 반환하면, 이 함수는 컴포넌트가 언마운트되거나 다음 효과가 실행되기 전에 호출됩니다:

useEffect(() => {
  console.log("구독 설정");

  return () => {
    console.log("구독 해제");
  };
}, []);

4. 실제 예시 (Detail.js)

현재 첨부된 Detail.js 파일에서는 useEffect를 사용하여 영화 정보를 가져오는 API 호출을 수행하고 있습니다:

useEffect(() => {
  getMovie();
}, []);

이 코드는 컴포넌트가 처음 렌더링될 때만 getMovie 함수를 호출합니다. getMovie 함수는 API에서 영화 정보를 가져와 상태를 업데이트합니다:

const getMovie = async () => {
  try {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();
    setMovie(json.data.movie);
    setLoading(false);
  } catch (error) {
    console.error("영화 정보를 가져오는데 실패했습니다:", error);
  }
};

이렇게 하면 컴포넌트가 렌더링될 때마다 API를 반복적으로 호출하는 것을 방지하고, 첫 렌더링에만 API를 호출할 수 있습니다.

5. useEffect 사용 시 주의사항

무한 루프 방지하기

의존성 배열을 올바르게 설정하지 않으면 무한 루프가 발생할 수 있습니다:

// 잘못된 사용 예시
useEffect(() => {
  setCount(count + 1); // 상태 업데이트가 다시 렌더링을 유발
}, [count]); // count가 변경될 때마다 실행되므로 무한 루프 발생

의존성 배열 올바르게 설정하기

useEffect 내에서 사용하는 모든 변수를 의존성 배열에 포함해야 합니다:

useEffect(() => {
  // id와 category를 사용하므로 의존성 배열에 포함
  fetchData(id, category);
}, [id, category]);

6. useEffect의 다양한 활용 사례

1. 데이터 가져오기

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

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    setData(json);
  };

  fetchData();
}, []);

2. 이벤트 리스너 등록 및 제거

useEffect(() => {
  const handleResize = () => {
    setWindowWidth(window.innerWidth);
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

3. 타이머 설정 및 정리

useEffect(() => {
  const timer = setInterval(() => {
    setCount(count => count + 1);
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

7. 요약

• useEffect는 컴포넌트의 라이프사이클 동안 특정 시점에 코드를 실행하는 데 사용됩니다.
• 빈 의존성 배열([])을 사용하면 컴포넌트가 처음 마운트될 때만 코드가 실행됩니다.
• 의존성 배열에 값을 넣으면 해당 값이 변경될 때마다 코드가 실행됩니다.
• 정리(clean-up) 함수를 반환하면 컴포넌트가 언마운트되거나 다음 효과가 실행되기 전에 호출됩니다.
• API 호출, 이벤트 리스너 등록, 타이머 설정 등 다양한 부수 효과를 처리하는 데 유용합니다.

useEffect를 적절히 사용하면 React 애플리케이션에서 효율적으로 부수 효과를 관리할 수 있습니다.