Fabric

📌 Brief Summary

Fabric은 React Native의 새로운 아키텍처(New Architecture)를 구성하는 핵심 요소 중 하나로, 밑바닥부터 완전히 새롭게 재작성된 새로운 UI 렌더링 시스템(UI 관리 레이어)이다 [1, 2]. 기존의 비동기 브릿지(Bridge) 방식의 병목 현상을 해결하기 위해 설계되었으며, 네이티브 UI 레이어에 대한 동기적 접근을 가능하게 한다 [1, 2]. 이를 통해 동시성 렌더링(Concurrent Rendering)과 동기적인 레이아웃 계산을 지원하며, 결과적으로 React Native 애플리케이션의 네이티브 렌더링 성능과 응답성을 비약적으로 향상시킨다 [1, 2].

📖 Core Content

동기적 네이티브 UI 접근 메커니즘 기존 아키텍처에서는 UI가 별도의 네이티브 스레드에서 관리되고 자바스크립트 스레드와의 통신이 비동기식으로 이루어져 성능 지연이 발생했다 [1, 2]. Fabric은 이 구조를 혁신하여, C++에서 UI의 가상 표현인 '섀도 트리(Shadow Tree)'를 직접 생성하고 스레드 간에 공유할 수 있도록 한다 [1]. 이를 통해 비동기적인 왕복 통신(round-trips) 없이도 네이티브 뷰를 측정하고 렌더링할 수 있게 된다 [2].
동시성 렌더링(Concurrent Rendering) 지원 Fabric은 React 18 및 그 이후 버전과 완벽하게 호환된다 [1]. 메인 스레드에서 데이터 페칭을 위한 Suspense나 Transitions와 같은 동시성 기능을 지원하며, 사용자 입력 등에 반응하기 위해 React가 렌더링의 우선순위를 재조정하거나 렌더링을 중단(interrupt)할 수 있도록 허용한다 [1, 2]. 이는 훨씬 더 유체적이고 반응성 높은 UI를 제공하는 핵심 기술이다 [1].
동기적 레이아웃 계산(Synchronous Layout) JSI(JavaScript Interface)를 기반으로 통신이 동기화됨에 따라, React Native는 네이티브 측에서 레이아웃을 측정 및 계산한 후 해당 정보를 동일한 렌더 사이클 내에서 자바스크립트 스레드에 제공할 수 있다 [1]. 이 구조적 변화는 UI 요소가 프레임 단위에서 위치가 튀는 현상(UI jump)을 근본적으로 해결해준다 [1].
네이티브 컴포넌트 수준의 고성능 애니메이션 렌더링 로직을 C++로 이동시키고 직접 통신을 활성화함으로써, Fabric은 UI 컴포넌트의 렌더링 및 업데이트 소요 시간을 대폭 감소시킨다 [1]. 이러한 네이티브 컴포넌트 렌더링 제어를 통해 부드러운 애니메이션과 거의 네이티브 수준에 근접한 성능(near-native performance)을 달성하게 된다 [3, 4].

⚖️ Trade-offs & Caveats

소스에 관련 정보가 부족합니다. 단, 소스에 명시된 아키텍처 구조를 통해 유추할 수 있는 제약 사항으로는 Fabric이 단독으로 기능하기보다는 JSI(JavaScript Interface) 기반의 바인딩과 TurboModules 등 New Architecture의 다른 요소들과 완벽하게 결합되어야만 비동기 브릿지의 한계를 극복하고 완전한 성능 향상을 이룰 수 있다는 구조적 종속성이 존재한다 [2, 4-6]. 또한 기존 브릿지 기반으로 작성된 서드파티 네이티브 라이브러리들은 이 새로운 동기식 렌더링 파이프라인에 맞춰 호환성 업데이트를 거쳐야 할 수 있다 [7, 8].

🔗 Knowledge Connections

[관계 유형 A (아키텍처/기반 기술)]

React Native New Architecture
- 연결 이유: Fabric은 TurboModules, JSI와 함께 React Native의 성능 병목을 해결하기 위해 도입된 'New Architecture'를 구성하는 핵심 삼위일체 중 하나이다 [2, 8].
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 비동기 브릿지를 제거한 새로운 시스템이 어떻게 프레임워크 전체의 성능 격차를 줄이고 모바일 개발 패러다임을 변화시키는지 종합적으로 이해할 수 있다 [8, 9].
JSI (JavaScript Interface)
- 연결 이유: Fabric 렌더러가 자바스크립트 코드와 네이티브 객체 간에 직렬화 오버헤드 없이 동기적으로 소통할 수 있게 해주는 근간 C++ 레이어 기술이다 [2, 6].
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 기존 JSON 직렬화 기반 통신 구조의 한계와, 직접적인 메모리/객체 참조가 렌더링 속도에 미치는 영향을 파악할 수 있다 [6, 10].

