React Native Fabric 아키텍처

📌 Fabric이란?

Fabric은 React Native에서 새롭게 도입된 렌더링 아키텍처로
기존 구조에서 JS와 Native 간 통신에 사용되던 Bridge 병목 문제, UI 업데이트 지연, React 최신 기능 미지원 같은 한계를 극복하기 위해 도입됨.
React 18 이후 생긴 Concurrent Rendering, Suspense, Fine-grained UI control 등을 사용하려면 필요했음

❗ 기존 아키텍처(Paper)의 문제

구조 요약:

• JS에서 UI 명령 생성 → JSON 형태로 Bridge를 통해 Native로 전달 → Native에서 렌더링

• JS와 Native는 서로 다른 쓰레드에서 동작함

• 메시지들은 직렬화되고 비동기로 전달되며, 순서 보장 없이 처리됨

문제점:

• Bridge가 단방향/직렬화 기반이기 때문에 병목 발생

• JS 쓰레드가 바쁠 때 Native 쪽 렌더링 지연됨 → UI 끊김 발생

• React 18의 Concurrent UI 기능과 전혀 연동 불가능

• 네이티브 UI와 JS 상태 간의 불일치 발생 가능성 있음

• 컴포넌트 간 상호작용이 복잡해질수록 퍼포먼스 급격히 하락

• Android와 iOS 간 UI 구현 일관성 유지 어려움

✅ Fabric 구조

핵심 구성 요소:

작동 방식:

• React Fiber에서 UI 명령 생성

• Shadow Tree로 변환

• JSI를 통해 Native UI로 직접 적용
  → Bridge 경유하지 않음. 동기화와 성능 모두 개선

✨ Fabric에서 가능해진 것들

📦 Fabric이 도입된 배경

React Native가 초기에 가진 장점(빠른 개발, JS-Native 혼합)은 유지하면서도,
점점 무거워지는 UI 요구와 React Core의 발전 방향(Concurrent UI 등)에 대응할 수 없었다

React 18의 기능을 모바일에서 제대로 활용하려면:

• React Fiber와 Native UI의 렌더 트리 연동

• JS ↔ Native 간 직접적인 커뮤니케이션 경로

• 각 컴포넌트의 상태 변화에 따른 즉각적인 UI 반영

이런 기반이 필수였음 → 그래서 Fabric이 나옴

🕓 도입 히스토리

🔍 기존 vs Fabric 차이

🔧 Fabric 활성화 여부 확인

아래 콘솔이 true라면 활성화된 플젝.

console.log(global?.nativeFabricUIManager != null);

🧠 예시로 보는 변화

<Button onPress={() => setOpen(true)} />

• 기존

  1. 이 이벤트가 JS에서 처리되고

  2. Native는 Bridge 통해 지연 적용 → 프레임 딜레이 발생 가능

• Fabric 이후

  1. React Fiber가 직접 상태 변화 추적

  2. Shadow Tree 업데이트 후 즉시 Native에 반영 → 지연 없음, UI 정확도 ↑

✅ 마무리 요약

Fabric은 React와 Native가 진짜로 하나처럼 동작하게 만들어주는 기반이다
0.76 이후부터는 기본 적용되어 있으며, boxShadow, PressAnimation, Concurrent Rendering 등 모든 최신 기능은 Fabric 없이는 불가능하다