React Hooks 심층 분석: 렌더링부터 고급 설계까지
·
📚 Dev Log
1. React의 심장: Fiber와 Hook의 동작 원리React가 컴포넌트의 변경 사항을 추적하고 화면에 반영하는 모든 과정의 중심에는 Fiber 아키텍처가 있습니다.Fiber란?Fiber는 React의 핵심 재조정(Reconciliation) 알고리즘입니다. 이전에는 컴포넌트 트리를 재귀적으로 순회하며 변경 사항을 계산했는데, 이 방식은 중단이 불가능하여 복잡한 앱에서 UI 블로킹을 유발했습니다.Fiber는 이 문제를 해결하기 위해 작업 단위를 분할하고 우선순위를 부여할 수 있는 자료구조를 도입했습니다. 각 Fiber 노드는 컴포넌트에 대한 정보를 담는 자바스크립트 객체이며, 작업의 "스냅샷"과도 같습니다.child: 첫 번째 자식 Fiber를 가리킵니다.sibling: 다음 형제 Fiber를 가..