리액트의 렌더링 과정🫸
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가 동기화될 때의 특징❓❓
1️⃣ 단계적 진행
render phase가 완료되면 리액트는 즉시 commit phase를 실행하지 않고 다른 높은 우선순위 작업을 먼저 처리할 수 있다.
2️⃣ 병목 관리
render phase에서 모든 변경 사항이 Fiber Tree에 준비된 상태에서 commit phase로 넘어가기 때문에 render와 commit 단계의 일관성이 유지된다.
Fiber Tree?
Fiber Tree는 리액트가 내부적으로 만드는 구조로 뭐가 바뀌었는지, 뭘 업데이트해야 하는지 계산한다.
