React render phase와 commit phase, 리렌더링이 DOM에 반영되기까지 빠른 답 render phase는 무엇이 바뀌어야 하는지 계산하는 단계라서 다시 실행되거나 중단될 수 있습니다. commit phase는 계산 결과를 실제 DOM에 반영하는 단계라서 짧고 일관되게 끝나는 것이 중요합니다. DOM 접근, 측정, 외부 부수효과는 render가 아니라 commit 이후 훅에서 처리해야 안전합니다. React 18 이후에는 render가 곧바로 화면 반영으로 이어진다고 보면 동작을 잘못 이해하기 쉽습니다. 목차 한눈에 비교 흐름으로 보기 왜 render phase와 commit phase를 자주 헷갈릴까 상태 변경부터 화면 반영까지 따라가기 실수를 빨리 잡는 설정 render에 둘 코드와 commit 이후에 둘 코드 로그로 보는 실행 순서 React 19.2 기준에서 달라진 설명 흔한 안티패턴과 디버깅 체크포인트 한눈에 비교 render phase : 컴포넌트를 호출해 다음 UI 스냅샷을 계산하는 단계입니다. 같은 입력이면 같은 출력이 나와야 하는 순수 계산이어야 합니다. commit phase : render 결과를 실제 DOM에 반영하는 단계입니다. ref 연결, DOM mutation, effect 실행 준비가 여기서 이어집니다. useLayoutEffect : commit 직후, 브라우저가 그리기 전에 실행됩니다. DOM 크기 측정이나 위치 보정처럼 paint 전에 끝나야 하는 작업에 맞습니다. useEffect : 외부 시스템과 동기화하는 용도입니다. 보통은 paint 뒤에 실행되지만, 사용자 상호작용으로 시작된 업데이트에서는 paint 전에 관찰될 수도 있습니다. 실무 기준으로는 파생값 계산은 render, DOM 측정은 useLayoutEffect , 네트워크·구독·타이머·로그 수집은 useEffect 로 나누면 거의 틀리지 않습니다. 흐름으로 보기 React 공식 문서는 이 과정을 trigger ...