렌더링 중단과 재개가 가능한 React Fiber의 내부 동작 원리

Context

기존 렌더링 방식은 중단 불가능한 동기적 구조. 대규모 트리를 처리할 때 메인 스레드 점유로 인한 UI 프리징 발생. 사용자 입력과 같은 긴급한 업데이트를 즉시 처리하기 어려운 한계.

Technical Solution

• 화면 표시용 Current 트리와 작업용 WorkInProgress 트리를 분리 운영하는 Double Buffering 설계
• 비트마스크 기반의 Effect Flags를 사용하여 DOM 변경 사항을 기록하고 Commit 단계에서 일괄 반영하는 최적화 방식
• Lane 시스템을 통해 Sync, Transition, Idle 등 업데이트 우선순위를 구분하고 긴급 작업 발생 시 현재 렌더링을 중단하는 스케줄링 전략
• Fiber 노드의 memoizedState에 Hook을 연결 리스트 형태로 저장하여 호출 순서에 따라 상태를 매칭하는 구조
• subtreeFlags 및 childLanes를 활용하여 변경 사항이 없는 서브트리 전체를 렌더링 과정에서 건너뛰는 성능 최적화
• Before Mutation, Mutation, Layout의 3단계 Commit 프로세스를 통해 동기적으로 DOM에 최종 반영하는 안정적 설계

Key Takeaway

UI 업데이트를 원자적 단위의 작업(Fiber)으로 쪼개고 우선순위를 부여함으로써, 일관성을 유지하면서도 응답성을 극대화하는 Concurrent Rendering 아키텍처의 정수.