Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.1 KiB

Raw Blame History

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

title

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.

매 응용

Meta Threads — Fabric으로 60fps scroll.
Shopify Mobile — TurboModules로 startup 30% 단축.
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)

5.1 KiB Raw Blame History