React | render phase와 commit phase

리액트의 렌더링에는 render phase와 commit phase가 있다

render phase

함수를 실행한 후에 가상 DOM과 현재의 DOM을 비교해서 어떤 UI가 변경되어야 할지 결정하는 단계
단순히 결정하는 단계이기 때문에 성능에 영향을 주지 않는다

DOM을 비교했을 때, 변화가 있는 것을 검사하는 것을 dirty checking이라고 한다

commit phase

실제 변화된 UI를 실제 DOM에 반영하는 단계
실제로 반영하기 때문에 useEffect 등의 사이드 이펙트가 발생하는 훅이 실행된다

render phase가 완료되면 리액트는 즉시 commit phase를 실행하는 것이 아니라, 다른 높은 우선 순위의 작업을 먼저 처리할 수 있다
이렇게 동기화가 필요한 작업을 단계적으로 진행하여 효율적으로 사용자 경험을 개선한다

그리고 render phase에서 변경된 것이 Fiber Tree에 준비된 후에 commit phase로 넘어가기 때문에 각 단계간의 일관성이 유지된다

이렇게 순차적으로 동작해서 UI가 정확하게 동기화되고 불필요한 재렌더링을 방지한다