Suspense, transition, concurrent rendering 등 현대 리액트의 핵심 기능들은 모두 React Fiber 위에서 동작합니다. Fiber가 등장하기 전 동기적 렌더링의 한계부터, lanes 기반 우선순위 시스템, 그리고 Render/Commit 단계의 동작 방식까지 살펴봅니다.

React 15의 재귀적 reconciliation은 렌더링을 중단할 수 없고 우선순위도 구분할 수 없었습니다. 리액트는 이를 해결하기 위해 자바스크립트 callstack 대신 자체 자료 구조인 Fiber를 도입하여, 렌더링을 작은 단위로 나누고 브라우저에게 제어권을 넘길 수 있게 했습니다.

이 글에서는 행동 디자인 패턴 중 하나인 상태 패턴(State Pattern)의 정의와 구현 방법 및 사용예시에 대해 살펴보겠습니다.