React Native 개발의 기본 개념
React Native 는 Facebook (지금은 Meta) 이 2015 년에 공개한 오픈소스 크로스플랫폼 프레임워크다. iOS 와 Android 를 같은 JS/TS 코드베이스로 개발할 수 있게 해주며, React 의 컴포넌트 기반 아키텍처와 JSX 문법을 그대로 사용한다. 2023 년 기준 최신은 0.72 이고, 새로운 아키텍처 (Fabric + TurboModules) 가 opt-in 으로 들어와 있다.
RN 의 진짜 매력 — JS 가 네이티브 컴포넌트를 그린다
Cordova / Ionic 같은 WebView 기반 하이브리드는 브라우저 안에서 HTML 을 렌더링한다. RN 은 다르다. JS 쪽에서 "Text, View, ScrollView" 라고 쓰면, 실제로는 iOS 의 UITextView, Android 의 TextView 를 그린다. UI 만 놓고 보면 100% 네이티브. 그래서 스크롤 / 폰트 / 애니메이션이 웹뷰 기반보다 훨씬 부드럽다.
JS 와 네이티브 사이는 원래 "브리지 (Bridge)" 라는 비동기 JSON 메시지 큐로 연결되어 있었는데, 성능 병목이 자주 생기는 부분이라 New Architecture 에서는 JSI (JavaScript Interface) 로 재설계되었다. 0.68 부터 opt-in 으로 쓸 수 있고, 0.7x 에서 점차 기본화 되는 분위기. JSI 는 C++ 레벨에서 JS 엔진 (Hermes 나 JSC) 과 네이티브 객체가 서로 직접 참조할 수 있어서 브리지가 사라진다. 성능 차이가 확연.
주요 특징
- JavaScript / TypeScript 기반: React 를 써봤다면 3~4 일이면 익숙해진다. 2023 년 신규 프로젝트는 거의 TS 가 기본.
npx react-native@latest init MyApp --template react-native-template-typescript - 크로스 플랫폼: iOS 와 Android 애플리케이션을 동일한 코드베이스로. 다만 "Write once, run anywhere" 라기보다 "Learn once, write anywhere" 에 가깝다. 플랫폼별 조정이 필요한 부분이 분명 있다.
- 네이티브 모듈: Objective-C / Swift / Java / Kotlin 으로 네이티브 기능을 감싸서 JS 로 노출 가능. 카메라, 결제, 블루투스 등 JS 로 못 만드는 기능은 직접 브리지.
- 핫 리로드 / Fast Refresh: 코드 저장하면 앱에 바로 반영 (state 까지 유지됨). 개발 속도 차이가 크다.
- Hermes: Meta 가 만든 RN 전용 JS 엔진. 0.70 부터 기본. 콜드 스타트와 메모리 사용량이 JSC 대비 명확히 개선되어 있다.
Expo 를 쓸 것이냐 말 것이냐
2023 년 시점 가장 많이 듣는 질문. Expo 는 RN 위에 얹은 개발 플랫폼으로, 네이티브 빌드 환경 없이도 앱을 만들 수 있게 해준다. 최근엔 EAS (Expo Application Services) 가 빌드 / OTA 업데이트까지 다 커버해서 스타트업이나 개인 개발자 수준에서는 거의 정답에 가깝다.
반대로 네이티브 모듈을 많이 건드려야 하거나 이미 기존 네이티브 앱에 RN 을 부분 도입하는 경우라면 bare RN (react-native CLI) 가 맞다. 예전에 Expo 는 "ejecting 해야만 네이티브 코드 접근 가능" 이어서 경계가 확실했는데, 요즘은 Expo Prebuild + custom dev client 로 경계가 꽤 흐려졌다.
핵심 컴포넌트
- View — 레이아웃 컨테이너. 브라우저의 div. flex-box 가 기본.
- Text — 텍스트 표시 전용. 다른 컴포넌트 안에 그냥 문자열 박으면 에러 나니 항상 Text 로 감싸야 함.
- Image — 로컬 / 원격 이미지. 원격은 width/height 를 반드시 주거나 에러 핸들러로 크기 구해 와야 한다.
- TextInput — 입력 필드. iOS / Android 기본 동작 차이가 미묘해서 placeholder 색깔, 자동 수정, keyboardType 같은 걸 플랫폼별로 조정할 일이 많다.
- ScrollView — 전체를 메모리에 올려 스크롤. 아이템 개수 많으면 성능 문제.
- FlatList / SectionList — 가상화된 리스트. 긴 목록은 ScrollView 대신 이걸로.
keyExtractor,renderItem,getItemLayout을 적절히 안 쓰면 성능 바닥 찍는다. - Pressable — 0.63 에서 추가된 터치 처리 기본 컴포넌트. TouchableOpacity / TouchableHighlight 의 진화판. 신규 코드는 Pressable 쓰는 게 정답.
- SafeAreaView — iPhone X 이후 노치, 홈 인디케이터 영역을 피해 컨텐츠 배치.
- KeyboardAvoidingView — 키보드가 올라올 때 입력창이 가려지지 않게 자동 조정.
Picker, WebView 는 core 에서 빠져 community 패키지로 이동했다. 신규 프로젝트는 @react-native-picker/picker, react-native-webview 쓰면 된다.
2023 년 기준 실무에서 거의 필수인 외부 라이브러리
- react-navigation (v6) — 화면 전환의 사실상 표준. stack / tab / drawer 다 포함.
- react-native-reanimated (v3) + react-native-gesture-handler — 부드러운 애니메이션과 제스처. 드래그나 바텀시트 만들 때 없으면 고생.
- react-native-safe-area-context — SafeAreaView 보다 유연한 훅 기반 API.
- react-native-mmkv — AsyncStorage 보다 수십 배 빠른 key-value 저장소. 최근 마이그레이션 사례가 많음.
- @tanstack/react-query — 서버 상태 관리. Redux 전체 구성하기 무거운 경우 대체재.
- zustand — Redux 대비 훨씬 가벼운 전역 상태 라이브러리. 작은 앱에서 궁합 좋음.
- react-native-vector-icons — 벡터 아이콘. 다만 Expo 쓰면
@expo/vector-icons쪽이 번들에 이미 포함. - native-base / react-native-paper — UI 킷. Material 스타일 원하면 Paper, 크로스 플랫폼 일관성은 NativeBase.
성능 관련 조심할 것
FlatList 에서 key 없이 인덱스 써서 키를 주면 아이템 이동 / 삭제 시 전체 리렌더 비용이 터진다. keyExtractor={item => item.id} 는 기본.
Image 는 캐싱이 허술해서 같은 이미지를 여러 번 로드하는 경우가 흔하다. react-native-fast-image 를 쓰거나, Expo 라면 expo-image.
애니메이션은 가급적 Reanimated + runOnUI 로 JS 쓰레드 밖에서 돌린다. Animated API 도 useNativeDriver: true 를 붙이면 비슷한 효과가 나오지만, transform / opacity 이외 속성엔 못 쓴다.
요약
React Native 는 활발한 커뮤니티와 오픈소스 프로젝트 덕분에 기능이 계속 확장되고 있다. Flutter 가 바짝 따라붙었지만 2023 년 시점 국내외 모바일 크로스플랫폼 점유율은 여전히 RN 쪽이 두텁다. 신규 프로젝트는 TypeScript + Expo + Reanimated + react-navigation 정도의 스택으로 시작하면 무난하다.
더 많은 React Native 관련 자료와 도구는 awesome-react-native 에서 확인할 수 있다.
