컴포넌트 수명 주기를 effect로 해석하기

렌더 완료

컴포넌트가 순수하게 JSX를 반환하고 React가 DOM commit을 끝낸다.

useEffect setup에서 WebSocket 구독, title 변경, fetch 시작을 수행한다.

deps의 id, url, handler가 바뀌면 이전 cleanup 뒤 새 setup이 실행된다.

컴포넌트가 사라질 때 마지막 cleanup으로 구독과 타이머를 끊는다.

mount

처음 나타남 초기 구독, 첫 데이터 요청, analytics pageview 기록

StrictMode는 setup-cleanup-setup으로 누락 정리를 드러냄

update

의존성 변화 id나 query가 바뀌면 이전 요청을 abort하고 새 요청을 시작

stale closure, exhaustive-deps 경고가 누락 신호

unmount

동기화 계약 판별 interval, subscription, pending fetch를 cleanup에서 해제

중복 이벤트, setState after unmount가 실패 신호

layout

화면 측정 getBoundingClientRect처럼 paint 전 측정/보정은 useLayoutEffect 검토

긴 동기 작업은 화면 표시를 막음

렌더 순수성 렌더 중 localStorage, DOM, 네트워크 요청을 직접 변경하지 않는다.

cleanup 반환 setup이 연결한 listener와 timer를 같은 effect에서 해제한다.

deps 배열 effect 내부에서 읽는 props, state, 함수가 dependency에 반영된다.

StrictMode 개발 중 이중 실행에서 중복 구독이 보이면 cleanup 누락을 의심한다.