Trigger Phase
리액트에서 어떠한 컴포넌트가 렌더링 되기 위해서는 렌더링을 실행시킬 트리거가 필요합니다.
리액트에서의 트리거는 주로 2가지 경우가 있습니다.
-
초기 렌더 : 사용자가 페이지에 처음 방문하였을 때 발생
-
리렌더 : 상태가 업데이트 되었을 때 발생
Render Phase
render phase는 리액트가 변화된 상태나 props에 따라 어떤 UI를 변경할지를 결정하는 단계입니다.
이 과정에서는 실제로 DOM을 업데이트하지 않고, 변경사항을 가상 DOM에서 계산하여 비교합니다.
이 단계는 순수하게 계산 과정이기 때문에 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있으며, React 18에서 도입된 Concurrent Mode를 통해 비동기적으로 처리될 수도 있습니다.
Commit Phase
commit phase는 render phase에서 결정한 UI를 실제로 DOM에 반영하는 단계입니다.
리액트는 가상 DOM에서 계산된 결과를 실제 DOM에 적용하고, 변화된 UI를 브라우저에 렌더링합니다.
DOM 업데이트 이후에는 useEffect와 같은 사이드 이펙트를 발생시키는 훅들이 실행됩니다.
Render Phase와 Commit Phase가 동기화될 때의 특징
-
단계적 진행
render phase가 완료되면 리액트는 즉시 commit phase를 실행하지 않고, 다른 높은 우선순위 작업이 있다면 먼저 처리한 후 나중에 commit phase를 실행할 수도 있습니다.
이러한 단계적 진행을 통해 리액트는 동기화가 필요한 작업을 효율적으로 관리하여 사용자 경험을 개선합니다. -
병목 관리
render phase에서 모든 변경 사항이 Fiber Tree에 준비된 상태에서 commit phase로 넘어가므로, render와 commit 단계의 일관성이 유지됩니다.
이렇게 두 단계는 순차적으로 작동하여, UI가 정확하게 동기화되고 불필요한 리렌더링을 방지합니다.
