[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -1,128 +1,171 @@
|
||||
---
|
||||
id: wiki-2026-0508-turbomodules
|
||||
title: TurboModules
|
||||
category: Frontend
|
||||
status: needs_review
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [React Native TurboModules, RN New Architecture Modules]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [auto-wikified, technical-documentation, frontend]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [react-native, jsi, native-modules, new-architecture]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: typescript
|
||||
framework: react-native
|
||||
---
|
||||
|
||||
# TurboModules
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
TurboModules는 React Native의 새로운 아키텍처(New Architecture)를 구성하는 차세대 네이티브 모듈(Native Modules) 시스템이다 [1, 2]. 자바스크립트가 네이티브 메서드를 직접적이고 동기적(synchronous)으로 호출할 수 있게 해주는 JSI(JavaScript Interface)를 기반으로 작동한다 [1, 2]. 기존 방식과 달리 필요한 시점에만 모듈을 불러오는 지연 로딩(Lazy Loading)을 지원하여, 앱의 초기 로딩 속도를 극적으로 개선하고 메모리 사용량을 줄여준다 [1, 2].
|
||||
## 매 한 줄
|
||||
> **"매 JSI-direct 의 type-safe native module"**. TurboModules 의 React Native 의 New Architecture 의 native-side API 의 JS 의 expose, 매 legacy bridge (JSON serialize) 의 X 의 JSI 의 direct C++ call, 매 codegen 의 type safety. 매 2026: RN 0.76+ 의 New Architecture 의 default — TurboModules + Fabric 의 baseline.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **지연 로딩(Lazy Loading)을 통한 성능 최적화**
|
||||
기존의 구형 아키텍처에서는 앱을 시작할 때 모든 네이티브 모듈을 일괄적으로 초기화해야 했기 때문에 실행 시간이 지연되는 문제가 발생했다 [1]. TurboModules는 이 구형의 일괄 브릿지 모듈(batch-bridged modules) 시스템을 대체하여, 모듈이 실제로 처음 사용되는 시점에만 로드(Load on demand)되도록 설계되었다 [1, 2]. 이를 통해 앱의 초기 로드 시간과 초기 메모리 사용량(footprint)을 극적으로 감소시킨다 [1, 2].
|
||||
## 매 핵심
|
||||
|
||||
* **동기적 네이티브 호출(Synchronous Native Calls) 지원**
|
||||
TurboModules는 기반 기술인 JSI를 활용하여 자바스크립트와 네이티브 코드 간의 직접적인 바인딩을 제공한다 [2, 3]. 이에 따라 기존의 비동기 통신 브릿지에서 발생하던 직렬화(Serialization) 오버헤드나 지연 시간(Latency) 없이, 자바스크립트에서 네이티브 메서드를 직접적이고 동기적으로 호출할 수 있다 [1-3]. 이는 성능에 민감한(performance-critical) 작업에서 브릿지가 병목으로 작용하던 문제를 완벽히 해결한다 [2].
|
||||
### 매 legacy NativeModule 의 차이
|
||||
- **Legacy**: async-only, JSON serialize, 매 batched message queue, runtime type check.
|
||||
- **TurboModule**: sync 또는 async, JSI direct call, lazy load, codegen-typed (Flow/TS spec).
|
||||
- **Perf**: 매 startup 의 lazy load 의 win, 매 call 의 serialize overhead 의 zero.
|
||||
|
||||
* **새로운 아키텍처(New Architecture)의 핵심 요소**
|
||||
TurboModules는 Fabric(새로운 동기식 렌더링 시스템) 및 JSI(JavaScript Interface)와 함께 결합하여 React Native의 혁신적인 3대 기반을 형성한다 [4-7]. 네이티브 기능을 사용할 때 Swift/Objective-C 또는 Kotlin/Java로 모듈을 작성하고 최소한의 오버헤드로 JavaScript에서 이를 호출함으로써, 사실상 네이티브 앱과의 성능 격차를 크게 좁히는 핵심 역할을 수행한다 [5, 8].
|
||||
### 매 codegen flow
|
||||
1. JS spec file (`Native<Name>.ts`) 의 author — 매 TurboModule interface.
|
||||
2. `react-native codegen` 의 ObjC++ / Java header 의 generate.
|
||||
3. Native impl 의 generated header 의 conform.
|
||||
4. JS 의 `TurboModuleRegistry.getEnforcing<Spec>('Name')` 의 access.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
소스에 관련 정보가 부족합니다. 다만, TurboModules가 성능적 이점을 제공함에도 불구하고, 커스텀 네이티브 기능을 구현하기 위해서는 여전히 Swift/Objective-C나 Kotlin/Java와 같은 네이티브 언어로 모듈을 직접 작성해야 하므로 개발 팀 내에 네이티브 모바일 경험(Native mobile experience)을 갖춘 인력이 요구된다는 제약 사항이 있습니다 [8].
|
||||
### 매 응용
|
||||
1. Custom native sensor / Bluetooth API.
|
||||
2. Heavy native compute (image filter, ML preprocess) 의 JSI sync 의 expose.
|
||||
3. Vendor SDK wrapping (payment, analytics).
|
||||
4. Library author 의 RN 0.76+ 의 publish.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
### Related Concepts
|
||||
## 💻 패턴
|
||||
|
||||
#### [아키텍처/기반 기술]
|
||||
- [[JSI (JavaScript Interface)]]
|
||||
- 연결 이유: TurboModules가 동기적 통신 및 지연 로딩을 수행할 수 있도록 만들어주는 기반 C++ 레이어이기 때문이다 [2, 3].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 직렬화 오버헤드가 어떻게 제거되며, JavaScript 스레드와 네이티브 스레드 간의 직접 참조가 기술적으로 어떻게 구현되는지 이해할 수 있다 [2, 3].
|
||||
### Spec file (TS)
|
||||
```typescript
|
||||
// specs/NativeMathLib.ts
|
||||
import type { TurboModule } from 'react-native';
|
||||
import { TurboModuleRegistry } from 'react-native';
|
||||
|
||||
- [[Fabric]]
|
||||
- 연결 이유: TurboModules와 함께 React Native의 새로운 아키텍처를 이루는 양대 산맥으로, Fabric은 UI 렌더링을 담당하고 TurboModules는 로직/기능 모듈을 담당한다 [4, 6].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: React Native의 전체적인 새로운 아키텍처(New Architecture)가 브릿지 병목 현상을 어떻게 종합적으로 제거하는지 파악할 수 있다 [6].
|
||||
export interface Spec extends TurboModule {
|
||||
add(a: number, b: number): number;
|
||||
multiplyAsync(a: number, b: number): Promise<number>;
|
||||
getDeviceInfo(): { model: string; os: string };
|
||||
}
|
||||
|
||||
- [[Codegen]]
|
||||
- 연결 이유: JavaScript의 동적 타입 세계와 네이티브 플랫폼의 정적 타입 세계를 안전하게 연결하기 위해 C++ 보일러플레이트 코드를 생성하는 역할을 한다 [9].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: TurboModules를 통한 통신 시 런타임 오류를 줄이고 컴파일 타임에 타입 안정성(Type safety)을 어떻게 보장하는지 이해할 수 있다 [9].
|
||||
|
||||
#### [구현/활용 도구]
|
||||
- [[React Native]]
|
||||
- 연결 이유: TurboModules 패러다임이 전면적으로 도입된 크로스 플랫폼 모바일 개발 프레임워크이다 [6, 10].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 모바일 개발 프레임워크들이 네이티브 성능에 근접하기 위해 아키텍처를 어떻게 혁신하고 있는지 거시적 관점에서 파악할 수 있다 [6, 7].
|
||||
|
||||
### Deeper Research Questions
|
||||
- 기존 비동기 브릿지(Bridge) 모델 대비 TurboModules 적용 시 초기 구동 시간(Startup time)과 메모리 절약 효과는 구체적으로 어느 정도의 성능 지표 차이를 보여주는가?
|
||||
- 커스텀 모듈 작성 시, JSI 및 Codegen을 활용하여 Swift/Kotlin 네이티브 코드와 JavaScript 간의 타입 안정성(Type Safety)은 컴파일 타임에 정확히 어떤 메커니즘으로 검증되는가?
|
||||
- 지연 로딩(Lazy Loading) 방식이 앱 실행 도중 최초로 특정 모듈을 호출할 때 일시적인 렌더링 지연(Jank)을 발생시킬 위험성은 없는가?
|
||||
- React Native 생태계의 수많은 서드파티 라이브러리들이 기존 모듈 시스템에서 TurboModules로 마이그레이션하는 데 있어 직면하는 기술적 진입 장벽은 무엇인가?
|
||||
- Flutter의 네이티브 통신 방식(Platform Channels 및 Dart FFI)과 React Native의 TurboModules는 동기적 네이티브 기능 접근 관점에서 성능적으로 어떤 차이를 지니는가?
|
||||
|
||||
### Practical Application Contexts
|
||||
- **Implementation:** 커스텀 카메라, 생체 인식 등 특수한 네이티브 API 접근이 필요할 때, Swift나 Kotlin으로 작성된 로직을 TurboModules를 통해 JavaScript 환경에서 동기적으로 호출하여 지연 없이 하드웨어 기능을 제어한다 [8, 11].
|
||||
- **System Design:** 초기 로딩 속도가 핵심 비즈니스 지표인 애플리케이션의 경우, 수십 개의 네이티브 기능이 한 번에 로드되던 기존 구조에서 벗어나 TurboModules 기반의 새로운 아키텍처를 채택함으로써 병목을 제거하는 설계적 결정을 내린다 [1, 2].
|
||||
- **Operation / Maintenance:** 앱 업데이트 시마다 모듈 초기화로 인한 시작 시간 지연을 모니터링하고, 자주 사용하지 않는 기능에 대해 TurboModules의 요구 기반 로딩(Load on demand)이 제대로 작동하여 메모리 풋프린트가 줄어들었는지 추적한다 [1, 2].
|
||||
- **Learning Path:** React Native 개발자는 레거시 비동기 브릿지의 한계를 이해한 후 -> JSI의 직접 통신 개념을 학습하고 -> TurboModules와 Fabric이 결합된 'New Architecture' 환경에서의 개발 패러다임을 익히는 방향으로 나아간다.
|
||||
- **My Project Relevance:** 소스에 관련 정보가 부족합니다.
|
||||
|
||||
### Adjacent Topics
|
||||
- [[Dart FFI (Foreign Function Interface)]]
|
||||
- 확장 방향: React Native가 JSI와 TurboModules로 네이티브와 동기적 소통을 구현한 것처럼, 경쟁 프레임워크인 Flutter가 고성능 C/C++ 네이티브 연산을 위해 직접적인 메모리 접근 및 동기적 호출을 수행하는 방식(Dart FFI)과 비교 연구할 수 있다 [12, 13].
|
||||
|
||||
---
|
||||
*Last updated: 2026-05-03*
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
export default TurboModuleRegistry.getEnforcing<Spec>('MathLib');
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Codegen config (package.json)
|
||||
```json
|
||||
{
|
||||
"name": "react-native-mathlib",
|
||||
"codegenConfig": {
|
||||
"name": "RNMathLibSpec",
|
||||
"type": "modules",
|
||||
"jsSrcsDir": "specs",
|
||||
"android": { "javaPackageName": "com.mathlib" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### iOS impl (ObjC++)
|
||||
```objcpp
|
||||
// MathLib.mm
|
||||
#import "MathLib.h"
|
||||
#import <RNMathLibSpec/RNMathLibSpec.h>
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
@implementation MathLib
|
||||
RCT_EXPORT_MODULE()
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
- (NSNumber *)add:(double)a b:(double)b {
|
||||
return @(a + b);
|
||||
}
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
|
||||
(const facebook::react::ObjCTurboModule::InitParams &)params {
|
||||
return std::make_shared<facebook::react::NativeMathLibSpecJSI>(params);
|
||||
}
|
||||
@end
|
||||
```
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
### Android impl (Kotlin)
|
||||
```kotlin
|
||||
class MathLibModule(reactContext: ReactApplicationContext) :
|
||||
NativeMathLibSpec(reactContext) {
|
||||
|
||||
override fun getName() = "MathLib"
|
||||
|
||||
override fun add(a: Double, b: Double): Double = a + b
|
||||
|
||||
override fun multiplyAsync(a: Double, b: Double, promise: Promise) {
|
||||
promise.resolve(a * b)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JS consumption
|
||||
```typescript
|
||||
import MathLib from './specs/NativeMathLib';
|
||||
|
||||
const sum = MathLib.add(2, 3); // 매 sync — 매 JSI direct
|
||||
const product = await MathLib.multiplyAsync(4, 5);
|
||||
```
|
||||
|
||||
### Enable New Architecture
|
||||
```bash
|
||||
# 매 RN 0.76+ default — 매 0.74 의 opt-in
|
||||
# iOS:
|
||||
RCT_NEW_ARCH_ENABLED=1 pod install
|
||||
# Android: gradle.properties
|
||||
newArchEnabled=true
|
||||
```
|
||||
|
||||
### Lazy access guard
|
||||
```typescript
|
||||
const MathLib = TurboModuleRegistry.get<Spec>('MathLib');
|
||||
if (MathLib == null) {
|
||||
throw new Error('MathLib not linked');
|
||||
}
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| 신규 RN library (2026) | TurboModule + codegen |
|
||||
| Legacy 0.68 below 의 maintain | NativeModule (deprecated path) |
|
||||
| Sync native call 의 require | TurboModule (legacy 의 X) |
|
||||
| UI component (not API) | Fabric component (sibling 의 New Arch) |
|
||||
| Cross-platform native | TurboModule + shared C++ via JSI |
|
||||
|
||||
**기본값**: 매 RN 0.76+ 의 모든 native module 의 TurboModule.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[React Native]] · [[React Native New Architecture]]
|
||||
- 변형: [[Fabric Renderer]] · [[JSI]] · [[Native Modules legacy]]
|
||||
- 응용: [[Native SDK Wrapping]] · [[Performance Critical Native Code]]
|
||||
- Adjacent: [[Codegen]] · [[Hermes]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 RN 0.76+ 의 native module 의 author 또는 migrate.
|
||||
**언제 X**: 매 expo-managed app — 매 prebuild 또는 config plugin 의 prefer.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Spec file 의 codegen 의 skip 의 manual header**: 매 type drift — 매 always codegen.
|
||||
- **Sync TurboModule 의 long-running task**: 매 JS thread block — 매 async 의 use.
|
||||
- **Bridge module 의 New Arch 의 mix**: 매 deprecation warning + perf loss.
|
||||
- **`getEnforcing` 없 의 unchecked access**: 매 null reference 의 silent fail.
|
||||
- **C++ TurboModule 의 type 의 manual marshal**: 매 codegen 의 auto-handle 의 ignore.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (RN 0.76+ docs, reactnative.dev/docs/the-new-architecture).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — codegen, JSI direct, iOS/Android impl |
|
||||
|
||||
Reference in New Issue
Block a user