개발하는데 다 이유가 있겠지

리액트의 렌더링 과정은 크게 두가지로 `render phase`와 `commit phase`로 나뉜다.

 

---

 

1. render phase

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

2. commit phase

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

 

---

 

💡그러면 render phase와 commit phase는 어떻게 동기화되나요?

`단계적 진행`과 `병목 관리` 두 가지 단계로 말할 수 있습니다.

 

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

• 작업의 우선순위 : React는 사용자 상호작용이나 애니메이션과 같은 우선순위가 높은 작업을 먼저 처리하고, 렌더링 작업은 필요에 따라 중단하거나 재개할 수 있습니다. 이를 통해 사용자 경험을 저하시키는 끊김 없는 인터랙션을 제공합니다.
• 작업 분할 : 복잡한 렌더링 작업을 더 작은 단위로 나누어 처리하여 브라우저의 메인 스레드를 점유하는 시간을 줄이고, 사용자 응답성을 높일 수 있습니다.

 

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

• Fiber Tree : 가상 DOM을 트리 형태로 나타낸 자료 구조로, React는 Fiber Tree를 이용하여 효율적인 diffing 알고리즘을 수행하고, 렌더링 우선순위를 결정합니다.
• Reconciliation : Fiber Tree를 기반으로 이전 상태와 현재 상태를 비교하여 실제로 업데이트해야 할 부분만 찾아내는 과정입니다.
• 일관성 유지 : render phase에서 계산된 결과는 commit phase에서 그대로 반영되므로, UI가 항상 정확하게 동기화됩니다.