React · effect

useEffect dependency 배열 실행 타이밍

의존성 배열의 모양에 따라 effect가 언제 실행되고 cleanup이 언제 호출되는지 달라집니다.

Effect 패턴 비교

timing

매 렌더 후 effect가 다시 실행됩니다.

컴포넌트가 처음 화면에 붙은 뒤 한 번 실행됩니다.

의존성 값이 바뀔 때만 effect를 다시 돌립니다.

구독 해제나 타이머 정리를 담당합니다.

사라질 때 마지막 cleanup이 실행됩니다.

render → effect → 의존성 점검 → cleanup → rerun

useEffect는 lifecycle 이름을 외우는 것보다 외부 시스템과 React 렌더 사이의 동기화 지점을 정하는 훅으로 봐야 합니다.