React useEffect는 언제 실행될까: 렌더링 이후 실행 흐름과 cleanup 순서 빠른 답 useEffect 는 렌더링 중이 아니라 렌더링 결과가 커밋된 뒤 실행된다. 의존성 값이 바뀌면 새 effect 본문이 실행되기 전에 이전 cleanup이 먼저 실행된다. 빈 배열은 프로덕션에서 한 번 setup되는 패턴이지만, 개발 환경 StrictMode 에서는 점검을 위해 setup과 cleanup이 한 번 더 실행될 수 있다. DOM 측정이나 화면 반영 전 동기 보정이 필요하면 useEffect 보다 useLayoutEffect 가 맞는지 확인해야 한다. 목차 시간 흐름으로 이해하기 흐름으로 보기 데이터 흐름과 상태 소유권 생명주기보다 외부 시스템 동기화로 보기 effect 실행과 cleanup 순서 의존성 배열은 실행 횟수가 아니라 반응 범위다 API 요청과 타이머에서의 cleanup Strict Mode 로그가 두 번 보일 때 useLayoutEffect와 화면 반영 전 작업 흔한 안티패턴 정리 시간 흐름으로 이해하기 렌더링 시작 props와 state로 다음 UI를 계산한다. → DOM 반영 계산된 결과가 커밋되어 실제 DOM에 반영된다. → 화면 갱신 브라우저가 변경된 화면을 그릴 수 있다. → effect 실행 현재 렌더의 값으로 setup 함수가 실행된다. → 의존성 변경 이전 cleanup이 먼저 실행되고 새 setup이 이어진다. useEffect 를 “마운트, 업데이트, 언마운트에 호출되는 함수”로만 외우면 cleanup이 왜 업데이트 때도 실행되는지 헷갈리기 쉽다. 더 정확히는 특정 렌더의 props와 state에 맞춰 외부 시스템을 연결하고, 다음 연결이 필요해지면 이전 연결을 정리하는 흐름으로 보는 편이 이해하기 쉽다. 흐름으로 보기 흐름 다이어그램 이 순서에서 effect는 렌더링을 막고 값을 계산하는 장소가 아니다. 렌더링에 필요한 값은 컴포넌트 함수 안에서 계산하고, API 요청, 이벤트 구독, 타이머, ...