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를 통해 각 단계에서 실행할 작업을 제어할 수 있다.
- 마운트 → 초기 데이터 요청
- 업데이트 → 값 변경 시 로직 실행
- 언마운트 → 이벤트 정리
'💻 STUDY > Frontend' 카테고리의 다른 글
| React 렌더링 원리와 Virtual DOM (0) | 2026.03.13 |
|---|---|
| useReducer와 성능 최적화 (0) | 2026.03.13 |
| Props의 전달 (0) | 2026.03.12 |
| State 정리 (0) | 2026.03.11 |
| React 이벤트에 대해서 (0) | 2026.03.11 |