React Native: 개념, Bridge 작동 방식 및 JavaScript 환경

React Native란

React Native는 Facebook 팀(현재 Meta)이 만들고 2015년에 오픈소스로 출시한 프레임워크입니다. 하이브리드 접근 방식(Cordova, Ionic)과 달리 React Native는 WebView를 사용하지 않습니다. 대신 JavaScript 컴포넌트가 네이티브 UI 요소에 매핑됩니다: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

React Native의 첫 번째 버전은 iOS만 지원했습니다. Android 지원은 2016년에 추가되었습니다. 버전 0.60(2019)에서는 Autolinking(네이티브 종속성 자동 연결)이 도입되었습니다. React Native 0.68(2022)에는 새로운 Fabric + TurboModules 아키텍처가 포함되었습니다. 현재 안정 버전 0.74(2024)는 Flexbox 레이아웃을 위한 Yoga 3.0 지원과 함께 완전히 New Architecture로 전환되었습니다.

Statista 2024에 따르면, React Native는 크로스 플랫폼 프로젝트의 38%에서 사용됩니다. 이 프레임워크는 Discord, Instagram, Shopify, Pinterest, Skype 및 Uber Eats에서 사용됩니다. Meta는 Facebook과 Instagram(20억 사용자를 보유한 주요 모바일 앱)에서 React Native를 사용합니다.

React Native의 역사와 발전

React Native는 2015년 1월 React.js Conf에서 발표되었습니다. 아이디어는 React의 선언적 패러다임을 웹에서 모바일 플랫폼으로 가져오는 것이었습니다. 저장소의 첫 번째 커밋은 iOS용 Facebook Groups 앱을 만들기 위한 내부 Facebook 프로젝트로 2013년에 나타났습니다.

0.70(2022) 버전은 Hermes를 기본 JavaScript 엔진으로 도입했습니다. Hermes는 모바일 장치에 최적화된 사전 컴파일(AOT) 엔진입니다. JavaScriptCore와 비교하여 앱 시작 시간을 50% 줄이고 APK 크기를 30% 감소시킵니다. Hermes는 ES6와 부분적으로 ES2020을 지원합니다.

React Native와 React Web의 차이점

React Web은 ReactDOM을 통해 DOM 요소(div, span, p)로 컴포넌트를 렌더링합니다. React Native는 플랫폼의 네이티브 컴포넌트로 렌더링합니다. <div> 대신 <View>를, <span> 대신 <Text>를 사용합니다. 스타일은 StyleSheet.create()를 통해 정의되며, 플랫폼의 CSS 속성으로 변환됩니다. Flexbox는 Yoga 엔진을 통해 기본적으로 활성화됩니다.

React Native의 내비게이션은 웹과 다릅니다. react-router-dom 대신 React Navigation이 사용됩니다 — Stack, Tab 및 Drawer 네비게이터를 지원하는 네이티브 라이브러리입니다. React Navigation 6.x는 네이티브 애니메이션(useNativeDriver)과 Deep Links 통합을 사용합니다. iOS UINavigationController 및 Android Fragment를 사용한 네이티브 화면 내비게이션을 위해 Wix의 react-native-navigation 라이브러리가 사용됩니다.

React Native 아키텍처

React Native 아키텍처는 전통적으로 Bridge(JavaScript 환경과 네이티브 코드 간의 비동기 JSON 채널)를 중심으로 구축되었습니다. 버전 0.68부터 Meta는 Bridge를 JSI(JavaScript Interface)와 Fabric으로 대체하는 New Architecture를 도입했습니다. 두 모델을 살펴보겠습니다.

Bridge와 Fabric

Bridge는 여러 스레드에서 실행되는 직렬화된 JSON 프로토콜입니다: JS Thread(React 코드 해석), Main Thread(UI), Native Modules Thread(API). JS와 네이티브 코드 간의 각 상호 작용은 객체 직렬화 및 역직렬화를 거치므로 빈번한 호출 시 지연이 발생합니다. 1000개 항목의 목록을 스크롤할 때 Bridge는 초당 최대 10,000개의 JSON 메시지를 생성합니다.

Fabric은 React Native의 새로운 렌더링 시스템입니다. Bridge 대신 Fabric은 JSI를 통해 UI 스레드와 동기화되는 C++ 섀도 트리(Shadow Tree)를 사용합니다. 이는 JSON 직렬화를 제거합니다: 네이티브 C++ 코드가 JavaScript 환경의 함수를 직접 호출하고 그 반대도 가능합니다. Fabric은 렌더링 지연 시간을 16ms(Bridge)에서 2~4ms로 줄입니다.

TurboModules은 New Architecture의 두 번째 부분입니다. 이전 모델에서는 모든 네이티브 모듈이 앱 시작 시 로드되었습니다. TurboModules은 모듈을 지연 로드(lazy loading)합니다 — JS 코드가 처음 요청할 때만 로드됩니다. 이는 20개 이상의 네이티브 모듈이 있는 앱에서 콜드 스타트 시간을 40% 단축합니다.

React Native 앱 예제

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

네이티브 모듈

네이티브 모듈은 JavaScript에서 플랫폼 API를 호출하기 위한 메커니즘입니다. 기능이 표준 React Native 컴포넌트(카메라, Bluetooth, 생체 인식)로 처리되지 않는 경우 개발자는 Swift/Kotlin으로 모듈을 작성하고 RCTBridgeModule 또는 TurboModule을 통해 등록합니다. 네이티브 함수는 JS에서 NativeModules.CameraModule.takePhoto()를 통해 호출됩니다.

React Native는 가속도계(react-native-sensors), 위치 정보(@react-native-community/geolocation), 생체 인식(react-native-biometrics) 및 로컬 알림(@notifee/react-native)에 액세스하기 위한 기본 제공 네이티브 모듈을 제공합니다. 사용자 정의 시나리오를 위해 Expo는 Expo Modules API를 제공합니다 — Xcode나 Android Studio 없이 네이티브 모듈을 만들기 위한 더 간단한 인터페이스입니다.

React Native의 장점

대규모 커뮤니티 — React Native는 크로스 플랫폼 프레임워크 중 가장 큰 커뮤니티를 보유하고 있습니다. GitHub에서 프로젝트는 117,000개 이상의 스타와 1,800명 이상의 기여자를 보유하고 있습니다. npm은 매주 react-native를 300만 회 이상 다운로드합니다. React Native 질문은 Stack Overflow 모바일 개발 섹션의 전체 질문 중 5%를 차지합니다.

JavaScript 생태계 — React 개발자는 웹에서와 동일한 도구(npm, Babel, ESLint, Prettier, Jest, TypeScript)를 사용합니다. 비즈니스 로직은 웹 버전(React)과 모바일 앱(React Native) 간에 재사용할 수 있습니다. Redux, Zustand, React Query 및 React Hook Form과 같은 라이브러리는 변경 없이 두 플랫폼에서 모두 작동합니다.

Expo는 React Native 개발을 간소화하는 SDK 및 도구 세트입니다. Expo는 사전 제작된 모듈(카메라, 알림, 지도, OAuth), 클라우드 빌드(EAS Build) 및 OTA 업데이트(EAS Update)를 제공합니다. Expo Go를 사용하면 Xcode나 Android Studio 없이 실제 장치에서 앱을 실행할 수 있습니다. Expo 2024 데이터에 따르면 새로운 React Native 프로젝트의 70%가 Expo를 사용합니다.

OTA 업데이트 — Expo Update 및 CodePush(Microsoft)를 통해 사용할 수 있는 기능입니다. 개발자는 App Store 또는 Google Play 심사를 거치지 않고 JavaScript 번들 업데이트를 사용자에게 직접 보낼 수 있습니다. 이는 중요한 버그 수정 시간을 2~5일(심사 대기)에서 1~2시간으로 단축합니다.

TypeScript 지원은 React Native 0.71부터 기본적으로 포함됩니다. 프로젝트 템플릿에는 tsconfig.json, 모든 컴포넌트에 대한 타입 및 엄격 모드 지원이 포함됩니다. Flow(Facebook의 정적 타이핑)도 지원되지만 Meta는 공식적으로 TypeScript를 권장합니다. State of React Native 2024 설문 조사에 따르면 TypeScript 템플릿이 새 프로젝트의 85%를 차지합니다.

생태계와 인기 라이브러리

npm은 React Native의 기본 패키지 레지스트리입니다. 라이브러리 검색은 react-native 키워드로 필터링됩니다. 설치에는 npm install 또는 yarn add를 사용합니다. React Native CLI는 네이티브 종속성을 자동으로 연결합니다(버전 0.60부터). Expo 프로젝트의 경우 설치가 expo install을 통해 관리되며, 호환되는 라이브러리 버전을 선택합니다.

주요 라이브러리

@react-navigation/native — React Native 내비게이션의 사실상 표준입니다. 이 라이브러리에는 Stack Navigator(애니메이션 전환), Tab Navigator(iOS/Android용 하단 메뉴), Drawer Navigator(사이드 메뉴) 및 Material Top Tab이 포함됩니다. React Navigation 7.x(2024)는 정적 경로 구성과 useSyncExternalStore를 통한 완전한 React 18 지원을 도입했습니다.

react-native-reanimated — 고성능 애니메이션 라이브러리입니다. Reanimated 3.x는 JS 스레드를 우회하여 UI 스레드(worklet)에서 애니메이션을 실행합니다. 이는 100개 이상의 요소를 애니메이션할 때도 60FPS를 보장합니다. useSharedValue, useAnimatedStyle 및 withSpring은 표준 라이브러리의 Animated API를 대체합니다. Reanimated는 react-native-gesture-handler를 통해 터치 제스처를 처리합니다.

@tanstack/react-query — 서버 상태 관리 라이브러리입니다. React Query는 API 응답을 캐시하고, 네트워크 변경 시 자동으로 데이터를 다시 가져오며(refetchOnReconnect), useInfiniteQuery로 페이지네이션을 지원합니다. 버전 5.x에는 UX를 위한 낙관적 업데이트가 포함되어 있습니다 — 서버 응답을 받기 전에 인터페이스가 업데이트된 후 조정됩니다.