React Native Bridge & Fabric Physics

1. Overview

React Native 브릿지 및 패브릭 물리(React Native Bridge & Fabric Physics)는 웹 개발의 표준인 React 패러다임을 모바일 기기 위에서 구동시킬 때, 자바스크립트(JS)와 네이티브(OS) 간의 소통 병목을 해결하는 통신 아키텍처 역학을 다룹니다.

초창기 React Native는 자바스크립트 스레드와 네이티브(UI) 스레드가 직렬화된 JSON 메시지를 비동기 브릿지(Bridge)를 통해 던지며 소통했습니다. 이로 인해 리스트를 빠르게 스크롤할 때마다 병목(Traffic Jam)이 발생해 하얀 화면(Blank Screen)이 뜨는 물리적 한계가 명확했습니다. 학습자는 이 낡은 비동기 브릿지 모델의 통신 병목을 해부하고, 이를 타파하기 위해 C++ 레벨에서 JS와 네이티브 메모리를 직접 공유하는 새로운 렌더링 엔진인 패브릭(Fabric)과 JSI(JavaScript Interface)의 동기적(Synchronous) 렌더링 물리를 체화합니다.

2. Scope & Boundaries

In-Scope

• 레거시 Bridge 아키텍처: JS Thread, Native Thread, Shadow Tree, 비동기 JSON 직렬화(Serialization) 병목.
• 새로운 아키텍처 (New Architecture): Fabric 렌더링 엔진, TurboModules (비동기 초기화 제거), JSI(JavaScript Interface) 메모리 공유.
• React 컴포넌트 라이프사이클: Virtual DOM Diffing과 네이티브 뷰 매핑 역학.
• 성능 최적화(Performance): JS 프레임레이트(FPS)와 Native UI 프레임레이트 분리 측정, 플랫리스트(FlatList) 윈도윙.

Out-of-Scope

• React 웹 DOM Reconciliation: 브라우저 환경에서의 순수 Virtual DOM 트리 $ightarrow$ 14-02-01. Virtual DOM Reconciliation Physics 영역으로 위임.
• 네이티브 모듈 직접 작성: Swift나 Kotlin으로 깊은 커스텀 하드웨어 드라이버를 짜는 로직 $ightarrow$ 각 네이티브 섹션(13-01, 13-02)으로 위임.

Boundaries

• RN vs Flutter (13-03-02): React Native(13-03-01)는 JS로 로직을 돌리되 렌더링 자체는 OS가 가진 '진짜 네이티브 버튼'을 차용하는 프록시(Proxy) 구조라면, Flutter(13-03-02)는 네이티브 버튼을 버리고 빈 도화지 위에 자체 게임 엔진(Skia)으로 처음부터 픽셀을 직접 그리는(Direct Rendering) 정반대의 렌더링 물리입니다.

3. Counterexample

• 동기식 블로킹의 환상 (Synchronous Blocking Fallacy): 레거시 아키텍처에서 무거운 JS 연산(예: 1만 개 배열 정렬)을 실행하면, JS 스레드가 멈춰버리고 네이티브 스레드(UI)에 JSON 메시지를 전달하지 못해 스크롤 애니메이션이 뚝뚝 끊깁니다. JS 연산이 UI 프레임레이트를 박살 내는 현상을 피하려면 무거운 연산을 네이티브로 넘기거나 Reanimated와 같은 UI 스레드 직결 라이브러리를 써야 합니다.
• 무한 직렬화 오버헤드 (Serialization Overhead): JS에서 C++를 거쳐 네이티브로 데이터를 보낼 때, 배열이나 객체를 모두 JSON String으로 직렬화(Serialization)하고 반대편에서 파싱하는 과거의 관습. 데이터가 커질수록 파싱에 CPU가 낭비됩니다. JSI 기반의 TurboModule을 도입하여 직렬화 없이 C++ 포인터 메모리 주소만 참조하는 동기 통신으로 전환해야 합니다.

4. Prerequisites

