React Fiber 작동 순서 시각화

×

React Fiber 작동 과정 설명

이 시각화 도구는 React Fiber 아키텍처의 작동 원리를 보여줍니다.

주요 단계:

1. 렌더 단계 시작: 루트에서 Fiber 작업이 시작됩니다.
2. 렌더 단계 처리: beginWork와 completeWork를 통해 컴포넌트 트리를 순회합니다.
3. 렌더 단계 완료: 작업 중인 Fiber 트리 구성이 완료됩니다.
4. 커밋 전 단계: DOM 변경 전 작업을 수행합니다.
5. DOM 변경 단계: 실제 DOM 조작이 발생합니다.
6. 레이아웃 단계: DOM 업데이트 후 작업을 수행합니다.

컴포넌트 타입:

• 함수형 - 함수형 컴포넌트
• 클래스 - 클래스 컴포넌트
• 호스트 - DOM 요소 (div, span 등)

조작 방법:

• 초기화: 상태를 처음으로 되돌립니다.
• 시작: 전체 과정을 자동으로 실행합니다.
• 한 단계씩: 하나의 작업 단위를 실행합니다.
• 일시정지: 자동 실행을 일시정지합니다.
• 속도: 자동 실행 속도를 조절합니다.