REACT · EFFECT

useEffect cleanup 타임라인

effect cleanup은 unmount 때만 실행되는 것이 아니라, 의존성이 바뀌어 다음 effect가 실행되기 직전에도 먼저 실행됩니다.

useEffect cleanup 타임라인 구조

cleanup
mounteffect 최초 실행
deps change의존성 변경 감지
cleanup old이전 effect 정리
run new새 effect 실행
mountdeps changecleanup oldrun new

useEffect cleanup 타임라인 기준

점검
구독 해제event listener와 subscription을 cleanup에서 제거합니다.
타이머setInterval과 timeout은 clear로 정리합니다.
요청 취소fetch는 AbortController와 함께 쓰면 안전합니다.
strict mode개발 중 두 번 실행되는 패턴을 견딜 수 있어야 합니다.