데브허브 | DEVHUB | [10분 테코톡] 피터의 React Fiber[10분 테코톡] 피터의 React Fiber
- React Fiber는
setState의 지연된 상태 업데이트나 조건문 내 훅 호출 에러와 같은 React의 일반적인 문제들을 해결하기 위해 도입되었습니다. 💡
- Fiber는 두 가지 주요 역할을 합니다: 렌더링 작업을 잘게 나누어 우선순위가 높은 작업을 먼저 처리하는 'Fiber 재조정자'와 컴포넌트의 모든 상태(훅 포함)를 저장하는 'Fiber Node'입니다. 🛠️
- React 16 이전의 스택 재조정자는 렌더링 블로킹 현상을 유발했지만, React 16에서 도입된 Fiber 재조정자는 작업을 분할하여 사용자 경험을 개선했습니다. 🚀
- Fiber Node는 React Hooks를 포함한 함수형 컴포넌트의 모든 상태를 저장하는 JavaScript 객체로, React 16.8 이후 함수형 컴포넌트가 상태를 가질 수 있게 한 핵심입니다. 🌳
updateQueue 속성은 setState 호출 시 상태 업데이트를 즉시 반영하지 않고 큐에 쌓아 렌더링 주기 끝에 일괄 처리하는 'Batch 업데이트'를 담당합니다. 🔄
memoizedState 속성은 훅의 이전 상태를 연결 리스트 형태로 저장하여 함수형 컴포넌트가 리렌더링되어도 상태를 기억하게 하며, 훅 호출 순서가 중요한 이유를 설명합니다. 🔗
lanes는 작업 우선순위를 관리하여 동시성 모드(Transition API, Suspense)와 관련이 있고, alternate는 현재 트리와 작업 중인 트리 간의 연결을 관리합니다. 🚦
- React Fiber에 대한 이해는 훅, 동시성, Suspense 등 React의 핵심 기술을 학습하고 프론트엔드 개발자 면접을 준비하는 데 큰 도움이 됩니다. 🎓
- 궁극적으로 React Fiber는 React의 재조정 엔진이자 컴포넌트의 모든 상태를 관리하는 JavaScript 객체입니다. 🧠