리액트의 렌더링

리액트의 렌더링 과정은 크게 두 가지 단계로 render phase와 commit phase로 나눌 수 있다.

render phase

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

계산만 하는 단계이기 때문에, 더 급한 일(사용자 클릭 등)이 생기면 순서를 뒤로 미룰 수도 있다.

commit phase

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

이 단계는 중간에 멈출 수 없다. 그래서 한 번에 끝까지 실행된다.

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

render phase와 commit phase가 동기화될 때의 특징은?

크게 단계적 진행과 병목 관리이다.
첫번째로 render phase가 완료되면 리액트는 즉시 commit phase를 실행하지 않고, 다른 높은 우선순위 작업이 있다면 먼저 처리한 후 나중에 commit phase를 실행할 수 있다. 이러한 단계적 진행을 통해 React는 동기화가 필요한 작업을 효율적으로 관리하여 사용자 경험을 개선한다.
두번째로는 병목 관리이다. render phase에서 모든 변경 사항이 Fiber Tree에 준비된 상태에서 commit phase로 넘어가므로, render와 commit 단계의 일관성이 유지된다. 이렇게 두 단계는 순차적으로 작동하여, UI가 정확하게 동기화되고 불필요한 재렌더링을 방지한다.