[useEffect] 리액트 컴포넌트의 생명주기를 제어하는 훅

useEffect 

리액트에서 함수형 컴포넌트를 사용할 때 가장 자주 만나게 되는 훅 중 하나가 useEffect 입니다. useEffect 는 컴포넌트가 렌더링된 이후 특정 작업(사이드 이펙트)을 실행할 수 있게 도와주는 훅입니다. 예를 들어, API 호출, 이벤트 리스너 등록, 타이머 설정, 외부 라이브러리 초기화 등의 작업이 이에 해당합니다.

이 글에서는 useEffect 의 기본 개념부터 동작 방식, 의존성 배열, 정리(clean-up) 함수까지 단계별로 알아보겠습니다.

 

---

1.  useEffect란?

useEffect 는 리액트 컴포넌트가 렌더링된 이후 실행되는 함수입니다. 컴포넌트가 처음 렌더링될 때, 특정 값이 바뀔 때, 컴포넌트가 사라질 때 등 다양한 타이밍에 맞춰 동작할 수 있습니다.

useEffect(() => {
  // 실행할 코드
}, [dependencies]);

• 첫 번째 인자 : 실행할 함수
• 두 번째 인자 : 의존성 배열 (해당 배열 안 값이 바뀔 때마다 함수가 다시 실행됨)

주의할 점

1. 의존성 배열 정확히 작성하기
   • 누락하면 최신 값이 아닌 오래된 값을 참조할 수 있습니다. (bug의 원인!)
   • ESLint의 react-hooks/exhaustive-deps 경고는 무시하지 않는 게 좋습니다.
2. 렌더링과 무관한 작업만 수행하기
   • useEffect 는 렌더 이후 동작하므로, 순수 UI 로직은 useEffect 에 넣지 않아야 합니다.

 

---

2.  기본 예제 - 렌더링 시 로그 출력

import { useEffect } from 'react';

function Hello() {
  useEffect(() => {
    console.log("컴포넌트가 렌더링되었습니다.");
  });

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

• 의존성 배열이 없으면 매 렌더링마다 실행됩니다.

실행 시점에 따른 동작 비교

의존성 배열	실행 시점	예시
없음	모든 렌더링 후마다	UI 변경 감지, 디버깅 로그 등
[] (빈 배열)	처음 마운트될 때 단 한 번	초기 데이터 불러오기 등
[value]	value가 바뀔 때마다	상태 변화 감지, 이벤트 반응

의존성 배열을 이용한 조건 실행

useEffect(() => {
  console.log(`count가 변경됨: ${count}`);
}, [count]);

• count 값이 변경될 때만 실행됩니다.
• 불필요한 실행을 막고 성능을 최적화할 수 있어요.

 

---

3.  정리(clean-up) 함수

컴포넌트가 언마운트될 때 또는 다음 useEffect 가 실행되기 전에 정리할 작업이 필요한 경우, 클린업 함수를 반환합니다.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("타이머 작동 중");
  }, 1000);

  // 클린업
  return () => {
    clearInterval(timer);
    console.log("타이머 정리됨");
  };
}, []);

• 주로 이벤트 리스너 제거, 타이머 종료, 구독 해제 등에 사용됩니다.

 

---

4.  예제 - 마운트 시 API 호출

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // 마운트 시 한 번만 실행

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

• 외부 데이터 요청은 대부분 useEffect 안에서 처리합니다.

 

---

5.  마무리

• useEffect 는 사이드 이펙트를 처리하기 위한 훅입니다.
• 의존성 배열을 통해 실행 시점을 제어할 수 있습니다.
  • 없음 → 모든 렌더 후 실행
  • 빈 배열 → 마운트 시 1회 실행
  • 특정 값 → 그 값이 바뀔 때만 실행
• 정리 함수는 언마운트 또는 다음 실행 전에 실행됩니다.
• API 호출, 타이머, 이벤트 등록 등에서 유용하게 쓰입니다.

함께 보면 좋은 자료

외부 사이트 :

• React 공식 문서 - useEffect

블로그 글 :

[React Hooks] useState부터 커스텀 훅까지

 

---