• JavaScript 엔진 물리 (Basic): JS 엔진(V8, Hermes)이 단일 스레드로 동작하는 원리와 이벤트 루프를 알아야 JS 병목을 이해할 수 있습니다. (14-01-01. JS Runtime)
• Virtual DOM (Recommended): React의 상태가 변할 때 트리를 비교하는 Diffing 구조를 알아야 Shadow Tree의 변환을 이해할 수 있습니다. (14-02-01. React Virtual DOM)

5. Learning Map

6. Learning Topics

Basic

Core Topic 01: 레거시 비동기 Bridge 아키텍처의 한계

• Why to Learn: RN 앱이 리스트를 스크롤할 때 왜 종종 하얀 화면(Blank Screen)이 보이거나 애니메이션이 버벅이는지(Jank) 물리적 원인을 파악하기 위함입니다.
• What to Learn: JS Thread, Native UI Thread, Shadow Thread, JSON Serialization Bridge, Asynchronous Messaging.
• How to Learn: 스크롤 이벤트를 네이티브 스레드가 감지 $ightarrow→ 브릿지로 JSON 직렬화 후 전송 → ightarrow→ JS 스레드가 이벤트 처리 후 다시 UI 업데이트 렌더링 JSON 전송 → ightarrow$ 네이티브가 화면 갱신의 복잡하고 느린 3단계 핑퐁(Ping-pong) 과정을 시퀀스 다이어그램으로 그려봅니다.
• Implement: 1,000개의 리스트 아이템을 가진 FlatList를 구현하고, 빠른 스크롤 시 JS 스레드가 네이티브 스크롤 속도를 따라가지 못해 화면 일부가 렌더링 누락되는(Blank) 프레임 드랍을 프로파일러로 관찰.

Core Topic 02: Hermes 엔진의 AOT-like 최적화

• Why to Learn: 자바스크립트는 원래 텍스트로 된 소스코드를 런타임에 파싱해야 하므로 앱이 켜지는(TTV) 시간이 길지만, 이를 모바일에 맞게 개조한 Hermes의 물리를 알기 위해서입니다.
• What to Learn: Hermes Engine, Bytecode Precompilation (AOT), Memory Footprint, TTI(Time to Interactive).
• How to Learn: 일반 JS 엔진(JSC)이 유저 기기에서 소스를 파싱하고 바이트코드로 변환하는 반면, Hermes는 앱을 빌드(Build)하는 개발자 PC에서 미리 바이트코드로 컴파일해버려 기기에서는 실행만 하는 물리적 속도 차이를 분석합니다.
• Implement: RN 0.70 이상의 프로젝트에서 Hermes 엔진을 강제로 끄고 켰을 때(Toggle), 앱 아이콘을 누른 후 첫 화면이 뜨기까지의 기동 시간(Cold Start)과 힙(Heap) 메모리 점유율 감소 수치를 비교 측정.

Recommended

Core Topic 03: JSI(JavaScript Interface)와 TurboModules

• Why to Learn: 브릿지의 JSON 직렬화 오버헤드를 완전히 걷어내고, C++ 레벨에서 네이티브 함수를 동기적으로 직접 호출하기 위함입니다.
• What to Learn: JSI (C++ API), Synchronous Invocation, Memory Sharing, TurboModules.
• How to Learn: 구형 네이티브 모듈(Native Modules)이 앱 켜질 때 100개를 다 메모리에 올려야 했던 반면, TurboModule은 JSI를 통해 JS가 그 모듈을 진짜 호출할 때만(Lazy Load) 즉시 로딩하고 동기적(Sync)으로 결괏값을 가져오는 C++ 포인터 공유를 이해합니다.
• Implement: "배터리 잔량 가져오기" 네이티브 함수를 짤 때, 기존의 콜백(Callback)/프로미스(Promise) 방식이 아닌, C++ JSI를 거쳐 JS 코드에서 마치 로컬 함수를 호출하듯 const level = getBatteryLevelSync() 형태로 동기 호출되는 브릿지-리스(Bridgeless) 모듈 구조 분석.

