02. useEffect: 사이드 이펙트와 선언적 동기화
React
Hook
Side Effect
외부 세계와의 통신을 '동기화' 관점으로 재정의하고, 7가지 실무 패턴으로 Effect를 완전히 통제하라.
사이드 이펙트(Side Effect)의 관리: 리액트 외부 세계와의 통신
무엇인가:
순수 함수적 렌더링을 벗어나 외부 시스템(API, DOM, 타이머)과 상호작용하는 모든 행위. useEffect는 이 비순수한 작업들을 렌더링 이후 안전하게 실행하는 격리 공간이다.
왜 쓰는가: 리액트 외부의 상태와 컴포넌트의 내부 상태를 안전하고 일관되게 동기화하기 위해. 의존성 배열이 이 동기화의 조건을 선언한다.
언제 쓰는가:
데이터 패칭, 이벤트 구독, 수동 DOM 조작, 외부 라이브러리 인스턴스화 시점. 단, 서버 컴포넌트(RSC) 환경에서는 useEffect 없이 직접 await fetch()를 사용하라.
1관문. Synchronization, not Lifecycle
비디오 재생 상태를 라이프사이클이 아닌 동기화 관점으로 Effect를 작성하라.
2관문. Race Condition
빠르게 탭을 전환할 때 이전 응답이 늦게 도착해 화면을 덮어쓰는 버그를 ignore 플래그로 방어하라.
3관문. AbortController
컴포넌트가 언마운트되거나 userId가 바뀔 때 진행 중인 fetch 요청을 실제로 취소하라.
4관문. Primitive Dependencies
객체를 의존성으로 사용할 때 발생하는 무한 실행을 원시값 분해로 해결하라.
5관문. Effect Event (Experimental)
매 방문마다 analytics를 보내되, roomId가 바뀔 때만 재실행되고 url 변경엔 반응하지 않도록 하라.
6관문. Idempotency (멱등성)
Strict Mode의 이중 실행에서도 부작용이 없는 멱등성 있는 Effect를 작성하라.
7관문. Ref-based Effect
ResizeObserver를 useEffect + ref로 결합하여 엘리먼트 크기 변화를 감지하라.