useEffect란?

컴포넌트가 렌더링된 후에 실행되는 “사이드 이펙트(side effect)” 전용 함수.

리액트는 렌더링 = 화면을 그리는 과정인데,
이 렌더링 과정에서는 순수한 계산만 있어야 해.

하지만 실제 앱에서는 이런 게 필요함:

API 요청
DOM 직접 조작
네트워크 / 타이머 / 이벤트 등록
데이터 저장/불러오기(localStorage)
외부 라이브러리 초기화 등등…

이런 “부수효과(=side effect)”를 수행하는 공간이 useEffect야.

기본 형태

useEffect(() => { // 실행할 코드 }, [deps]);
deps = dependency array(의존성 배열)
어떤 상황에 effect를 실행할지 결정하는 “조건” 역할.

상황별로 정리한 useEffect의 3가지 동작

의존성 배열이 없는 경우

useEffect(() => { console.log("컴포넌트가 렌더링될 때마다 실행"); });

↳ 언제 쓰냐?

매 렌더링마다 동작해야 하는 로그, 디버깅
렌더링 기반으로 DOM을 계산해야 하는 상황

거의 사용 안 함

렌더링마다 실행되면 성능상 손해라 대부분 피함.

빈 배열인 경우: 첫 렌더링만 실행

useEffect(() => { console.log("마운트될 때 딱 1번 실행!"); }, []);

↳ 언제 쓰냐?

처음 페이지 열릴 때 한 번만 실행해야 하는 작업
✔ API 데이터 fetch
✔ WebSocket / Firebase 연결
✔ setInterval 등록
✔ 외부 라이브러리 초기화

React에서 componentDidMount 역할.

특정 값이 변경될 때 실행

useEffect(() => { console.log(`count가 ${count}로 바뀔 때마다 실행`); }, [count]);

↳ 언제 쓰냐?

상태가 바뀔 때 특정 작업 수행
검색어가 바뀌면 API 요청
어떤 props가 바뀌면 로직 다시 실행
폼 입력값 변화 감지 후 debouncing

useEffect의 또 하나의 핵심: cleanup(정리 함수)

useEffect(() => { const timer = setInterval(() => { console.log("Tick"); }, 1000); return () => { clearInterval(timer); // 정리 }; }, []);

왜 필요?

컴포넌트가 사라지거나 다시 실행될 때
이전에 사용하던 리소스를 “정리해주어야” 메모리 누수가 안 발생함.

cleanup이 필요한 경우

setInterval, setTimeout
이벤트 리스너(window.addEventListener)
WebSocket 연결 종료
외부 라이브러리 instance 해제

useEffect로 만들 수 있는 주요 효과들 정리

1) API 데이터 가져오기

useEffect(() => { fetch('/api/todos') .then(res => res.json()) .then(data => setTodos(data)); }, []);

2) 타이머 / 인터벌 만들기

useEffect(() => { const id = setInterval(() => { setTime(t => t + 1); }, 1000); return () => clearInterval(id); }, []);

3) 이벤트 리스너 등록

useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []);

4) 상태 변경 시 추가 로직 실행

useEffect(() => { console.log("검색어:", keyword); // debounce 후 API 요청 등 }, [keyword]);

5) props 변경 기반 로직

useEffect(() => { console.log("props로 받은 userId가 바뀌었어!"); }, [userId]);

6) localStorage 저장/불러오기

useEffect(() => { const saved = localStorage.getItem("todo"); if (saved) setTodo(JSON.parse(saved)); }, []); useEffect(() => { localStorage.setItem("todo", JSON.stringify(todo)); }, [todo]);

useEffect를 쓸 때 고려해야 할 것

1) “언제 실행되어야 하는지”가 가장 중요

동작 조건 → 의존성 배열.

2) 불필요한 effect 금지

상태 업데이트가 또 effect를 불러오면 무한 루프 가능.

3) 상태를 읽어야 하면 의존성 배열에 반드시 넣기

리액트 strict모드에서는 더 엄격하게 검사함.

useEffect는 언제 쓰나? (한 줄 요약)

렌더링과 직접 관련 없는 작업을 하고 싶을 때.
≠ 화면을 그리는 로직
= 외부 세계와 상호작용하는 로직(API, 이벤트, 타이머 등)