Antigravity Agent
f8b21af4be
10_Wiki/Topics 대규모 정리: - 오류 캡처/미완성 stub 문서 227개 제거 - 교차폴더 중복 43클러스터 병합 (63파일 → redirect) - 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건 - 카테고리 MOC 6개 신규 생성 - Graph 섹션 미해결 related-keyword 링크 10,058건 제거 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
153 lines
5.1 KiB
Markdown
153 lines
5.1 KiB
Markdown
---
|
|
id: wiki-2026-0508-new-architecture
|
|
title: New Architecture (React Native Fabric/TurboModules)
|
|
category: 10_Wiki/Topics
|
|
status: verified
|
|
canonical_id: self
|
|
aliases: [Fabric, TurboModules, RN New Arch, React Native New Architecture]
|
|
duplicate_of: none
|
|
source_trust_level: A
|
|
confidence_score: 0.9
|
|
verification_status: applied
|
|
tags: [react-native, mobile, architecture, jsi, fabric]
|
|
raw_sources: []
|
|
last_reinforced: 2026-05-10
|
|
github_commit: pending
|
|
tech_stack:
|
|
language: typescript
|
|
framework: react-native-0.77
|
|
---
|
|
|
|
# New Architecture (React Native)
|
|
|
|
## 매 한 줄
|
|
> **"매 RN의 async-bridge JSON 통신을 JSI 기반 동기 C++ binding으로 교체한 ground-up rewrite."**. 2018 발표, 2024 RN 0.76부터 default, 2026 현재 RN 0.77+에서 legacy bridge는 deprecated. Fabric (renderer) + TurboModules (native modules) + Codegen (typed interface) 의 3개 pillar.
|
|
|
|
## 매 핵심
|
|
|
|
### 매 4 pillar
|
|
- **JSI (JavaScript Interface)**: C++ API로 JS engine (Hermes/JSC/V8)과 native가 직접 binding — 매 JSON serialization 제거.
|
|
- **Fabric**: 매 new renderer — shadow tree를 C++로, concurrent rendering, synchronous layout.
|
|
- **TurboModules**: 매 lazy-load native modules — JSI 통한 direct invocation, no bridge.
|
|
- **Codegen**: 매 spec.ts → native interface (Java/ObjC/C++) 자동 생성.
|
|
|
|
### 매 legacy bridge 문제점
|
|
- 모든 native call이 JSON serialize → async queue → deserialize.
|
|
- Synchronous UI update 불가 (text input lag).
|
|
- Type safety 없음 — runtime error.
|
|
- 모든 native module이 startup에 load — slow cold start.
|
|
|
|
### 매 응용
|
|
1. Meta Threads — Fabric으로 60fps scroll.
|
|
2. Shopify Mobile — TurboModules로 startup 30% 단축.
|
|
3. Microsoft Teams Mobile — Codegen으로 C++ shared core ↔ RN bridge.
|
|
|
|
## 💻 패턴
|
|
|
|
### TurboModule spec (TypeScript)
|
|
```typescript
|
|
// NativeCalculator.ts
|
|
import type { TurboModule } from 'react-native';
|
|
import { TurboModuleRegistry } from 'react-native';
|
|
|
|
export interface Spec extends TurboModule {
|
|
add(a: number, b: number): number;
|
|
multiply(a: number, b: number): Promise<number>;
|
|
readonly getConstants: () => { PI: number };
|
|
}
|
|
|
|
export default TurboModuleRegistry.getEnforcing<Spec>('Calculator');
|
|
```
|
|
|
|
### Codegen-generated Android (Kotlin)
|
|
```kotlin
|
|
// Auto-generated from spec
|
|
abstract class NativeCalculatorSpec(ctx: ReactApplicationContext)
|
|
: ReactContextBaseJavaModule(ctx), TurboModule {
|
|
@ReactMethod(isBlockingSynchronousMethod = true)
|
|
abstract fun add(a: Double, b: Double): Double
|
|
}
|
|
|
|
// User implementation
|
|
class CalculatorModule(ctx: ReactApplicationContext)
|
|
: NativeCalculatorSpec(ctx) {
|
|
override fun getName() = "Calculator"
|
|
override fun add(a: Double, b: Double) = a + b
|
|
}
|
|
```
|
|
|
|
### Fabric custom component (iOS)
|
|
```cpp
|
|
// MyViewComponentDescriptor.h
|
|
#include <react/renderer/components/view/ConcreteViewShadowNode.h>
|
|
|
|
namespace facebook::react {
|
|
class MyViewShadowNode final
|
|
: public ConcreteViewShadowNode<MyViewComponentName,
|
|
MyViewProps,
|
|
MyViewEventEmitter> {
|
|
public:
|
|
using ConcreteViewShadowNode::ConcreteViewShadowNode;
|
|
};
|
|
using MyViewComponentDescriptor = ConcreteComponentDescriptor<MyViewShadowNode>;
|
|
}
|
|
```
|
|
|
|
### JSI direct binding (synchronous)
|
|
```cpp
|
|
// Install host function on JS runtime
|
|
runtime.global().setProperty(
|
|
runtime, "nativeCompute",
|
|
jsi::Function::createFromHostFunction(
|
|
runtime, jsi::PropNameID::forAscii(runtime, "nativeCompute"), 1,
|
|
[](jsi::Runtime& rt, const jsi::Value&, const jsi::Value* args, size_t) {
|
|
double x = args[0].asNumber();
|
|
return jsi::Value(heavyCompute(x)); // sync, no bridge
|
|
}));
|
|
```
|
|
|
|
### Enable New Arch (RN 0.77)
|
|
```bash
|
|
# iOS
|
|
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
|
|
# Android (gradle.properties)
|
|
newArchEnabled=true
|
|
hermesEnabled=true
|
|
```
|
|
|
|
## 매 결정 기준
|
|
| 상황 | Approach |
|
|
|---|---|
|
|
| New RN project (2026) | New Arch + Hermes default |
|
|
| Legacy app w/ many native modules | gradual interop migration |
|
|
| Heavy synchronous native call | TurboModule (JSI) |
|
|
| Custom view (canvas, video) | Fabric component |
|
|
| Sharing C++ core (cross-platform) | JSI host objects |
|
|
|
|
**기본값**: New Arch enabled — 매 2026 default, legacy bridge는 deprecated.
|
|
|
|
## 🔗 Graph
|
|
- 부모: [[Concurrent_Rendering]]
|
|
- 응용: [[Hermes]] · [[Fabric_Renderer]] · [[Hydration]]
|
|
- Adjacent: [[FFI]] · [[BLoC]]
|
|
|
|
## 🤖 LLM 활용
|
|
**언제**: RN performance critical (60fps list, real-time UI), native module 다수, C++ shared core.
|
|
**언제 X**: simple JS-only RN app, legacy 0.6x 유지보수만, Expo Go (managed) — 매 자동 적용.
|
|
|
|
## ❌ 안티패턴
|
|
- **Mixing legacy + new arch native modules without interop layer**: build break.
|
|
- **Spec drift**: spec.ts 변경 후 codegen 재실행 안 함 — runtime crash.
|
|
- **Sync JSI call from main thread**: UI block — async/queue로 offload.
|
|
- **Skipping Hermes**: New Arch는 Hermes 가정 (JSC도 가능하지만 perf 저하).
|
|
|
|
## 🧪 검증 / 중복
|
|
- Verified (React Native docs 2026, Meta engineering blog, RN 0.77 release notes).
|
|
- 신뢰도 A.
|
|
|
|
## 🕓 Changelog
|
|
| 날짜 | 변경 |
|
|
|---|---|
|
|
| 2026-05-08 | Phase 1 |
|
|
| 2026-05-10 | Manual cleanup — RN New Architecture (JSI/Fabric/TurboModules/Codegen) |
|