React Native의 아키텍처는 어떻게 동작하나요 (bridge vs 새 아키텍처)?

Question

Accepted Answer

React Native는 통신해야 하는 **JavaScript**와 **네이티브** 코드를 실행합니다. 원래 아키텍처는 비동기 **bridge**를 사용했고, **새 아키텍처**(JSI, TurboModule, Fabric)는 더 빠른 동기 통신을 가능하게 합니다. 이를 이해하면 React Native의 동작과 성능이 명확해집니다.

## 원래 아키텍처: bridge

```text
React Native가 실행하는 것:
  → JS 스레드 (React/JS 코드)와 네이티브 측 (UI, native module)
  → 이들은 BRIDGE로 통신함: 메시지가 (JSON으로) 직렬화되어, 비동기로 전달되고,
    반대편에서 역직렬화됨
한계:
  ✗ 비동기 전용 (네이티브를 동기로 호출 불가)
  ✗ 직렬화 오버헤드; bridge는 무거운 트래픽 시 병목이 될 수 있음
  ✗ 예: 빠른 스크롤/animation이 bridge로 데이터를 전달 → jank
```

## 새 아키텍처 (JSI, TurboModule, Fabric)

```text
새 아키텍처가 bridge를 대체함:
  JSI (JavaScript Interface) → JS가 네이티브 코드를 직접 그리고 동기로 호출
    (직렬화 bridge 없음) → 훨씬 빠른 JS↔네이티브 상호운용
  TURBOMODULE → native module이 JSI를 통해 지연 로드 (더 빠르고 온디맨드)
  FABRIC → 새 렌더링 시스템 → 더 낫고 효율적인 UI 렌더링; 동기 레이아웃
  CODEGEN → 타입 안전한 JS↔네이티브 인터페이스
→ 결과: 더 나은 성능, 적은 오버헤드, 동기 호출, 매끄러운 UI.
```

## 왜 중요한가 (실용적으로)

```text
→ React Native의 성능 특성 설명 (bridge 트래픽이 왜 비용이 컸는지)
→ 새 아키텍처 (최근 RN의 기본)는 성능과 상호운용 개선
→ 최적화 지침 (구 아키텍처에서 bridge 횡단 최소화; 네이티브 스레드
  animation)과 RN 실행 방식 이해
```

## 왜 중요한가

React Native의 아키텍처를 이해하는 것은 가치 있는 senior 수준 지식인데, **React Native의 동작과 성능 특성을 설명**하여 앱을 추론하고 최적화하는 능력을 심화하기 때문입니다.

근본 구조 — React Native가 통신해야 하는 **JS 스레드**(코드)와 **네이티브 측**(UI, native module)을 실행 — 이 React Native 동작 방식 이해의 핵심입니다.

**원래 bridge 아키텍처**(JS와 네이티브가 메시지를 JSON으로 직렬화하여 전달하는 비동기 bridge로 통신)를 이해하면 React Native의 역사적 성능 특성과 한계가 설명됩니다. 통신이 비동기 전용이고, 직렬화 오버헤드가 있으며, bridge가 **무거운 트래픽 시 병목**(빠른 스크롤이나 데이터를 전달하는 animation에서 jank 유발)이 될 수 있다는 것 — 이것이 **bridge 횡단을 최소화하고 animation을 네이티브 스레드에서 실행하는 것이 중요한 최적화인 이유**로, 아키텍처를 실용적 성능 조언과 연결합니다.

**새 아키텍처**(직렬화 bridge 없이 직접적이고 동기적인 JS↔네이티브 호출을 가능하게 하는 **JSI**; 지연 native module 로딩을 위한 **TurboModule**; 더 나은 렌더링을 위한 **Fabric**; 타입 안전 인터페이스를 위한 Codegen)를 이해하는 것은 기본이 되어감에 따라 점점 더 중요합니다 — 성능을 개선하고, 오버헤드를 줄이며, 동기 호출을 가능하게 하고, 매끄러운 UI를 만들어 React Native의 중대한 진화를 나타냅니다.

이 아키텍처를 이해하면 React Native의 **성능을 설명**(bridge가 왜 중요했는지)하고, **최적화 지침을 제공**(아키텍처에서 따라오는 관행)하며, React Native가 어떻게 실행되는지 명확히 합니다 — React Native를 블랙박스에서 이해 가능한 시스템으로 바꿉니다.

아키텍처(bridge와 새 JSI 기반 아키텍처)를 이해하면 React Native의 성능 특성이 설명되고, 최적화 지침이 제공되며, 중요한 진화에 대한 인식을 반영하고, 이 깊이가 React Native를 사용하는 것에서 이해하는 것으로 끌어올리므로, React Native의 아키텍처를 이해하는 것은 가치 있는 senior 수준 지식입니다 — 그 동작과 성능을 설명하고, 최적화 지침을 제공하며, senior React Native 역할에 기대되는 깊이와 플랫폼 진화 인식을 반영합니다.