Render phase와 Commit phase

Render phase와 Commit phase

React의 렌더링 과정은 Render phase와 Commit phase로 크게 두 가지 단계로 나눌 수 있다.

각각의 단계는 UI 업데이트 과정에서 서로 다른 역할을 수행하며, 이를 통해 효율적이고 일관된 사용자 경험을 제공한다.

Render Phase

Render phase는 React가 변화된 상태(state)나 속성(props)에 따라 어떤 UI를 변경해야 할지를 결정하는 단계이며, 이 과정에선 실제 DOM을 업데이트하진 않지만, 변경 사항을 가상 DOM(Virtual DOM)에서 계산하고 비교한다.

• 중단 가능성: Render phase는 성능에 영향을 주지 않도록 필요에 따라 중단되거나 다시 실행될 수 있다.
• 비동기 처리: React 18에서 도입된 Concurrent Mode를 통해 비동기적으로 처리되며, 높은 우선순위의 작업을 먼저 수행할 수 있다.

Render phase는 어떤 변경이 필요한지 판단하는 계산 단계에 해당한다.

 

Commit Phase

Commit phase는 Render phase에서 계산된 결과를 실제 DOM에 반영하는 단계이며, 이 단계에서는 React가 가상 DOM에서 준비된 변경 사항을 실제 DOM에 적용하고 브라우저에 렌더링 하게 된다.

• 사이드 이펙트 처리: useEffect와 같은 사이드 이펙트를 발생시키는 훅이 실행된다.
• UI 업데이트 완료: 브라우저 화면에 최종 변경 사항이 반영된다.

Commit phase는 변경 사항을 실제로 적용하는 단계로, 사용자가 변화를 직접 체감할 수 있는 부분이다.

 

Render Phase와 Commit Phase의 동기화

 

단계적 진행

• Render phase가 완료된 후, React는 즉시 Commit phase를 실행하지 않는다.
• 대신, 다른 높은 우선순위 작업이 있다면 이를 먼저 처리한 후 나중에 Commit phase를 실행하는데, 이러한 단계적 진행 방식을 통해 React는 중요한 작업을 우선 처리하며, UI 업데이트가 사용자 경험에 방해되지 않도록 관리한다.

 

병목 관리

Render phase에서 모든 변경 사항이 Fiber Tree에 준비된 상태에서 Commit phase로 넘어가므로, 두 단계의 일관성이 유지된다.

• UI가 정확하게 동기화된다.
• 불필요한 재렌더링이 방지된다.