렌더링 파이프라인 시각화

React Fiber의 렌더링 과정을 단계별로 시각화합니다. 자동 재생 기능을 통해 각 단계의 흐름을 확인할 수 있습니다.

← Fiber 예제로 돌아가기

렌더링 파이프라인 단계

🔴 Render Phase (1-5단계)

비동기적으로 실행되며 중단 가능한 단계입니다. 실제 DOM에 영향을 주지 않으므로 언제든 멈추거나 재시작할 수 있습니다.

  • 1. 업데이트 트리거: setState, props 변경 등으로 리렌더링 시작
  • 2. 스케줄링: 업데이트 우선순위 할당 (긴급/일반)
  • 3. Reconciliation: 가상 DOM 비교로 변경사항 계산
  • 4. Effects 표시: 변경이 필요한 노드 마킹
  • 5. Work 완료: Render Phase 종료, Commit 준비

🔵 Commit Phase (6-10단계)

동기적으로 실행되며 중단 불가능한 단계입니다. 실제 DOM을 변경하고 사이드 이펙트를 실행합니다.

  • 6. Before Mutation: DOM 변경 전 스냅샷 저장
  • 7. Mutation: 실제 DOM에 변경사항 적용
  • 8. Layout Effects: useLayoutEffect 훅 실행 (DOM 측정)
  • 9. Passive Effects: useEffect 훅 실행 (비동기)
  • 10. 완료: 화면 업데이트 완료, 다음 렌더링 대기

💡 주요 특징

  • • Render Phase는 중단 가능 (interruptible)
  • • Commit Phase는 중단 불가능 (non-interruptible)
  • • 5단계와 6단계 사이에 Phase 전환
  • • useLayoutEffect는 DOM 변경 직후 동기 실행
  • • useEffect는 화면 업데이트 후 비동기 실행

재생 제어

Step 1 / 10
🔴 Render Phase
React Flow