[ React ] 리액트의 render phase와 commit phase

리액트의 렌더링 과정은 render phase, commit phase로 나눌 수 있다

먼저 render phase는 리액트가 변화된 상태나 props에 따라 어떤 UI가 변경되어야 할지를 결정하는단계이다.
이 과정에선 실제로 DOM을 업데이트 하지 않고, 변경사항을 가상 DOM에서 계산하여 비교합니다
이 단계는 순수하게 계산과정이기에 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있으며 React18에서 도입된 Concurrent Mode를 통해 비동기적으로 처리될 수도 있다

다음으로 commit phase는 실제로 변화된 UI를 DOM에 반영하는 단계이다
이때 리액트는 가상 DOM에서 계산된 결과를 실제 DOM에 적용하고, 변화된 UI를 브라우저에 렌더링 합니다
DOM업데이트 이후는 useEffect와 같은 사이드 이펙트를 발생시키는 훅들이 실행됩니다

 

요약하면, render phase는 변화된 UI를 결정하는 계산과정이고, commit phase는 그 계산된 결과를 실제로 반영하는 단계

 

그럼 render phase, commit phase가 동기화될 때의 특징

1. 단계적 진행
render phase가 완료되면 리액트는 즉시 commit phase를 실행하지 않고, 다른 높은 우선순위 작업이 있다면 먼저 처리한 후 나중에 commit phase를 실행한다. 이러한 단계적 진행을 통해 React는 동기화가 필요한 작업을 효율적으로 관리하여 사용자경험을 개선한다

2. 병목관리
render phase에서 모든 변경사항이 Fiber Tree에 준비된 상태에서 commit phase로 넘어가므로, render와 commit단계의 일관성이 유지된다. 이렇게 두 단계는 순차적으로 작동하여, UI가 정확하게 동기화되고 불필요한 재렌더링을 방지한다