Turbo Modules는 Bridge 대신 JSI(JavaScript Interface)를 사용하여 네이티브 함수를 동기적으로 호출합니다.

기존 Native Modules의 한계(비동기 JSON 직렬화, Bridge 병목)를 해결하기 위해 등장한 새 아키텍처의 핵심 요소입니다.


기존 Bridge vs JSI

PLAINTEXT
기존 아키텍처:
JavaScript → JSON 직렬화 → Bridge → JSON 역직렬화 → Native
(비동기, 오버헤드 발생)

새 아키텍처 (Turbo Modules):
JavaScript → JSI → Native (직접 참조)
(동기/비동기 선택 가능, 오버헤드 최소)

핵심 차이

항목Native ModulesTurbo Modules
통신 방식Bridge (JSON 직렬화)JSI (직접 참조)
호출 방식항상 비동기동기/비동기 선택
초기화앱 시작 시 전부 로드필요할 때 지연 로드
타입 안전성없음Codegen으로 타입 생성
성능중간높음

면접에서 "React Native의 새 아키텍처를 설명해주세요"라는 질문에는 JSI, Turbo Modules, Fabric을 키워드로 답하면 됩니다.


Turbo Module 작성 (TypeScript Spec)

TSX
// specs/NativeBatteryModule.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  // 동기 메서드
  getBatteryLevelSync(): number;
  // 비동기 메서드
  getBatteryLevel(): Promise<number>;
  // 이벤트 관련
  addListener(eventName: string): void;
  removeListeners(count: number): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('BatteryModule');

Codegen

TypeScript Spec에서 네이티브 인터페이스 코드를 자동 생성합니다.

JSON
// package.json에 codegen 설정
{
  "codegenConfig": {
    "name": "AppSpecs",
    "type": "modules",
    "jsSrcsDir": "specs",
    "android": {
      "javaPackageName": "com.myapp"
    }
  }
}

지연 로딩의 장점

PLAINTEXT
기존 (Native Modules):
앱 시작 시 → 모든 모듈 초기화 → 시작 시간 증가

Turbo Modules:
앱 시작 시 → 최소 모듈만 로드
BluetoothModule 필요 → 그때 초기화
CameraModule 필요 → 그때 초기화
→ 시작 시간 단축

마이그레이션

기존 Native Module을 Turbo Module로 전환하는 단계:

  1. TypeScript Spec 작성 — 모듈 인터페이스 정의
  2. Codegen 실행 — 네이티브 인터페이스 코드 생성
  3. ** 네이티브 코드 수정** — 생성된 인터페이스 구현
  4. JavaScript 호출 코드 수정NativeModulesTurboModuleRegistry
TSX
// 기존
import { NativeModules } from 'react-native';
const { BatteryModule } = NativeModules;

// 새 아키텍처
import NativeBatteryModule from './specs/NativeBatteryModule';
const level = NativeBatteryModule.getBatteryLevelSync(); // 동기 호출 가능!

정리

  • Turbo Modules는 JSI를 통해 Bridge 없이 네이티브 코드를 직접 호출 합니다
  • 동기 호출 이 가능해져 성능이 크게 개선됩니다
  • 지연 로딩 으로 앱 시작 시간이 단축됩니다
  • TypeScript Spec과 Codegen 으로 타입 안전한 네이티브 인터페이스를 생성합니다
  • 2024년 이후 새 프로젝트에서는 새 아키텍처가 기본 활성화됩니다
댓글 로딩 중...