Fabric — 새로운 렌더링 시스템

기존 아키텍처:
React (JS) → Shadow Tree (JS) → Bridge (비동기) → Native Views

문제점:
1. Bridge를 통한 비동기 통신 → 프레임 드롭
2. 모든 레이아웃 계산이 JS 스레드에서 실행
3. 동기적 측정(measure) 불가능 → 레이아웃 점프

Fabric 아키텍처:
React (JS) → Shadow Tree (C++) → Native Views

개선점:
1. C++로 작성된 Shadow Tree → 더 빠른 레이아웃 계산
2. JSI를 통한 동기적 통신 → Bridge 병목 제거
3. 동기적 측정 가능 → 레이아웃 점프 없음
4. React 18 동시성 기능 지원

기존: 모든 렌더링이 동기적 → 무거운 업데이트가 UI 차단

Fabric: 우선순위 기반 렌더링
- 높은 우선순위: 터치 응답, 애니메이션 → 즉시 처리
- 낮은 우선순위: 데이터 로드 후 리스트 업데이트 → 중단 가능

사용자가 스크롤하면서 동시에 데이터 로드:
→ 스크롤 애니메이션(높은 우선순위)이 끊기지 않음
→ 리스트 업데이트(낮은 우선순위)는 유휴 시간에 처리

// 기존: measure가 비동기 → 레이아웃 점프 발생
ref.current.measure((x, y, width, height) => {
  // 콜백이 다음 프레임에서 실행 → 한 프레임 점프
});

// Fabric: 동기적 측정 → 즉시 레이아웃 적용
// Tooltip, Popover 등의 위치 계산이 정확해짐

// react-native.config.js (수동 설정 시)
module.exports = {
  project: {
    android: {
      unstable_reactLegacyComponentNames: ['MyLegacyComponent'],
    },
    ios: {
      unstable_reactLegacyComponentNames: ['MyLegacyComponent'],
    },
  },
};

호환성 확인 사이트: reactnative.directory
→ "New Architecture" 필터로 지원 여부 확인

주요 라이브러리 지원 현황 (2024+):
✅ react-native-reanimated
✅ react-native-gesture-handler
✅ react-native-screens
✅ react-native-svg
✅ react-native-maps