React Native가 뭔가
React Native는 Meta(구 Facebook)가 만든 오픈소스 프레임워크다. React의 컴포넌트 기반 구조를 모바일에 그대로 적용한다. HTML의 div 대신 View를, span 대신 Text를 쓰는 정도의 차이만 익히면 기본적인 UI 구성이 가능하다.
핵심은 JavaScript로 작성하되 네이티브 UI 컴포넌트를 렌더링한다는 점이다. WebView 기반의 하이브리드 앱과 달리, 실제 네이티브 버튼과 스크롤 뷰를 사용하기 때문에 사용자 경험이 네이티브에 가깝다.
2024년부터 New Architecture(Fabric 렌더러 + TurboModules)가 안정화되면서, 기존 브릿지 방식의 성능 병목이 크게 개선됐다. JSI(JavaScript Interface)를 통해 네이티브와 직접 통신하기 때문에 직렬화 오버헤드가 사라졌다.
- JavaScript/TypeScript로 iOS와 Android 동시 개발
- 네이티브 UI 컴포넌트 사용으로 앱 품질 확보
- Fast Refresh로 코드 수정 즉시 반영
- 방대한 npm 생태계와 서드파티 라이브러리 활용
환경 설정과 프로젝트 생성
React Native 프로젝트를 시작하는 방법은 크게 두 가지다. React Native CLI로 직접 세팅하거나, Expo를 사용하는 방법이다.
React Native CLI
Node.js, Watchman, Android Studio(또는 Xcode)를 설치하고 npx react-native init MyApp으로 프로젝트를 생성한다. 네이티브 코드에 직접 접근할 수 있어서 자유도가 높지만, 초기 설정이 복잡하다.
Expo
npx create-expo-app MyApp 한 줄이면 프로젝트가 만들어진다. QR코드로 실제 기기에서 바로 테스트할 수 있고, 복잡한 네이티브 환경 설정이 필요 없다. 입문자에게 강력히 추천한다.
2026년 기준, Expo는 대부분의 네이티브 모듈을 지원한다. Config Plugin으로 네이티브 코드 수정 없이 설정을 변경할 수 있어서, 프로덕션 앱에서도 Expo를 사용하는 팀이 많아졌다.
핵심 컴포넌트와 스타일링
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이다. NativeWind(Tailwind CSS 포트)를 쓰면 웹에서 Tailwind를 쓰던 것과 거의 동일한 경험으로 스타일링할 수 있다.
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 경험이 있다면 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 Native로 충분한 품질의 앱을 만들 수 있다.
React를 알고 있다면 학습 비용이 거의 없다. 아직 모바일 개발을 시도해보지 않았다면, npx create-expo-app부터 실행해보자. 생각보다 쉽고, 첫 화면이 뜨는 순간 그 가능성에 놀라게 될 것이다.
