React는 Fiber 아키텍처로 렌더링 작업을 작은 단위로 나눠 중단·재개할 수 있게 하고,
내부 Scheduler와 Lane 기반 우선순위로 업데이트 순서를 조율해
메인 스레드 블로킹 없이 사용자 입력 응답성을 유지한다.

[React Fiber & 동시성]
├── 기존 Stack Reconciler의 문제
│   ├── 재귀 호출 → 중간 중단 불가
│   └── 메인 스레드 블로킹 → 프레임 드롭
├── Fiber 아키텍처
│   ├── Fiber Node — 컴포넌트/작업 단위를 표현하는 내부 데이터 구조
│   │   ├── 트리 구조 (child / sibling / return)
│   │   └── 두 개의 트리 (current / workInProgress)
│   ├── Reconciliation (재조정)
│   │   ├── Render Phase — 중단 가능, 비동기
│   │   └── Commit Phase — 중단 불가, 동기
│   └── 내부 Scheduler
│       └── 우선순위 Lane 기반 스케줄링
└── Concurrent Features (React 18)
    ├── useTransition — transition update 표시
    ├── useDeferredValue — 값의 반응을 지연
    └── Suspense — 비동기 렌더링 경계

        App (Fiber Node)
        ├── child ──→ Header (Fiber Node)
        │              ├── child ──→ Nav (Fiber Node)
        │              │              └── return ──→ Header
        │              └── return ──→ App
        └── child ──→ Main (Fiber Node)
                       ├── sibling ──→ Footer (Fiber Node)
                       └── return ──→ App

child   : 첫 번째 자식 노드를 가리킴
sibling : 다음 형제 노드를 가리킴
return  : 부모 노드를 가리킴 (작업 완료 후 돌아갈 위치)

current 트리                workInProgress 트리
(현재 커밋된 트리.          (다음 렌더를 준비하는 트리.
 지금 화면에 표시 중)        Commit 전까지 DOM에 반영 안 됨)

① current 기반으로 workInProgress 생성
② workInProgress에서 변경 사항 계산 (Render Phase)
③ 계산 완료 → DOM에 반영 (Commit Phase)
④ workInProgress가 새로운 current가 됨

① 컴포넌트 함수 실행 → 새 출력(React element) 계산
② 이전 Fiber와 비교 → 변경 필요 여부 판단
③ 변경이 필요한 경우 effect 태그 표시 (삽입/업데이트/삭제)
④ Scheduler가 남은 시간 확인 → 부족하면 중단, 다음 기회에 재개

function Component() {
  fetch('/api/data'); // ❌ 중단/재실행 시 중복 요청 발생
  return <div />;
}

function Component() {
  useEffect(()

① 실제 DOM 조작 수행 (삽입, 업데이트, 삭제)
② useLayoutEffect 실행 (DOM 변경 직후, 페인트 전, 동기)
③ 브라우저 페인트
④ useEffect 실행 (페인트 후, 비동기)

[우선순위 Lane — 높을수록 먼저 처리]

SyncLane              (가장 높음) — 클릭, 포커스 같은 이산 이벤트
InputContinuousLane               — 드래그, 스크롤 같은 연속 이벤트
DefaultLane                       — 일반적인 setState
TransitionLane                    — startTransition으로 표시된 업데이트
IdleLane              (가장 낮음) — 처리가 가장 나중으로 미뤄지는 작업

const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  setQuery(e.target.value);           // SyncLane — 즉시 처리

const deferredQuery = useDeferredValue(query);
// query는 즉시 반영, deferredQuery는 긴급 업데이트가 없을 때 반영
<HeavyResultList query={deferredQuery} />

Virtual DOM: 변경 사항을 메모리에서 먼저 계산 → 실제 DOM 조작을 최소화
             → DOM 조작 횟수를 줄여 성능에 기여 (레이아웃 재계산 비용 감소)

Fiber:       그 계산 자체를 작은 단위로 나눠 우선순위에 따라 스케줄링
             → 메인 스레드 블로킹 방지로 추가 성능 향상

React.memo   → props가 같으면 자식의 Render Phase 진입 자체를 건너뜀
useMemo      → Render Phase 안에서 무거운 계산 결과를 메모이제이션
useCallback  → 함수 참조를 메모이제이션 (React.memo 자식에 함수 prop 넘길 때 필요)

[도입]
"Fiber는 React 16에서 도입된 내부 재조정 구조입니다.
 렌더링 작업을 작은 단위로 나눠 중단하고 이어서 실행할 수 있게 합니다."

[문제 배경]
"그 전에는 재귀로 컴포넌트 트리를 순회했는데,
 재귀는 콜 스택이 해소될 때까지 중단할 수 없어서
 트리가 크면 수십 ms 동안 메인 스레드가 블로킹됐습니다."

[Fiber의 해결]
"Fiber는 각 컴포넌트를 Fiber Node라는 내부 데이터 구조로 표현하고
 링크드 리스트 포인터를 이용해 순회합니다.
 다음에 처리할 노드 참조를 변수에 저장할 수 있어
 한 노드 처리 후 실행을 중단하고 다음 기회에 이어서 처리할 수 있습니다."

[두 단계]
"렌더링은 Render Phase(컴포넌트 호출 → 변경 계산, 중단 가능)와
 Commit Phase(실제 DOM 반영, 중단 불가)로 나뉩니다."

[핵심 설명]
"모든 상태 업데이트에는 Lane이라는 우선순위가 있습니다.
 startTransition 안에서 setState를 호출하면
 그 업데이트를 TransitionLane으로 표시합니다.
 React는 해당 작업을 처리하다가 더 높은 우선순위 업데이트가 들어오면
 진행 중인 작업을 중단하고 급한 것을 먼저 처리합니다."

[실사용 예시]
"검색창에서 입력값 업데이트는 즉시 처리하고,
 수천 개 항목 필터링은 startTransition 안에 넣으면
 새 입력이 들어올 때마다 이전 필터링 작업이 중단되고
 입력창은 항상 즉시 반응합니다."

React는 원래 재귀로 렌더링해서 큰 트리 처리 시 메인 스레드가 블로킹됐습니다.

Fiber는 각 컴포넌트를 Fiber Node로 표현하고 링크드 리스트로 연결해서
렌더링 작업을 중단하고 이어서 실행할 수 있게 했습니다.

렌더링은 Render Phase(변경 계산, 중단 가능)와
Commit Phase(DOM 반영, 중단 불가)로 나뉩니다.

React 18의 concurrent features는 이 능력을 활용합니다.
startTransition 안의 업데이트는 TransitionLane으로 표시되어
더 높은 우선순위 업데이트가 들어오면 중단되고 나중에 처리됩니다.