useEffect란

useEffect 훅은 함수형 컴포넌트에서 부수 효과(side effects)를 처리하기 위해 사용되는 중요한 기능이다

useEffect 훅이란?

useEffect 훅은 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프사이클 메서드를 함수형 컴포넌트에서도 사용할 수 있게 해준다.
이는 데이터 가져오기, 구독, DOM 업데이트 등 다양한 부수 효과를 관리하는 데 사용된다.

기본 사용법

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 부수 효과 코드는 여기 작성된다.
    console.log('Component mounted or updated');

    // 정리(clean-up) 함수 반환 (선택 사항)
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 의존성 배열
  return <div>My Component</div>;
}

useEffect의 기본 구조

• 부수 효과 함수: 첫 번째 인자로 전달되는 함수. 이 함수 안에 부수 효과 코드를 작성한다.
• 정리(clean-up) 함수: 부수 효과 함수에서 반환하는 함수. 컴포넌트가 언마운트되거나 부수 효과가 다시 실행되기 전에 호출된다.
• 의존성 배열: 두 번째 인자로 전달되는 배열. 배열에 있는 값이 변경될 때마다 부수 효과가 다시 실행된다.

의존성 배열

의존성 배열을 통해 useEffect가 언제 실행될지를 제어할 수 있다.

• 빈 배열 ([]):
  컴포넌트가 처음 마운트될 때만 부수 효과가 실행된다.
  예를 들어, API 호출과 같이 한 번만 실행되어야 하는 작업에 유용하다.

useEffect(() => {
  console.log('Component mounted');
}, []);

• 특정 값:
  열에 특정 값을 넣으면, 그 값이 변경될 때마다 부수 효과가 실행된다.
  예를 들어, 특정 상태가 변경될 때마다 효과를 재실행해야 하는 경우에 사용된다.

const [count, setCount] = useState(0);
useEffect(() => {
  console.log('Count changed:', count);
}, [count]);

• 의존성 배열 생략:
  의존성 배열을 생략하면 컴포넌트가 렌더링될 때마다 부수 효과가 실행된다.
  이는 성능에 부정적인 영향을 미칠 수 있으므로 주의해서 사용해야 한다.

useEffect(() => {
  console.log('Component rendered');
});

• 정리(clean-up) 함수
  부수 효과가 다시 실행되거나 컴포넌트가 언마운트될 때 정리(clean-up) 함수가 호출된다. 이는 메모리 누수와 같은 문제를 방지하는 데 중요하다.

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);

  // 정리 함수
  return () => {
    clearInterval(timer);
    console.log('Clean up');
  };
}, []);

고급 사용법

• 여러 개의 useEffect 사용:
  하나의 컴포넌트에서 여러 개의 useEffect를 사용할 수 있다. 이는 부수 효과를 논리적으로 분리할 수 있게 해준다.

useEffect(() => {
  console.log('Effect 1');
}, [dependency1]);

useEffect(() => {
  console.log('Effect 2');
}, [dependency2]);

• 조건부 부수 효과:
  의존성 배열을 이용해 특정 조건에서만 부수 효과가 실행되도록 할 수 있다.

const [isActive, setIsActive] = useState(false);
useEffect(() => {
  if (isActive) {
    console.log('Active state changed');
  }
}, [isActive]);

최신 패턴 및 고려사항

• 의존성 배열 관리:
  모든 의존성을 배열에 포함시켜야 한다. 이는 eslint-plugin-react-hooks를 통해 검증할 수 있다. 이 플러그인은 의존성 배열의 누락된 항목을 경고해 준다.

• 비동기 함수 사용:
  useEffect 안에서 비동기 함수를 직접 사용할 수 없기 때문에, 내부에 비동기 함수를 정의하고 호출하는 패턴을 사용한다.

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

• 레이스 컨디션 방지:

비동기 작업이 완료되기 전에 컴포넌트가 언마운트되면 레이스 컨디션이 발생할 수 있다. 이를 방지하기 위해 정리 함수 안에서 비동기 작업을 취소할 수 있는 패턴을 사용할 수 있다.

useEffect(() => {
  let isCancelled = false;
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    if (!isCancelled) {
      console.log(data);
    }
  };
  fetchData();

  return () => {
    isCancelled = true;
  };
}, []);

해당 게시글은 chat-GPT의 도움을 받아 작성되었습니다.

출처 :
chat-GPT