Bridge가 만든 7년의 부담
React Native는 2015년 등장 이후 JS와 네이티브 사이를 JSON 직렬화로 오가는 Bridge를 핵심 메커니즘으로 썼습니다. 단순함이 강점이었지만 두 가지 비용이 있었습니다.
첫째, 모든 호출이 비동기 큐를 거칩니다. 네이티브 함수를 한 번 부르려고 직렬화·큐잉·역직렬화의 3단 점프를 합니다. 둘째, 앱 시작 시 모든 네이티브 모듈을 미리 로드합니다. 사용하지 않는 모듈도 메모리에 올라옵니다.
새 아키텍처(2024년 안정화)는 이 둘을 모두 정조준합니다.
JSI — Bridge 없이 직접 부르기
JSI(JavaScript Interface)는 JavaScript 엔진(Hermes)에 C++ 객체를 직접 주입하는 메커니즘입니다. JS에서 함수를 호출하면 직렬화 없이 C++ 함수가 즉시 실행됩니다. 동기 호출이 가능해졌고, 직렬화 비용이 사라졌습니다. 네이티브에서 만든 객체를 JS가 그대로 들고 다닐 수 있어 비디오 프레임·오디오 버퍼 같은 무거운 데이터를 복사 없이 전달할 수 있습니다.
// JSI 기반 모듈은 동기 호출 가능
const result = TurboModuleRegistry.get<MyModule>("MyModule")?.calculate(42);
console.log(result); // 직렬화 없이 즉시 받음
TurboModules — 지연 로딩
TurboModules는 JSI 위에 얹은 모듈 시스템입니다. 핵심은 호출 시점에 처음 로드된다는 것. 사용하지 않는 카메라·블루투스·결제 모듈은 메모리에 올라오지 않습니다. 100개 이상의 네이티브 모듈을 의존하는 큰 앱에서 시작 시간이 30~50% 줄어든다는 보고가 일반적입니다.
각 모듈은 Codegen으로 TypeScript 타입과 네이티브 인터페이스가 동시에 생성됩니다. JS와 Swift/Kotlin이 동일한 스펙 파일에서 출발하니 시그니처 불일치 버그가 사라집니다.
Fabric — 동기 레이아웃과 동시성
Fabric은 새 렌더러입니다. 기존 UI Manager가 비동기 큐 기반이었던 것과 달리, 레이아웃 계산이 동기로 가능합니다. 이것이 React 18의 동시성 모드(Suspense·Transitions)와 자연스럽게 맞물립니다. 사용자 입력 처리와 무거운 렌더링을 분리해 60fps를 안정적으로 유지하기가 쉬워집니다.
가시적인 효과 두 가지:
- 터치 응답 지연 감소 — 화면 측정과 이벤트 처리가 같은 사이클에 끝남
- 리스트 스크롤 점프 감소 — 새 항목이 화면 들어오는 순간 측정 완료
이주 체크리스트
기존 RN 0.6x 앱을 새 아키텍처로 옮길 때 체크할 것들.
☐ React Native 0.74+ (안정 베이스)
☐ Hermes 엔진 활성화 — JSI는 Hermes/JSC 모두 가능하나 Hermes가 표준
☐ android/gradle.properties: newArchEnabled=true
☐ ios/Podfile: ENV[''RCT_NEW_ARCH_ENABLED''] = ''1''
☐ 네이티브 모듈을 TurboModule 스펙으로 마이그레이션 (Codegen)
☐ 커스텀 뷰를 Fabric Component로 마이그레이션
☐ 의존 패키지가 새 아키텍처를 지원하는지 reactnative.directory에서 확인
☐ react-native-screens·reanimated 등 핵심 라이브러리 최신 버전
가장 시간이 많이 걸리는 부분이 써드파티 라이브러리 호환성입니다. 2026년 기준 핵심 라이브러리는 대부분 지원하지만, 회사 내부 패치된 모듈이 있다면 Codegen 스펙을 새로 써야 합니다.
Bridgeless Mode — 마지막 한 걸음
새 아키텍처의 완성형은 "Bridge가 흔적도 없는" Bridgeless 모드입니다. 0.73부터 옵트인이었고, 0.74부터 신규 앱은 기본 활성화입니다. 기존 앱은 점진 전환 가능하지만, 운영 중인 큰 코드베이스라면 한 번에 전환하지 말고 모듈 단위로 마이그레이션 후 일제히 켜는 게 안전합니다.
정말 빨라지는가 — 측정값
수치는 앱마다 다르지만 RN 팀과 Microsoft·Shopify의 공개 케이스에서 공통적으로 보이는 패턴입니다.
- 시작 시간(TTI): 20~50% 단축
- 메모리: 15~30% 감소
- 네이티브 호출 지연: 수 ms → sub-ms
- 첫 화면 렌더 jank: 상당 부분 해소
벤치마크가 아니라 실제 사용자 체감 차이가 큽니다. "앱이 빨라졌네"라는 리뷰가 늘어납니다.
다음 단계
새 아키텍처가 손에 익으면 자연스럽게 Reanimated 3(JSI 기반 워커릿)와 Skia(2D 그래픽 직접 그리기)가 시야에 들어옵니다. 60fps 애니메이션·복잡한 그래픽이 React 컴포넌트 트리 안에서 자연스럽게 굴러가는 시대입니다. 아직 새 아키텍처로 옮기지 않았다면 다음 분기 리팩토링 항목으로 올려둘 만한 가치가 충분합니다.
