React Native Bridge의 종말: 2026년 JSON에서 JSI로의 전환

네이티브 브릿지(Native Bridge)란 무엇인가?

React Native Bridge는 JavaScript 스레드와 네이티브 스레드(iOS/Android)가 서로 통신할 수 있게 해주는 통신 계층입니다.
JavaScript와 네이티브 언어(Swift, Objective-C, Java 또는 Kotlin 등)는 직접 통신할 수 없기 때문에 중개자가 필요합니다. Bridge는 메시지 브로커(Message Broker) 역할을 수행합니다.

작동 방식:

직렬화 (Serialization): JavaScript는 동작이나 데이터를 JSON 문자열로 변환합니다.
비동기 전송 (Asynchronous Transport): JSON 페이로드(Payload)가 브릿지를 통해 비동기적으로 전송됩니다.
역직렬화 (Deserialization): 네이티브 측에서 JSON을 디코딩하고 요청된 플랫폼 동작(예: 뷰 렌더링 또는 하드웨어 액세스)을 실행합니다.

네이티브 브릿지가 필요한 경우

기본적으로 React Native는 일상적인 컴포넌트(예: <View> 또는 <Text>)와 API를 자동으로 처리합니다. 하지만 다음과 같은 시나리오에서는 네이티브 모듈(Native Modules) 또는 네이티브 UI 컴포넌트(Native UI Components)를 통해 수동으로 커스텀 네이티브 브릿지를 생성해야 합니다:

지원되지 않는 하드웨어 액세스: 고급 카메라 센서, 생체 인식(FaceID/지문), 또는 커스텀 Bluetooth 주변 기기와 같이 내장된 React Native API가 없는 장치 기능이 필요한 경우.
기존 네이티브 코드 재사용: 기존 네이티브 앱을 React Native로 마이그레이션하면서 기존의 기능적인 Kotlin, Swift 또는 Objective-C 비즈니스 로직을 살리고 싶은 경우.
고성능의 무거운 작업 처리: 이미지 처리, 오디오 조작 또는 복잡한 데이터베이스 작업과 같이, 그렇지 않으면 단일 스레드인 JavaScript 환경을 멈추게 할 수 있는 집중적인 작업을 실행해야 하는 경우.
커스텀 UI 렌더링: React Native의 표준 크로스 플랫폼 컴포넌트만으로는 완전히 구축할 수 없는 플랫폼 특화 UI 레이아웃을 통합해야 하는 경우.

중요한 아키텍처 참고 사항

React Native는 이 기존의 비동기 브리지 (Bridge) 방식에서 크게 벗어나 전환되었습니다.

최신 프레임워크 버전들은 새로운 아키텍처 (New Architecture)를 표준화하여, JSON 브리지를 자바스크립트 인터페이스 (JSI, JavaScript Interface)로 교체합니다. JSI를 사용하면 자바스크립트 (JavaScript)가 네이티브 메서드에 대한 직접적인 C++ 메모리 참조를 보유할 수 있습니다. 이러한 변화는 동기적 실행 (synchronous execution)을 가능하게 하고 JSON 직렬화 (serialization) 지연을 완전히 제거하여, 과거의 성능 병목 현상을 해결합니다. 이제는 과거와 같은 "브리지"를 만드는 대신, 일반적으로 터보모듈 (TurboModules)과 패브릭 컴포넌트 (Fabric Components)를 구축하게 됩니다.

특정 기기 기능을 위한 커스텀 네이티브 모듈을 구축할 계획이신가요, 아니면 현재 앱의 성능 병목 현상을 해결하고 계신가요? 댓글로 알려주세요.

기존의 JSON 네이티브 브리지에서 JSI (JavaScript Interface)로의 전환은 수년에 걸쳐 점진적인 출시 과정을 통해 이루어졌습니다.

전환 타임라인

1. React Native는 언제 JSI로 이동했나요?

JSI로의 전환은 2022년 3월 React Native 0.68 버전이 출시되면서 실험적으로 시작되었습니다. 이 릴리스는 기존의 비동기 브리지 대신 JSI에 의존하는 새로운 아키텍처 (New Architecture)의 첫 번째 기둥들(터보모듈 (TurboModules) 및 패브릭 렌더러 (Fabric renderer))을 도입했습니다.

2. 네이티브 브리지는 어느 버전까지 지원되었나요?

기존 브리지 프레임워크는 React Native 0.75 버전까지 주요 기본 엔진으로 지원되었습니다. 지원 종료 및 완전 제거 과정은 다음과 같이 진행되었습니다:

