피드로 돌아가기
Dev.toFrontend
원문 읽기
Fiber 엔진 기반의 Render-Commit 분리 구조를 통한 UI 렌더링 최적화
React Rn-Rendering Wrokflow
AI 요약
Context
상태 변경 시마다 발생하는 DOM 조작의 높은 비용을 해결하기 위한 React의 렌더링 메커니즘 분석. 단순 전체 업데이트 방식의 한계를 극복하고자 Virtual DOM과 스케줄링 개념을 도입한 구조적 설계 적용.
Technical Solution
- State, Props, Context 변경에 의한 Update 스케줄링 기반의 Trigger 단계 구현
- Fiber 엔진을 활용하여 연산을 분할하고 중단 가능한 Render Phase 설계
- Reconciliation 알고리즘을 통한 Virtual DOM diffing으로 최소한의 변경 사항 산출
- 계산된 변경 사항을 실제 DOM에 일괄 반영하는 동기적 Commit Phase 운용
- useLayoutEffect의 동기 처리와 useEffect의 비동기 처리를 통한 Browser Paint 최적화
- Props/State 미변경 시 렌더링을 건너뛰는 Bailout 최적화 로직 적용
실천 포인트
1. 불필요한 Child re-render 방지를 위한 Props 최적화 및 Memoization 검토
2. UI 블로킹 방지를 위해 useLayoutEffect 대신 useEffect 사용 우선 고려
3. List 렌더링 시 Reconciliation 효율 극대화를 위한 고유 Key 값 설정 준수
4. Concurrent React 특성을 고려하여 무거운 연산의 렌더링 단계 분리 설계