React Fiber의 핵심 개념
아키텍처 변혁
React Fiber는 React의 렌더링 프로세스를 근본적으로 변화시킨 혁신적인 재조정(reconciliation) 엔진입니다 [1][2]. 기존의 동기식 재귀 렌더링 방식에서 벗어나, 비동기적이고 점진적인 렌더링을 가능하게 하는 새로운 아키텍처를 도입했습니다 [3].
주요 특징
1. 증분 렌더링 (Incremental Rendering)
- 작업 분할: React는 렌더링 작업을 작은 단위로 나누어 처리할 수 있게 되었습니다 [2].
- 우선순위 관리: 사용자 상호작용과 같은 중요한 작업에 높은 우선순위를 부여할 수 있습니다 [3].
2. 동시성 렌더링 (Concurrent Rendering)
- 여러 버전의 UI를 백그라운드에서 동시에 준비할 수 있습니다 [4].
- 시간 분할(Time-slicing) 기술을 통해 5ms 단위로 작업을 분할합니다 [3].
기술적 구조
Fiber 노드의 구조
- 연결 리스트 기반의 노드 구조
- 각 노드는 컴포넌트의 메타데이터를 저장합니다 [2]
- 자식, 형제, 부모 노드에 대한 참조를 포함합니다 [5]
주요 이점
1. 성능 최적화: 메인 스레드 차단 문제 해결 [1]
2. 반응성 향상: UI의 응답성을 크게 개선 [3]
3. 유연한 렌더링: 작업의 일시 중지, 재개, 우선순위 조정 가능 [2]
실제 구현 메커니즘
렌더링 프로세스
- 조정자(Reconciler): 컴포넌트 트리 비교 및 변경 사항 계산
- 스케줄러(Scheduler): 작업 우선순위 결정
- 렌더러(Renderer): 플랫폼별 UI 업데이트 적용 [3]
고급 기능
- 오류 경계(Error Boundaries) 구현
- 비동기 렌더링 지원
- 선택적 수분화(Selective Hydration) 기능 [4]
---
Sources
[1] https://www.youtube.com/watch?v=JadWu4Ygnyc
[2] https://tusharf5.com/posts/react-fiber-overview/
[3] https://blog.logrocket.com/deep-dive-react-fiber/
[4] https://javascript.plainenglish.io/react-fiber-architecture-concurrent-rendering-508f942c1f43