리액트 Hook 완전 정복: useEffect 제대로 이해하기

리액트를 사용하다 보면 useEffect라는 훅을 많이 사용합니다. 처음엔 어렵게 느껴질 수도 있지만, 개념을 정확히 이해하고 나면 리액트 컴포넌트의 생명주기를 자연스럽게 다룰 수 있죠.

이번 포스팅에서는 useEffect가 도대체 어떤 역할을 하는지, 언제 사용해야 하는지, 그리고 마운트(Mount)와 언마운트(Unmount) 개념까지 함께 정리해 보겠습니다. 

1.useEffect란?

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행하게 하는 훅이다 

useEffect는 컴포넌트가 Mount(마운트), Update(업데이트), Unmount(언마운트) 되는 시점에 따라 작업을 실행할 수 있도록 도와줍니다. 주로 api 호출, 타이머 설정, 이벤트 리스너 등록/해제 등에서 사용합니다

 

2. 리액트의 Lifecycle이란?

컴포넌트가 생성되고 화면에 표시되고 상태가 바뀌고 사라지기까지의 전체 흐름을 말하며 

크게 이 라이프사이클을 세 단계로 나눌 수 있음

 

1. 마운트(Mount)

• 컴포넌트가 처음 생성되어 DOM에 삽입될 때
• 초기 렌더링 시점
• 예: useEffect(() => { ... }, []) 는 마운트 시 한 번만 실행

2. 업데이트(Update)

• props나 state가 변경되어 컴포넌트가 다시 렌더링 될 때
• 예: useEffect(() => { ... }, [값]) — 특정 값이 바뀔 때 실행

3. 언마운트(Unmount)

• 컴포넌트가 화면에서 사라지기 직전
• 정리 작업(clean-up)을 수행해야 할 때
• 예: useEffect 내부 return () => { ... } 구문이 여기 해당

 

🧱 기본 사용법: 마운트 시 실행되는 useEffect

컴포넌트가 마운트(Mount) 될 때, 즉 처음 DOM에 나타났을 때 어떤 작업을 실행하고 싶다면 useEffect를 다음처럼 사용합니다.

 

import { useEffect } from "react";

function ExampleComponent() {
  useEffect(() => {
    console.log("컴포넌트가 마운트되었습니다!");
  }, []);

  return <div>안녕하세요!</div>;
}

 

• [] (의존성 배열)이 비어있으면 이 useEffect는 오직 처음 마운트될 때만 실행됩니다.
• 마운트는 컴포넌트가 처음 DOM에 부착되는 시점을 의미합니다.

처음 렌더링되고 한번 실행된다고 생각하면 될 듯합니다

 

🔄 값이 변경될 때마다 실행되는 useEffect

usestate와 같은 상태값이 바뀌거나 props가 바뀔 때 등 특정 작업을 실행하고 싶다면 의존성 배열에 해당 값을 넣어주면 됩니다.

import { useEffect, useState } from "react";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`count가 ${count}로 변경되었습니다.`);
  }, [count]);

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

 

 

• 버튼을 클릭하면 count의 값이 1 올라갑니다 배열 안에 있는 값인 count가 1 올라가서 변경 됐기 때문에  useEffect가 실행됩니다
• 이 방식은 사용자 입력, 네트워크 응답 등을 처리할 때 유용합니다.

 

 

🧹 언마운트 시 정리(clean-up): 타이머 제거 등

언마운트는 컴포넌트가 DOM에서 제거 되는 시점으로 보통 컴포넌트가 사라지기 직전에 정리 작업 작업(clean-up)을

해줘야 합니다

 

useEffect(() => {
  // ✅ 1. 마운트될 때 실행
  const interval = setInterval(() => {
    console.log("1초마다 실행!");
  }, 1000);

  // ✅ 2. 정리 함수(return)는 "언마운트" 시 실행
  return () => {
    clearInterval(interval); // 타이머 종료
    console.log("컴포넌트 언마운트! 클린업 완료.");
  };
}, []);

 

타이머나 이벤트 리스너 해제할 때 사용하며 이런 정리 작업이 없으면 메모리 누수가 발생하거나 불필요한 동작이 계속 남아있을 수 있습니다. 외부 api나 이벤트 리스너 사용 시 중요하다고 하네요 

return () => { ... } 내부 함수는 언마운트가 되면 자동으로 실행 됩니다 

 

언제 언마운트 되는지?

예를 들어 이런 상황에서:

{showTimer && <TimerComponent />}

 

• showTimer가 true일 때 <TimerComponent />가 마운트되고
• showTimer를 false로 바꾸면 <TimerComponent />는 사라짐 → 언마운트됨
  👉 이때 useEffect의 return 함수가 실행돼서 clean-up이 일어남

 

3.useEffect 주의사항 및 팁

• useEffect 내부에서 직접 async 함수를 사용할 수 없습니다. async 함수는 따로 정의한 뒤 호출해야 합니다.
• 의존성 배열을 정확히 설정하지 않으면 무한 루프가 발생할 수 있어요.
• 렌더링 성능 최적화를 위해 의존성 배열을 신경 써야 합니다.