React Native 7장: 네이티브 모듈 직접 연동 및 Bridging 이해

[7장] 네이티브 모듈 직접 연동 및 Bridging 이해

1. 왜 네이티브 모듈이 필요한가?

기능 예시	Expo 지원 여부
백그라운드 작업, 백그라운드 다운로드	❌ 제한적
블루투스, NFC, 비콘	❌ 미지원
커스텀 카메라 UI, 영상처리 필터 등	❌ 불가능
인앱 결제, 푸시 알림 토큰 상세 제어	부분 지원 or 불편

→ 이럴 땐 React Native CLI 환경 + 네이티브 코드 연동 필요

2. Expo → React Native CLI로 전환 (eject)

npx expo eject

결과

ios/, android/ 폴더 생성됨
네이티브 코드 직접 작성 가능
빌드/실행도 Xcode / Android Studio로 가능해야 함

3. 네이티브 모듈 연동 방식 (예: react-native-video)

npm install react-native-video
npx pod-install

Android

android/app/build.gradle 수정 필요
퍼미션 등 AndroidManifest.xml 설정

iOS

CocoaPods 사용 (npx pod-install)
Info.plist에 권한 명시

Expo에서는 자동 처리되던 부분을 직접 관리해야 함

4. 커스텀 네이티브 모듈 만들기 (Bridging)

구조

android/
  com.myapp/
    MyCustomModule.java

ios/
  MyCustomModule.swift or .m

Android 예시

package com.myapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyCustomModule extends ReactContextBaseJavaModule {
  @Override
  public String getName() {
    return "MyCustom";
  }

  @ReactMethod
  public void showLog(String message) {
    Log.d("MyCustom", message);
  }
}

JavaScript에서 사용

import { NativeModules } from 'react-native';
NativeModules.MyCustom.showLog("안녕 네이티브");

이게 바로 React Native의 브릿지 구조: JS ↔ 네이티브 함수 호출

5. Turbo Modules & JSI (선택 심화)

최신 React Native는 Turbo Modules + JSI 기반으로 전환 중
성능 및 타입 지원, 동기 호출 등 가능
하지만 현재는 대부분 브리지 방식을 병행함

6. 실전 사용 예시

연동 대상	필요한 네이티브 작업
Bluetooth 연동	react-native-ble-plx + 권한 처리
앱 권한 설정 페이지 이동	Android Intent / iOS deep link
커스텀 푸시 처리	Firebase SDK 연동 + Notification Channel 설정
앱 내 파일 다운로드	네이티브 파일 접근 권한 + FileManager 연동

7. 네이티브 연동 시 주의사항

플랫폼별 기능 차이 반드시 확인
iOS는 시뮬레이터에서 테스트 안 되는 기능 많음 (e.g. 카메라, BLE)
퍼미션 누락 시 앱 크래시 발생 가능 → PermissionsAndroid, react-native-permissions 추천

요약

Expo는 빠른 개발용, React Native CLI는 확장성을 위한 개발용
직접 모듈 연동은 성능과 기능 확장의 핵심
Bridging은 JS ↔ 네이티브의 핵심 통신 구조
퍼미션, 설정, 네이티브 코드 병행 운영에 익숙해져야 진짜 앱 개발자로 성장

심화학습

Q1. Expo 프로젝트에서 eject하고 다시 Expo로 돌아갈 수 있나요?
A1. 거의 불가능하다. eject는 구조 자체가 바뀌기 때문에 되돌리는 건 복잡하고 위험하다. 신중히 결정해야 한다.

Q2. 네이티브 모듈을 직접 만들지 않고 npm 패키지로만 대체할 수는 없나요?
A2. 많은 경우 가능하지만, 고유 기능이 필요한 경우엔 직접 작성이 필요하다. 특히 사내 전용 SDK, 특수 장치 연동 등에선 불가피하다.

Q3. 안드로이드만 연동했는데 iOS에서 앱이 크래시 나요. 왜 그런가요?
A3. 네이티브 모듈은 iOS/Android 각각 다 구현해야 한다. 하나만 구현하면 다른 플랫폼에서 undefined 오류 또는 런타임 크래시가 발생한다.