2nd/10_Wiki/Topics/Coding/React_Native_Bridge_Performance.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
react-native-bridge-performance	React Native — Bridge / JSI 성능	Coding	draft	B	conceptual	2026-05-09	2026-05-09	react-native performance bridge jsi vibe-coding	language applicable_to TS / Swift / Kotlin React Native 0.74+		Fabric TurboModules Hermes new architecture

React Native — Bridge / JSI 성능

Old architecture: JS ↔ Native 가 async JSON bridge. 큰 데이터 / 자주 호출 = 병목. New Architecture (JSI / TurboModules / Fabric) 는 동기 ref 호출 — 속도 차이 큼. 0.74+ 부터 default 권장.

📖 핵심 개념

• JSI (JavaScript Interface): JS 가 native 메서드를 직접 invoke. 동기 가능.
• TurboModules: 지연 로딩 + 타입 정의 (codegen) + JSI 기반 호출.
• Fabric: 새 renderer. UI 트리를 host platform 직접.
• Hermes: RN 의 JS engine. JSC 보다 startup / 메모리 우수.

💻 코드 패턴

큰 list — FlatList → FlashList

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  estimatedItemSize={80}
  renderItem={({ item }) => <Row item={item} />}
  keyExtractor={item => item.id}
/>
// FlatList 보다 메모리 / 스크롤 부드러움

무거운 작업 — 별도 thread

import { runOnJS, runOnUI } from 'react-native-reanimated';

// Reanimated worklet — UI thread 에서 실행
const tap = Gesture.Tap().onEnd(() => {
  runOnJS(setActive)(true);
});

Native 모듈 호출 batching

// ❌ 1000번 개별 호출
for (let i = 0; i < 1000; i++) NativeMod.compute(i);

// ✅ 한 번에
NativeMod.computeBatch(Array.from({ length: 1000 }, (_, i) => i));

이미지 — 캐싱 + 리사이즈

import FastImage from 'react-native-fast-image';

<FastImage
  source={{ uri, priority: FastImage.priority.normal, cache: FastImage.cacheControl.immutable }}
  resizeMode={FastImage.resizeMode.cover}
/>

Hermes 활성화 (0.70+ 기본)

// android/app/build.gradle
project.ext.react = [ enableHermes: true ]
// iOS Podfile use_react_native!(:hermes_enabled => true)

🤔 의사결정 기준

영역	권장
Long list	FlashList > FlatList > ScrollView
Animation	Reanimated 3 (UI thread)
Gesture	react-native-gesture-handler
Image	FastImage 또는 Expo Image
Maps	react-native-maps + nativeRef API
Network	fetch + 캐시 (RNTQ / SWR / RTK Query)
백그라운드	RN 자체 약함 — 네이티브 코드 또는 Expo TaskManager

❌ 안티패턴

• map / setState 매 FPS 호출: bridge spam → 60fps 깨짐.
• 큰 base64 image 를 props 로: bridge 폭주. URI / 캐시 사용.
• synchronous 가정 (old arch): bridge 는 async. 응답 기다리지 마라.
• InteractionManager 무시 — animation 도중 setState: 끊김. afterInteractions 안에서.
• production 에서 console.log 남김: bridge 호출 빈도 ↑. dev only.
• Reanimated worklet 안에서 일반 JS 변수 mutation: shared value 사용.
• 모든 모듈을 default index.js 에서 import: startup 느려짐. lazy import.

🤖 LLM 활용 힌트

• "New Architecture (Fabric + TurboModules + Hermes) 가정. List = FlashList, animation = Reanimated 3" 명시.
• bridge spam 패턴 (per-frame setState) 작성하면 막기.

🔗 관련 문서

• React_Rendering_Optimization
• Backpressure_Patterns