render phase
리액트가 변화된 상태나 props에 따라 어떤 UI가 변경되어야 할지 결정하는 단계
이 과정에선 실제 DOM을 업데이트하지 않고, 변경사항을 가상 DOM에서 계산하여 비교
순수한 계산과정이기 때문에 성능에 영향 주지 않도록 중단 or 다시 실행될 수 있음
React 18에서 도입된 Concurrent Mode를 통해 비동기적으로 처리 될 수도 있음
Concurrent Mode
리엑트에서 비동기 렌더링을 도입하여 사용자 경험을 개선하기 위해 도입된 개념
1. 비동기 렌더링
- 리액트가 작업을 중단할수있고 더 중요한 작업 먼저 실행되도록 우선순위 조정
- 사용자가 버튼을 클릭하는 즉각적인 반응을 느리게 로드되는 데이터 렌더링 작업 보다 우선 처리
- React 유연성 향상
- 애플리케이션이 사용자 입력, 네트워크 요청, 애니메이션 등 다양한 작업을 동시에 처리할 때 UI가 끊김없이 부드럽게 작동
- Suspense와 함께 작동
- 데이터를 로드하거나 리소스를 기다리는 동안 특정 컴포넌트를 렌더링하지 않고 '대기 상태'로 둘 수 있음
- 대기 중에 로딩 스피너 같은 대체 UI를 표시
- 자동 배치
- 여러 상태 업데이트를 자동으로 묶어서 한 번의 렌더링으로 처리. 렌더링 성능 최적화
commit phase
실제로 변화된 UI를 DOM에 반영하는 단계
이때 리액트는 가상 DOM에서 계산된 결과를 실제 DOM에 적용하고, 변화된 UI를 브라우저에 렌더링
이 과정에서 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가 정확히 동기화되고 불필요한 재렌더링 방지
Fiber Tree
fiber Reconciler가 사용자의 UI를 효율적으로 업데이트하기 위해 사용하는 데이터 구조
즉, 애플리케이션의 전체 컴포넌트 구조를 표현하는 연결 리스트 형태의 트리 구조