[관계 유형 B (구현/활용 도구)]

TurboModules
- 연결 이유: Fabric이 UI 렌더링의 동기적 처리를 담당한다면, TurboModules는 네이티브 모듈의 지연 로딩(lazy-loading)과 동기적 호출을 담당하여 New Architecture의 성능을 완성하는 상호 보완적 기술이다 [2, 11].
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 앱 초기 시작 시 로딩 시간(Startup time)과 메모리 사용량을 최소화하는 아키텍처 최적화 기법을 배울 수 있다 [2, 11].

Deeper Research Questions

Fabric의 C++ 기반 Shadow Tree는 기존 자바스크립트 기반의 가상 DOM(Virtual DOM) 처리 방식 대비 모바일 기기 메모리 및 스레드 자원 관리에 어떤 차별적 이점을 제공하는가?
React 18의 동시성 모델(Concurrent Rendering)은 Fabric 렌더러와 내부적으로 어떻게 결합하여 사용자 입력 시 렌더링 중단(interrupt) 및 우선순위 조정을 수행하는가?
Fabric의 동기적 레이아웃 계산은 기존 비동기 브릿지 환경에서 자주 발생했던 'UI 렌더링 점프(jump)' 현상을 정확히 어떤 렌더 사이클 변화로 해결하였는가?
React Native의 기존 아키텍처에서 Fabric이 적용된 New Architecture로 마이그레이션할 때, 개발자가 UI 스레드 및 애니메이션 구현 시 주의해야 할 코딩 패턴의 변화는 무엇인가?
Fabric의 도입이 고성능을 요구하는 대규모 엔터프라이즈 모바일 애플리케이션의 개발 속도와 장기적 유지보수 비용(TCO)에 미치는 영향은 무엇인가?

Practical Application Contexts

Implementation: React Native 앱 개발 시 UI 프레임 드랍이나 렌더링 지연이 발생하는 경우, Fabric을 활성화(opt-in)하여 동기적 레이아웃 계산 및 React 18의 Suspense를 이용한 부드러운 화면 전환을 구현할 수 있다 [1, 2].
System Design: 크로스 플랫폼 프론트엔드 시스템 설계 시, 네이티브 앱과 동일한 수준의 즉각적인 응답성과 UI 일관성이 필수적인 프로젝트에서 Fabric을 포함한 React Native의 New Architecture를 기술 스택의 핵심으로 채택할 수 있다 [2-4].
Operation / Maintenance: 레거시 React Native 애플리케이션의 렌더링 성능 최적화를 진행할 때, 기존 브릿지 병목을 추적하는 대신 Fabric 기반의 최신 릴리스(0.73 이상)로 엔진을 업그레이드하여 구조적인 유지보수 전략을 세울 수 있다 [2, 9].
Learning Path: 크로스 플랫폼 프론트엔드 개발자가 되기 위해 React 18의 핵심 개념을 학습한 후, 이것이 모바일 환경의 네이티브 렌더링에서 Fabric을 통해 어떻게 동기적으로 번역되고 적용되는지 심화 학습하는 데 활용된다 [1, 12].
My Project Relevance: 모바일 애니메이션이나 복잡한 폼 처리가 필요한 애플리케이션을 React Native로 기획할 때, Fabric 렌더러가 제공하는 네이티브에 가까운 60fps 렌더링 성능 보장을 바탕으로 보다 공격적이고 정교한 UI/UX를 설계할 수 있다 [3, 13, 14].

Adjacent Topics

Impeller
- 확장 방향: React Native가 Fabric을 통해 UI 비동기 병목을 해결했듯, Flutter 진영이 기존 Skia 엔진의 셰이더 컴파일 지연(Jank) 현상을 해결하기 위해 내놓은 커스텀 렌더링 엔진인 'Impeller'의 구조와 렌더링 방식을 비교 분석함으로써 모바일 크로스 플랫폼 렌더링 최적화 기술 전반의 흐름을 이해할 수 있다 [7, 9, 15].

Last updated: 2026-05-03

8.4 KiB Raw Blame History