📚 Reference

• GitHub 1
• 참고 자료 1

📜 Chapter

Concurrent Mode

Stack Reconciler

Server Component

useMemo

useCallback

Fiber

• Fiber
• 파이버
• Fiber Reconciler
• React Fiber는 React가 컴포넌트 트리를 렌더링하고 업데이트하는 방식을 개선하기 위해 도입된 새로운 핵심 아키텍처이다.
• 이전의 Stack Reconciler(스택 리컨실러)가 동기적으로 동작했던 것과 달리, Fiber는 비동기적으로 작업을 처리하여 렌더링 성능을 최적화하고 사용자 경험을 향상시킨다.
• React의 Fiber Reconciler는 Stack Reconciler의 한계를 극복하기 위해 React 16부터 도입된 완전히 새로운 핵심 알고리즘 엔진이다.
• 가장 큰 차이점은 작업을 '잘게 쪼개어(Incremental Rendering)' 관리한다는 점이다.

Fiber의 핵심 목표

• Scheduling
  • Stack Reconciler가 멈출 수 없는 기차였다면, Fiber는 신호등이 있는 도로와 같다.
  • 중단 및 재개 (Pause & Resume): 렌더링 작업을 수행하다가 브라우저에 더 급한 작업(애니메이션, 사용자 입력 등)이 들어오면 작업을 멈추고 제어권을 넘겨준다.
  • 우선순위 부여 (Prioritization): 모든 업데이트가 똑같이 중요하지 않다는 전제하에, 사용자 클릭은 즉시 처리하고 데이터 로딩 같은 작업은 조금 뒤로 미룬다.
  • 재사용 및 폐기: 이전에 했던 작업 결과를 재사용하거나, 더 이상 필요 없어진 업데이트는 과감히 버릴 수 있다.

등장 배경

• 기존의 Stack Reconciler는 재귀적으로 컴포넌트를 처리하며, 한 번 렌더링이 시작되면 완료될 때까지 중단할 수 없었다.