React Native 시작하기

이 장에서는 React Native 개발 환경을 준비하고, 첫 프로젝트를 만들어 휴대폰과 에뮬레이터에서 실행하는 과정까지 다룹니다. React Native 공식 문서가 권장하는 Expo 기반 방법과, 프레임워크 없이 React Native Community CLI로 시작하는 방법을 함께 살펴봅니다.

두 가지 시작 방법

React Native 공식 문서는 새 앱을 만들 때 프레임워크를 쓰라고 권장하며, 그 대표가 Expo입니다. Expo는 파일 기반 라우팅(Expo Router), 카메라·위치·알림 같은 기기 기능 모듈, 클라우드 빌드 서비스(EAS)를 함께 제공합니다. 네이티브 프로젝트를 직접 관리하고 싶거나 기존 Android·iOS 앱에 React Native 화면을 붙이는 경우에는 Community CLI로 시작할 수 있습니다.

준비물

두 방법 모두 Node.js(LTS 버전 권장)가 필요합니다. 그 밖의 준비물은 앱을 어디에서 실행할지에 따라 달라집니다.

• 실제 휴대폰: Expo Go 앱을 설치하면 PC와 같은 네트워크에서 바로 실행해 볼 수 있습니다.
• Android 에뮬레이터: Android Studio와 Android SDK, JDK가 필요합니다.
• iOS 시뮬레이터: macOS와 Xcode가 필요합니다. Windows·Linux에서는 iOS 빌드를 직접 할 수 없습니다.
• macOS·Linux에서는 파일 감시 도구 Watchman 설치를 권장합니다.

node --version
npm --version

Expo로 프로젝트 만들기

create-expo-app은 TypeScript와 Expo Router가 설정된 기본 템플릿으로 프로젝트를 만듭니다.

npx create-expo-app@latest my-app
cd my-app
npx expo start

npx expo start는 JavaScript 번들러인 Metro를 실행하고 터미널에 QR 코드를 보여 줍니다. Android에서는 Expo Go 앱으로, iOS에서는 카메라 앱으로 QR 코드를 찍으면 앱이 열립니다. 개발 서버가 떠 있는 동안 터미널에서 다음 키를 쓸 수 있습니다.

코드를 저장하면 Fast Refresh가 컴포넌트 상태를 최대한 유지한 채 바뀐 부분만 다시 그립니다.

Expo Go와 개발 빌드

Expo Go는 Expo SDK에 포함된 네이티브 모듈만 들어 있는 미리 만들어진 앱입니다. 학습과 시제품에는 충분하지만, SDK에 없는 네이티브 라이브러리를 쓰거나 앱 아이콘·권한 같은 네이티브 설정을 확인하려면 내 앱 전용 개발 빌드(development build)가 필요합니다.

npx expo install expo-dev-client
npx expo run:android
npx expo run:ios

npx expo run:*은 로컬에 Android Studio나 Xcode가 있어야 합니다. 로컬 도구 없이 클라우드에서 개발 빌드를 만들려면 EAS Build를 씁니다(배포 장에서 다룹니다). npx expo install은 현재 Expo SDK와 호환되는 라이브러리 버전을 골라 설치하므로, Expo 프로젝트에서는 npm install보다 이 명령을 쓰는 것이 좋습니다.

Community CLI로 시작하기

프레임워크 없이 시작하면 처음부터 android/와 ios/ 폴더가 있는 프로젝트가 만들어지고, 네이티브 빌드 환경을 직접 설정해야 합니다.

npx @react-native-community/cli@latest init MyApp
cd MyApp
npm start
npm run android
npm run ios

npm start는 Metro를 실행하고, npm run android·npm run ios는 네이티브 앱을 빌드해 에뮬레이터나 시뮬레이터에 설치합니다. iOS는 CocoaPods로 네이티브 의존성을 설치하므로, 네이티브 라이브러리를 추가한 뒤에는 ios 폴더에서 bundle exec pod install을 다시 실행해야 할 수 있습니다.

편집기 설정

어떤 편집기든 쓸 수 있지만 Visual Studio Code가 가장 흔합니다. TypeScript 지원은 기본으로 들어 있고, Expo 설정 파일 자동 완성을 돕는 Expo Tools 확장, ESLint, Prettier를 함께 쓰면 좋습니다. Expo 프로젝트에서는 다음 명령으로 ESLint 설정을 추가하고 검사할 수 있습니다.

npx expo lint

디버깅에는 React Native DevTools를 씁니다. 개발 서버 터미널에서 j를 누르면 열리며 중단점, 콘솔, React 컴포넌트 트리, 프로파일러를 제공합니다.

정리

• 새 앱은 공식 권장대로 Expo(npx create-expo-app@latest)로 시작하는 것이 가장 쉽습니다.
• npx expo start로 Metro를 띄우고 Expo Go나 에뮬레이터에서 실행합니다.
• 맞춤 네이티브 코드가 필요해지면 expo-dev-client로 개발 빌드를 만듭니다.
• 네이티브 프로젝트를 직접 다루려면 Community CLI의 init으로 시작합니다.