Work Loop 동작 시각화

React Fiber의 Work Loop가 어떻게 동작하고 Time Slicing과 인터럽트를 처리하는지 확인하세요.

Fiber 예제로 돌아가기

Work Loop 개념

Work Loop란?

Work Loop는 React가 Fiber 트리를 순회하면서 각 노드를 처리하는 핵심 메커니즘입니다. 작업을 작은 단위로 나누어 브라우저가 다른 작업을 처리할 시간을 확보합니다.

처리 단계

  • 1. Begin Work: Fiber 노드 처리 시작
  • 2. Complete Work: 현재 노드 처리 완료
  • 3. Commit Work: DOM 업데이트

Time Slicing

약 5ms 단위로 작업을 수행하고 시간이 소진되면 브라우저에 제어권을 반환합니다.

while (workInProgress && !shouldYield()) {
  performUnitOfWork(workInProgress);
}

우선순위 시스템

  • High: 사용자 입력
  • Normal: 일반 업데이트
  • Low: 백그라운드 작업

Interruptible Rendering

우선순위가 높은 작업이 들어오면 현재 작업을 중단하고 중요한 작업을 먼저 처리합니다.

재생 제어

현재 단계
대기 중
Time Slice 남은 시간
5ms / 5ms
진행 상황
0 / 4 Fiber 완료
범례
현재 처리 중
처리 완료
대기 중
React Flow