라이프사이클과 useEffect

React에서 컴포넌트는 생성되고, 변화하고, 사라지는 생명 주기(Lifecycle)를 가진다. 이 과정을 이해하면 데이터 요청, 이벤트 등록, 정리 같은 로직을 적절한 시점에 실행할 수 있다.

React 컴포넌트의 라이프사이클은 크게 3단계로 나뉜다.

Mount → Update → Unmount

 

---

 

1️⃣ Mount (마운트)

컴포넌트가 처음 생성되어 화면에 렌더링 되는 순간이다.

• 컴포넌트가 처음 화면에 나타남
• API 데이터 요청
• 이벤트 리스너 등록

import { useEffect, useState } from "react";

function Counter() {

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

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

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

핵심 포인트

 

useEffect(() => {}, [count])

 

deps(의존성 배열)에 빈 배열을 넣으면 마운트 시점에만 실행된다.

 

---

 

2️⃣ Update (업데이트)

컴포넌트의 state나 props가 변경되어 다시 렌더링 되는 순간이다.

• 버튼 클릭으로 state 변경
• 부모 컴포넌트 props 변경
• 사용자 입력

import { useEffect, useState } from "react";

function Counter() {

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

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

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

핵심 포인트

useEffect(() => {}, [count])

• count 값이 변경될 때마다 실행된다.

 

---

 

3️⃣ Unmount (언마운트)

컴포넌트가 화면에서 제거되는 순간이다.

• 페이지 이동
• 조건부 렌더링 종료
• 컴포넌트 삭제

이때 이벤트 리스너 제거, 타이머 제거 같은 정리가 필요하다.

import { useEffect } from "react";

function Timer() {

  useEffect(() => {

    const id = setInterval(() => {
      console.log("타이머 실행");
    }, 1000);

    return () => {
      clearInterval(id);
      console.log("컴포넌트 언마운트");
    };

  }, []);

  return <div>Timer</div>;
}

 

핵심 포인트

return () => {}

이 함수를 cleanup 함수 또는 정리 함수라고 한다.

 

---

 

4️⃣ useEffect란?

useEffect는 React 컴포넌트에서 발생하는 사이드 이펙트(Side Effect)를 처리하기 위한 Hook이다.

 

사이드 이펙트란? 컴포넌트의 렌더링 외부에서 발생하는 작업을 의미한다.

• API 요청
• 콘솔 출력
• DOM 조작
• 이벤트 리스너 등록
• 타이머 실행

 

return () => {}

 

---

 

5️⃣ useEffect 실행 방식 정리

코드실행 시점

useEffect(()=>{})	렌더링 될 때마다 실행
useEffect(()=>{}, [])	마운트 시 1번 실행
useEffect(()=>{}, [value])	value 변경 시 실행
useEffect(()=>{ return ()=>{} }, [])	언마운트 시 cleanup

 

---

 

6️⃣ 업데이트에서만 실행하고 싶은 경우 (useRef)

React에서는 첫 렌더링을 제외하고 업데이트에서만 실행해야 하는 경우도 있다. 이때 useRef를 사용할 수 있다.

 

import { useEffect, useRef } from "react";

function App({ value }) {

  const isFirst = useRef(true);

  useEffect(() => {

    if (isFirst.current) {
      isFirst.current = false;
      return;
    }

    console.log("업데이트에서만 실행");

  }, [value]);

  return <div>{value}</div>;
}

 

---

정리

React 컴포넌트의 라이프사이클은 다음 3단계로 나뉜다.

Mount → Update → Unmount

 

그리고 useEffect를 통해 각 단계에서 실행할 작업을 제어할 수 있다.

• 마운트 → 초기 데이터 요청
• 업데이트 → 값 변경 시 로직 실행
• 언마운트 → 이벤트 정리