useEffect란?

useEffect는 React에서 함수형 컴포넌트의 사이드 이펙트를 처리할 수 있도록 도와주는 훅이다. 사이드 이펙트란 렌더링 외의 작업을 의미하는데, 예를 들어 데이터 fetching, 구독(subscription), 타이머 설정, 이벤트 리스너 등록/제거 등이 이에 해당한다.

즉, useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 실행하거나, 속성이 변경되었을 때 그에 맞는 작업을 실행하는 기능을 제공한다.

 

기본 사용법

useEffect는 두 가지 인수를 받는다. 

1. 콜백 함수 : 사이드 이펙트를 처리하는 코드가 들어간다. 이 콜백 함수는 렌더링 후 실행된다.

2. 의존성 배열(dependency array) : useEffect가 언제 실행될지 결정한다. 이 배열에는 컴포넌트가 리렌더링될 때 useEffect가 다시 실행되기 위한 조건을 명시할 수 있다.

 

useEffect의 기본 구조

useEffect(() => {
  // 사이드 이펙트 코드
}, [/* 의존성 배열 */]);

의존성 배열

• 의존성 배열에 포함된 값이 변경될 때마다 useEffect가 다시 실행된다.
• 의존성 배열이 빈 배열일 경우, 컴포넌트가 마운트될 때 한 번 즉, 컴포넌트가 처음 렌더링될 때만 실행된다.

예시 : 마운트될 때 한 번만 실행

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다');
  }, []); // 빈 배열 => 마운트될 때만 실행

  return <h1>Hello, World!</h1>;
};

예시 : 상태 변화에 반응

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`현재 카운트: ${count}`);
  }, [count]); // count 값이 변경될 때마다 실행

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

예시 : 언마운트 시 실행

useEffect에서 리턴된 함수는 컴포넌트가 언마운트될 때 실행된다. 이를 이용해 리소스 정리 작업을 할 수 있다.

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('1초마다 실행됩니다');
    }, 1000);

    // 언마운트 시 클린업 함수 실행
    return () => {
      clearInterval(timer); // 타이머를 종료
      console.log('컴포넌트가 언마운트되었습니다');
    };
  }, []); // 빈 배열: 마운트될 때만 실행

  return <h1>Hello, World!</h1>;
};

예시 : API 호출

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const result = await response.json();
      setData(result);
    };

    fetchData(); // API 호출

  }, []); // 빈 배열 => 컴포넌트가 마운트될 때만 실행

  if (!data) return <p>Loading...</p>;

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

 

실행 순서

1. 컴포넌트 렌더링 후 useEffect의 콜백 함수 실행

2. 의존성 배열에 설정된 값이 변경되었을 때 useEffect 다시 실행

3. 컴포넌트 언마운트 또는 의존성이 변경되기 전, 이전에 실행된 useEffect의 정리(cleanup) 함수 실행

 

주의 사항

• 무한 루프 : 의존성 배열을 설정하지 않으면 매 렌더링마다 실행된다.
• 효율성 : 불필요한 실행이 없도록 의존성 배열을 적절히 설정해야 한다.