React Native 0.76 (2024년 10월): 새로운 아키텍처 (New Architecture, JSI 기반)가 모든 신규 프로젝트의 기본값으로 설정되었습니다. 상호 운용성 레이어 (interoperability layer)가 여전히 존재하여, 기존의 브리지 (bridge) 기반 모듈들이 임시 호환성 심 (compatibility shim)을 통해 작동할 수 있었습니다.
React Native 0.82 (2025년 10월): 기존 아키텍처 (legacy architecture)가 영구적으로 비활성화되었습니다. 개발자들은 플래그를 통해 새로운 아키텍처를 거부할 수 있는 권한을 상실했습니다 (newArchEnabled=false 옵션 제거).
React Native 0.85 (2026년 4월): 기존 브리지 (bridge) 코드가 코드베이스에서 완전히 제거되었습니다. 더 이상 폴백 메커니즘 (fallback mechanism)이나 브리지 상호 운용성 레이어 (bridge interoperability layer)가 존재하지 않습니다.

아키텍처 이정표 요약 (Architectural Milestone Summary)

React Native 버전	출시일	브리지(Bridge) 및 JSI 상태
0.68	2022년 3월	JSI 도입: 새로운 아키텍처를 위한 실험적 선택 사항 (opt-in) 제공.
...

React Native 0.85부터는 더 이상 오래된 비동기식 JSON 네이티브 브리지 (asynchronous JSON native bridge)를 사용할 수 없습니다. 기존 브리지 코드는 프레임워크의 핵심 저장소(core repository)에서 완전히 제거되었습니다.

하지만 이것이 커스텀 네이티브 코드 (custom native code)를 더 이상 작성할 수 없다는 의미는 아닙니다. 단지 그 메커니즘이 완전히 바뀌었음을 의미합니다.

사라진 것 vs. 대체하는 것

❌ 더 이상 할 수 없는 것: RCTBridgeModule (iOS) 또는 ReactContextBaseJavaModule (Android)를 사용하여 직렬화된 JSON 데이터를 비동기적으로 주고받을 수 없습니다. 이러한 오래된 모듈들이 최신 버전에서 실행될 수 있도록 했던 "상호 운용성 레이어 (interop layer)"는 완전히 삭제되었습니다.
✅ 대신 해야 하는 것: 터보 네이티브 모듈 (Turbo Native Modules)과 패브릭 컴포넌트 (Fabric Components)를 작성해야 합니다. 이들은 동일한 목표(JavaScript가 네이티브 코드를 트리거하도록 하는 것)를 달성하지만, JSI를 사용하여 C++ 함수를 직접 호출함으로써 JSON 직렬화(serialization) 없이 즉각적이고 동기적인 실행을 제공합니다.

실질적인 영향 (The Practical Impact)

앱 개발자 대상: 만약 귀하의 프로젝트가 React Native 0.85를 목표로 한다면, 이전에 기존 브리지 (bridge) 형식을 사용하여 작성했던 모든 내부 네이티브 코드는 TurboModules로 다시 작성해야 합니다.
서드파티 라이브러리 대상: 새로운 아키텍처 (New Architecture)를 지원하도록 코드를 업데이트하지 않은 모든 커뮤니티 npm 패키지는 0.85 버전에서 즉시 작동이 중단되거나 빌드 시 충돌(crash)을 일으킬 것입니다.

🚀 2026년에도 React Native JSON 브리지 학습이 여전히 중요한 이유

레거시 JSON 브리지를 학습하는 것은 크로스 플랫폼 프레임워크가 프로세스 간 통신 (IPC, Inter-Process Communication)을 처리하는 근본적이고 기저에 깔린 메커니즘을 가르쳐주기 때문에 믿을 수 없을 정도로 가치가 있습니다.
현대적인 프레임워크가 JavaScript 인터페이스 (JSI, JavaScript Interface)와 같은 제로 레이턴시 (zero-latency) 직접 메모리 솔루션으로 전환하더라도, 브리지를 마스터하면 데이터 직렬화 (serialization), 비동기 스레드 관리 (asynchronous thread management), 그리고 사용자 인터페이스를 네이티브 운영 체제로부터 분리할 때 발생하는 아키텍처적 트레이드오프 (architectural trade-offs)에 대한 깊은 개념적 이해를 얻을 수 있습니다.
나아가, 현재 프로덕션 환경에서 실행 중인 기업 수준의 React Native 애플리케이션 대다수는 지난 10년 동안 구축되었으며 여전히 레거시 브리지 시스템에 크게 의존하고 있습니다. 브리지가 어떻게 작동하는지 안다면, 귀하는 즉시 거대한 실제 코드베이스를 유지 관리하고, 문제를 해결하며, 새로운 아키텍처로 전략적으로 마이그레이션 (migration)할 수 있는 매우 경쟁력 있는 엔지니어가 될 수 있습니다.