Core Topic 04: Fabric 렌더링 엔진과 동기적 커밋

• Why to Learn: 상태(State)가 변했을 때 UI 업데이트가 지연되는 비동기적(Async) 구조를 버리고, 한 프레임(16ms) 안에 완벽히 UI 렌더링을 끝마치는(Sync) 네이티브의 감각을 되찾기 위해서입니다.
• What to Learn: Fabric Renderer, C++ Shadow Tree, View Flattening, Concurrent React.
• How to Learn: 기존 비동기 구조에서는 사용자가 버튼을 눌러(JS) 색을 바꿀 때(Native) 그 틈에 다른 렌더링이 끼어들 수 있었으나, Fabric은 C++ 섀도우 트리를 통해 네이티브 스레드와 동일한 프레임 틱(Tick) 안에서 렌더링 레이아웃을 확정 짓는 동기적 락(Lock) 매커니즘을 분석합니다.
• Implement: 최신 New Architecture를 활성화한 뒤, LayoutAnimation 혹은 Reanimated 라이브러리를 사용할 때 애니메이션 제어권이 JS 스레드를 거치지 않고 UI 스레드 위에서 독립적으로 부드럽게 구동되는 60FPS 모션 설계.

7. Terminology

8. References

Primary References

• [CS2023: Software Engineering / HCI] — 크로스 플랫폼 프레임워크 아키텍처, 렌더링 파이프라인 지연(Latency) 요소 최적화.
• [SWEBOK v3: Software Design] — 다언어(Polyglot) 시스템 간의 메모리 공유 및 IPC(Inter-Process Communication) 인터페이스 설계.

Secondary References

• [React Native Architecture Overview] — 레거시 브릿지(Bridge)의 JSON 직렬화 오버헤드 측정 및 Shadow Tree 기반의 View Manager 분석.
• [JavaScript Engines for Mobile Devices] — JIT(Just-in-Time) 컴파일러와 모바일 배터리 수명의 상관관계 및 AOT 바이트코드 최적화.

Industry References

• [Meta Engineering: React Native's New Architecture] — Fabric 렌더링 엔진, JSI 인터페이스 명세 및 TurboModules의 지연 로딩(Lazy Loading).
• [Hermes Open Source Repository] — V8 및 JSC 대비 메모리 풋프린트(Memory Footprint) 감소 및 콜드 스타트(Cold Start) 개선 지표.

9. Final Checklist

Primary Checklist

• React Native의 레거시 브릿지(Bridge) 통신에서 발생하는 JSON 직렬화/역직렬화 오버헤드 병목을 JSI(JavaScript Interface) 방식과 대비하여 물리적으로 설명할 수 있는가?
• 수천 개의 아이템을 그리는 FlatList를 렌더링할 때, JS 스레드가 멈추며 하얀 화면(Blank Screen)이 발생하는 것을 막기 위해 windowSize나 뷰 재사용 최적화를 적용했는가?

Secondary Checklist

• New Architecture 환경에서 TurboModules를 사용하여, 네이티브 함수를 호출할 때 앱 초기화 시점이 아닌 실제 호출 시점에 메모리에 올리도록(Lazy Loading) 통제했는가?
• Hermes 엔진을 활성화(Opt-in)하여 앱 빌드 시 JS 코드를 미리 바이트코드(Bytecode)로 AOT 컴파일함으로써 TTI(Time To Interactive) 기동 시간을 단축했는가?

Industry Checklist

• 제스처 추적이나 무거운 애니메이션(react-native-reanimated) 실행 시, JS 스레드를 거치지 않고 C++ 및 네이티브 UI 스레드 위에서 즉각적으로 초당 60프레임(FPS)을 방어하도록 워크로드를 분리했는가?
• 안드로이드(Gradle)와 iOS(CocoaPods) 양쪽의 네이티브 환경에 커스텀 SDK를 연동할 때, 브릿징 파일과 타입스크립트 인터페이스 간의 타입 매핑(Data Mapping) 오류 없이 안전한 통로를 구축했는가?