2nd/10_Wiki/Topics/Architecture/New_Architecture.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-new-architecture	New Architecture (React Native Fabric/TurboModules)	10_Wiki/Topics	verified	self	Fabric TurboModules RN New Arch React Native New Architecture	none	A	0.9	applied	react-native mobile architecture jsi fabric		2026-05-10	pending	language framework typescript 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)

// 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)

// 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)

// 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)

// 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)

# 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)