🛠️ 단계별 튜토리얼: 첫 번째 JSON 네이티브 브리지 구축하기

이 튜토리얼에서는 네이티브 측 (Android 및 iOS)에서 간단한 산술 덧셈을 수행하고 그 결과를 JavaScript로 다시 반환하는 커스텀 네이티브 모듈을 구축할 것입니다. 이를 통해 레거시 JSON 브리지를 통해 데이터가 어떻게 흐르는지에 대한 명확하고 실무적인 이해를 얻을 수 있습니다.

1단계: 브리지 호환 React Native 앱 초기화하기

최신 버전의 React Native는 기본적으로 레거시 브리지를 비활성화하므로, React Native 0.75.4를 사용하여 프로젝트를 명시적으로 초기화해야 합니다.
터미널에서 다음 명령어를 실행하세요:

px @react-native-community/cli@latest init JsonBridgeDemo --version 0.75.4
cd JsonBridgeDemo

New Architecture 플래그 비활성화하기

애플리케이션이 JSON 브릿지를 주 엔진으로 사용하도록 하려면, 다음 플래그가 false로 설정되어 있는지 확인하세요.

Android의 경우: android/gradle.properties 파일을 열고 다음 줄을 확인합니다:

newArchEnabled=false

iOS의 경우: 터미널을 열고, ios 디렉토리로 이동한 후 레거시 아키텍처 플래그를 사용하여 의존성을 설치합니다:

cd ios
RCT_NEW_ARCH_ENABLED=0 bundle exec pod install
cd ..

2단계: Android 네이티브 브릿지 생성 (Java)

Android 측에는 두 개의 파일이 필요합니다: 모듈 파일(Module file, 추가 로직을 정의)과 패키지 파일(Package file, React Native에 모듈 등록).

1. 모듈 파일 생성

android/app/src/main/java/com/jsonbridgedemo/로 이동하여 CalculatorModule.java라는 새 파일을 만듭니다. 다음 코드를 붙여넣으세요:

2. 패키지 파일 생성하기

같은 디렉터리에서 CalculatorPackage.java라는 파일을 만들고, 모듈을 등록하는 다음 코드를 붙여넣으세요:

package com.jsonbridgedemo;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
...

3. 패키지 등록하기

android/app/src/main/java/com/jsonbridgedemo/MainApplication.kt로 이동하여 getPackages() 함수를 찾고, 다음처럼 Java 패키지를 등록하세요:

        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
...

상호 운용성(interoperability) 때문에 Kotlin은 CalculatorPackage()를 마치 네이티브 Kotlin 클래스인 것처럼 초기화합니다.

3단계: iOS 네이티브 브릿지 생성 (Objective-C)

iOS에서는 React Native가 제공하는 Objective-C 매크로를 사용하여 클래스와 메서드를 브릿지에 자동으로 바인딩합니다.

1. 헤더 파일 생성하기

Xcode에서 프로젝트를 열거나, ios/JsonBridgeDemo/ 디렉터리로 이동하여 CalculatorModule.h라는 파일을 만들고 다음 코드를 추가하세요:

#import <React/RCTBridgeModule.h>
@interface CalculatorModule : NSObject <RCTBridgeModule>@end

2. 구현 파일 생성하기

같은 디렉터리에서 CalculatorModule.m이라는 파일을 만들고 다음 코드를 추가하세요:

#import "CalculatorModule.h"
#import <React/RCTLog.h>
@implementation CalculatorModule
...

3. Xcode에 파일 연결하기 (필수 단계!)

Android와 달리, AppDelegate.mm와 같은 구현 파일에 iOS 모듈을 수동으로 등록할 필요는 없습니다. React Native의 RCT_EXPORT_MODULE() 매크로가 컴파일 과정에서 이를 자동으로 등록해 줍니다.

하지만 Xcode에 이 새로운 파일들이 존재한다는 것을 명시적으로 알려주지 않으면, Xcode는 해당 파일들의 컴파일을 완전히 건너뛰게 됩니다. 다음의 빠른 단계를 따라 파일들을 연결하세요: