React Native 완전 가이드 - JavaScript로 크로스플랫폼 앱 개발 | Mobile

React Native가 뭔가

React Native는 Meta(구 Facebook)가 만든 오픈소스 프레임워크다. React의 컴포넌트 기반 구조를 모바일에 그대로 적용한다. HTML의 div 대신 View를, span 대신 Text를 쓰는 정도의 차이만 익히면 기본적인 UI 구성이 가능하다.

핵심은 JavaScript로 작성하되 네이티브 UI 컴포넌트를 렌더링한다는 점이다. WebView 기반의 하이브리드 앱과 달리, 실제 네이티브 버튼과 스크롤 뷰를 사용하기 때문에 사용자 경험이 네이티브에 가깝다.

가장 큰 변화는 아키텍처다. 0.76에서 기본값으로 전환된 New Architecture는 0.82(2025년 10월)에서 더 이상 끌 수 없게 되었고, 2026년 4월의 0.85에서는 레거시 브릿지가 코드베이스에서 아예 삭제됐다. 이제 모든 신규 앱은 Fabric 렌더러 + TurboModules + 브릿지리스(bridgeless) 구조 위에서 동작한다. JSI(JavaScript Interface)를 통해 네이티브와 직접 통신하므로 과거 브릿지 방식의 직렬화 오버헤드가 사라졌고, Fabric은 C++로 React 리컨실러를 구현해 동시성(concurrent) 렌더링을 지원한다. TurboModules는 호출 시점에 지연 로딩되어 앱 시작 시간도 줄여준다.

핵심 특징

JavaScript/TypeScript로 iOS와 Android 동시 개발
네이티브 UI 컴포넌트 사용으로 앱 품질 확보
New Architecture(Fabric/TurboModules) 기본 탑재로 향상된 성능
Hermes 엔진 기본 적용 — 빠른 시작 시간과 낮은 메모리 사용
Fast Refresh로 코드 수정 즉시 반영
방대한 npm 생태계와 서드파티 라이브러리 활용

환경 설정과 프로젝트 생성

2026년 현재, 공식 문서는 새 앱을 시작할 때 Expo를 프레임워크로 사용할 것을 명확히 권장한다. 과거의 npx react-native init 명령은 더 이상 사용되지 않으며(deprecated), 커뮤니티 CLI는 이미 Expo 위에서 동작하는 방식으로 정리됐다. 직접 프레임워크를 깔고 라우팅과 빌드 파이프라인을 손수 만드는 대신, Expo가 제공하는 도구를 쓰면 앱 로직에 집중할 수 있다.

Expo로 시작하기 (권장)

Node.js만 설치돼 있으면 아래 한 줄로 프로젝트가 만들어진다. 전역 expo-cli는 폐기됐고, CLI는 프로젝트의 expo 패키지에 번들로 포함되므로 항상 npx로 로컬 실행하는 것이 표준이다.

                    Terminal
# 새 프로젝트 생성 (Expo SDK 54 = RN 0.81 + React 19.1)
npx create-expo-app@latest MyApp

cd MyApp

# 개발 서버 실행 후 QR코드로 실기기/시뮬레이터에서 확인
npx expo start
                

Expo Go 앱으로 QR코드를 스캔하면 실제 기기에서 즉시 테스트된다. 파일 기반 라우팅(Expo Router), 표준 네이티브 모듈 라이브러리, EAS 클라우드 빌드까지 한 묶음으로 제공된다.

네이티브 코드가 필요할 때

특정 네이티브 모듈이나 커스텀 네이티브 코드가 필요하면 Config Plugin으로 네이티브 설정을 코드 수정 없이 주입하거나, 필요한 순간에 npx expo prebuild로 ios/android 디렉터리를 생성해 직접 손볼 수 있다. 즉 Expo를 쓰면서도 네이티브 자유도를 그대로 확보한다 — 과거처럼 "Expo냐 베어(bare)냐"를 처음부터 선택할 필요가 없어졌다.

참고

2026년 1월 기준 EAS Build로 빌드된 SDK 54 프로젝트의 약 83%가 New Architecture를 사용한다. Expo SDK 53부터 모든 expo-* 패키지가 브릿지리스를 포함한 New Architecture를 지원하며, SDK 55 이후로는 비활성화 옵션 자체가 없다. 사실상 모든 프로덕션 앱이 New Architecture 위에서 돌아가고 있다.

핵심 컴포넌트와 스타일링

React Native에서 UI는 모두 컴포넌트로 구성된다. 웹의 HTML 요소와 대응되는 네이티브 컴포넌트를 사용한다.

웹 (HTML)	React Native	용도
div	View	컨테이너, 레이아웃
p / span	Text	텍스트 표시
img	Image	이미지 표시
input	TextInput	텍스트 입력
scroll div	ScrollView / FlatList	스크롤 리스트
button	Pressable	터치 가능 요소

스타일링

CSS가 아닌 StyleSheet 객체를 사용한다. Flexbox가 기본 레이아웃 시스템이고, 웹과 달리 기본 방향이 column이다. 아래는 가장 기본적인 화면 컴포넌트의 형태다.

                    App.tsx
import { View, Text, Pressable, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native 시작</Text>
      <Pressable style={styles.button} onPress={() => console.log('tap')}>
        <Text style={styles.buttonText}>눌러보기</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 16 },
  title: { fontSize: 22, fontWeight: '700' },
  button: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 8, backgroundColor: '#1a1a1a' },
  buttonText: { color: '#fff', fontSize: 15 },
});
                

웹에서 Tailwind에 익숙하다면 NativeWind(Tailwind CSS 포트)를 쓰면 거의 동일한 경험으로 스타일링할 수 있다. className 문법을 그대로 사용해 StyleSheet 객체를 직접 작성하는 수고를 줄여준다.

네비게이션 구성

모바일 앱에서 화면 간 이동은 핵심이다. 2026년 기준, create-expo-app의 기본 템플릿은 Expo Router(파일 기반 라우팅)를 채택하고 있어 새 프로젝트라면 이쪽이 출발점이 된다. 내부적으로는 여전히 React Navigation을 기반으로 동작한다.

Expo Router (기본 선택)

Next.js처럼 파일 이름이 곧 경로가 되는 구조다. app/(tabs)/home.tsx가 탭 안의 홈 화면이 된다. SDK 54의 Router v6부터는 iOS 26의 네이티브 하단 탭(native tabs) UI까지 그대로 적용할 수 있다. 디렉터리 구조만으로 네비게이션이 정의되므로 직관적이고, 딥링크와 웹 라우팅이 자연스럽게 따라온다.

React Navigation

파일 기반 라우팅이 맞지 않거나 화면 전환 흐름을 코드로 세밀하게 제어하고 싶다면 React Navigation을 직접 쓴다. Stack, Tab, Drawer 네비게이터를 조합해서 앱의 화면 구조를 만든다. Stack은 화면을 쌓아가는 방식이고, Tab은 하단 탭 바, Drawer는 사이드 메뉴다. 세 가지를 중첩해서 복잡한 구조도 표현할 수 있다.

API 연동과 상태 관리

서버 데이터를 가져오고 관리하는 건 앱의 핵심이다. React Native에서는 웹과 동일한 도구를 쓸 수 있다.

데이터 페칭

TanStack Query(React Query)를 쓰면 서버 상태 관리가 깔끔해진다. 캐싱, 백그라운드 리페칭, 낙관적 업데이트를 자동으로 처리해준다. fetch API나 axios로 HTTP 요청을 보내고, TanStack Query로 감싸는 게 2026년 기준 표준 패턴이다.

클라이언트 상태 관리

전역 UI 상태는 Zustand가 가볍고 직관적이다. Redux보다 보일러플레이트가 훨씬 적고, TypeScript 지원도 좋다. 소규모 앱이면 React의 Context API만으로도 충분하다.

Flutter와의 비교

항목	React Native	Flutter
언어	JavaScript / TypeScript	Dart
렌더링	네이티브 UI 컴포넌트	자체 렌더링 엔진
웹 개발자 진입	매우 쉬움	새 언어 학습 필요
UI 일관성	플랫폼별 차이 있음	완전 동일
생태계	npm (방대함)	pub.dev (빠르게 성장)
성능	New Architecture가 기본 — 브릿지 제거로 우수	기본적으로 우수
언어/런타임	React 19 + Hermes 엔진	Dart + 자체 VM/AOT

과거 React Native의 약점으로 꼽히던 브릿지 직렬화 병목은 New Architecture가 강제되면서 사실상 해소됐다. 따라서 성능만으로 Flutter를 선택할 이유는 예전보다 줄었다. React 경험이 있다면 React Native가 진입 장벽이 훨씬 낮고, 처음부터 새로 배우는 거라면 Flutter도 좋은 선택이다. 결국 팀의 기술 스택과 프로젝트 요구사항에 맞춰 결정하면 된다.

빌드와 배포

Expo를 쓴다면 EAS Build로 클라우드 빌드가 가능하다. CLI 프로젝트는 로컬에서 직접 빌드해야 한다.

Android

cd android && ./gradlew assembleRelease로 APK를 생성하거나, AAB로 빌드해서 Google Play Console에 업로드한다.

iOS

Xcode에서 Archive를 실행하고 App Store Connect에 업로드한다. Apple Developer 계정과 인증서 설정이 필요하다.

실전 팁

Expo의 OTA(Over-the-Air) 업데이트를 활용하면 JavaScript 번들만 즉시 업데이트할 수 있다. 스토어 심사 없이 긴급 버그 수정이나 텍스트 변경을 바로 반영할 수 있어서 운영 중인 앱에서 매우 유용하다.

마무리

React Native는 웹 개발자가 모바일 앱에 진입하는 가장 현실적인 경로다. JavaScript/TypeScript 생태계를 그대로 활용할 수 있고, 웹과 코드를 공유하기도 쉽다. 이제 New Architecture가 선택이 아닌 기본값이 되면서, 과거 성능 이슈는 대부분 옛이야기가 됐다. React 19와 Hermes, 브릿지리스 모델 위에서 동작하는 2026년의 React Native는 한층 단단해졌다.

물론 네이티브 수준의 극한 성능이 필요한 앱에는 한계가 있다. 하지만 대부분의 비즈니스 앱, 콘텐츠 앱, 이커머스 앱에서는 React Native로 충분한 품질의 앱을 만들 수 있다.

React를 알고 있다면 학습 비용이 거의 없다. 아직 모바일 개발을 시도해보지 않았다면, npx create-expo-app부터 실행해보자. 생각보다 쉽고, 첫 화면이 뜨는 순간 그 가능성에 놀라게 될 것이다.