모던 리액트 Deep Dive - 가상 DOM과 리액트 파이버 (2)

* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.

 

리액트 파이버 작업순서

• 리액트 파이버의 작업 순서는 복잡한 UI 업데이트를 효율적으로 관리하기 위해 설계됨.
• 크게 렌더 단계 (Render Phase)와 커밋 단계(Commit Phase)로 이루어짐.
• 이 과정을 통해 리액트는 컴포넌트 트리를 재조정하고 실제 DOM을 업데이트함 

1. 렌더 단계(Render Phase)

• 순수 계산 단계 = DOM을 실제로 변경하지 않고 어떤 변경이 필요한지 결정
• 이 단계는 중단될 수 있으며, 우선순위 높은 작업이 있을 경우 해당 작업을 먼저 처리 할 수 있음.
• 리액트는 beginWork() 함수를 실행함
  • 각 컴포넌트의 Fiber Node를 순회하며 업데이트 시작
  • 새로운 props, state, context등을 기반으로 컴포넌트 렌더링 및 새로운 Fiber Tree 생성
  • 새로 생성된 Fiber Node와 기존 Fiber Node 비교하며 차이점을 찾음
• completeWork() 함수 실행하여 파이버 작업 완료
  • Fiber Node의 작업이 완료되면, 자식 노드로 이동. 모든 자식 노드의 작업이 완료되면 부모 노드로 돌아가 부모 노드의 작업을 완료
  • 모든 작업 완료 시 변경된 내용 기록, 다음 단계로 넘어감

2. 커밋 단계(Commit Phase)

• 실제로 DOM을 업데이트 하는 단계, 이 단계는 중단될 수 없으며 빠르게 완료되어야 함.
• Before Mutation
  • DOM 변경이 일어나기 전에 실행되는 작업.
  • 주로 레이아웃을 측정하거나, 스냅샷을 찍는 등의 작업이 이 단계에서 수행됩니다.
• Mutation
  • 실제 DOM 변경 일어남.
  • Fiber Tree에서 계산된 변경 사항을 실제 DOM에반영함. DOM 노드, 추가, 삭제 업데이트 작업
• Layout
  • DOM 변경 완료 이후 필요한 레이아웃 작업, 후속 작업 수행 

작업 순서 요약

1. 렌더 단계 (Render Phase):
   • Begin Work: 각 Fiber Node에 대해 새로운 상태 계산 및 Fiber Tree 생성
   • Complete Work: 각 Fiber Node의 작업 완료 및 부모 노드로 이동
2. 커밋 단계 (Commit Phase):
   • Before Mutation: DOM 변경 전에 실행되는 작업 (레이아웃 측정 등)
   • Mutation: 실제 DOM 변경 작업 (노드 추가, 삭제, 업데이트)
   • Layout: DOM 변경 후 레이아웃 작업 및 후속 작업 (생명주기 메서드 호출 등)

파이버와 가상 DOM

• 리액트 컴포넌트에 대한 정보를 1:1로 가지고 있는 것이 파이버
• 파이버는 리액트 아키텍처 내부에서 비동기로 이뤄짐
• 실제 브라우저 구조인 DOM에 반영되는 것은 동기적으로 이루어져야하기 때문에 메모리상에서 먼저 수행해서 최종 결과물만 실제 DOM에 적용

---

개인적으로 정리

스택 재조정 알고리즘(Stack reconciler) - 리액트 15버전까지

리액트 파이버(Fiber reconciler)- 리액트 16 버전부터

 

Stack reconciler

1. 단일 호출 스택: 컴포넌트 트리의 각 노드에 대해 재귀적으로 작업을 수행.
2. 동기식 작업 처리: 모든 작업은 동기식으로 처리. 즉, 한 번에 모든 재조정 작업이 완료될 때까지 진행. 이로 인해 대규모 업데이트나 복잡한 컴포넌트 트리에서는 브라우저가 긴 시간 동안 응답하지 않을 수 있었음.
3. 단순한 우선순위 관리: 작업 간의 우선순위 관리가 단순했으며 모든 작업은 동일한 우선순위로 처리되었음 -> 긴급한 이벤트의 경우 작업이 지연될 수 있음. 

Fiber reconciler

1. Fiber Nodes: 각 컴포넌트에 대응하는 Fiber Node를 사용하여 상태, props, effect 등을 관리. 이를 통해 재조정 과정이 더 유연해지고, 메모리 관리도 효율적으로 이루어짐
2. 작업 분할 (Incremental Work): 파이버는 재조정 작업을 작은 단위로 나누어 처리. 이를 통해 긴 작업이 UI를 멈추게 하지 않고, 필요한 만큼만 작업을 수행하여 사용자 인터페이스의 응답성을 유지할 수 있음.
3. 우선순위 기반 스케줄링: 파이버는 작업에 우선순위를 부여하여 중요한 작업을 먼저 처리. 예를 들어, 사용자 입력 이벤트는 높은 우선순위를 가지며 즉시 처리되고, 덜 중요한 작업은 나중에 처리.
4. 동시성 지원 (Concurrency):파이버는 동시성을 지원하여 여러 작업을 병렬로 처리. 이를 통해 성능을 최적화하고, 사용자 인터페이스가 부드럽게 동작하도록 함.

---

• 리액트 파이버는 리액트 16부터 도입된 새로운 재조정 엔진으로, 성능과 사용자 경험을 향상시킵니다.
• 이전 Stack Reconciler는 단일 호출 스택에서 동기적으로 작업을 처리하여 큰 업데이트 시 UI가 멈출 수 있었습니다.
• 파이버는 작업을 작은 단위로 나누어 처리하는 Incremental Work 방식을 사용합니다.
• 각 컴포넌트는 Fiber Node라는 경량 구조체로 표현됩니다.
• 우선순위 기반 스케줄링을 통해 중요한 작업을 먼저 처리하고 덜 중요한 작업은 나중에 처리합니다.
• 파이버는 작업을 중단하고 나중에 재개할 수 있어, UI 응답성을 유지합니다.
• 파이버는 동시성 지원을 통해 여러 작업을 병렬로 처리합니다.
• 에러 경계 (Error Boundaries)를 도입하여 컴포넌트 오류를 잡아낼 수 있습니다.
• Fiber Reconciler는 효율적인 메모리 관리를 제공합니다.
• 리액트 파이버는 Stack Reconciler의 단점을 극복하고 더 나은 성능을 제공합니다.