React Native로 앱 개발 - 01. 프로젝트 생성하기

React Native는(이하 RN) React를 이용해 Android와 iOS 네이티브 앱을 개발할 수 있는 Framework이며 2020년 2월 현재 0.61 버전입니다. 버전이 1이 안되는데도 불구하고 많은 개발사들이 사용하는걸 보면 Facebook에서 지속적으로 발전시키고 있다는 의미일 겁니다. 

 

이 글은 아래와 같은 내용을 담고 있습니다. 

 

• 필요한 개발 툴들 
• React Native CLI 로 프로젝트 생성하기
• 앱 실행 해보기

필요한 개발 툴들 

본격적으로 알아보기 전에 먼저 설치해야 할 개발툴들이 있습니다. 이를 알아보고 진행해 보겠습니다.

 

Node.js : React는 Javascript Runtime인 Node.js를 사용합니다. 

 

npm : Node.js의 패키지를 관리하는 툴입니다.

 

React Native CLI : React native 앱을 빌드하고 실행하는데 필요한 툴입니다.

 

Watchman : MacOS에서 어떤 파일의 변화를 감지하는데 사용하기 위해 Facebook에서 개발한 툴입니다.

 

Native SDKs :XCode , Android Studio 들은 네이티브 앱 빌드를 위해 필요한 SDK입니다.

 

CocoaPods : Swift 및 Objective-C 코코아 프로젝트의 종속성 관리자입니다. RN으로 프로젝트를 initialize할 때 CocoaPods가 설치되어 있으면 Android와 iOS빌드에 필요한 종속된 라이브러리들을 초기화해 주며, 추후에도 필요한 라이브러리들을 관리할 때 지속적으로 사용됩니다. 

 

(* react-native init project_name으로 실행하면 위와 같은 iOS, Android 빌드에 대한 설정 후 실행 방법을 안내해 줍니다.)

 

React Native CLI 로 프로젝트 생성하기

React Native 프로젝트를 세팅하고 관리하는데 사용합니다. 터미널을 열어 아래 명령을 실행하여 설치할 수 있습니다. 

npm install -g react-native-cli

이후 설치가 잘 되었는지 아래와 같이 테스트 해보세요.

react-native --version

##output
react-native-cli: 2.0.1

 

이제 샘플 프로젝트를 생성해 보겠습니다. 

react-native init firstApp

 

생성된 프로젝트 주요 파일들 중 알고 가야할 내용을 살펴보겠습니다.

 

index.js : 기기 혹은 시뮬레이터에서 첫 번째로 호출하는 entry point이며, App.js를 호출하게 됩니다.

 

app.json : index.js에서 호출되며 앱의 이름을 정의하는데 사용합니다. 

 

App.js : 모바일 디바이스 화면에 출력되는 첫 번째 파일입니다. 

 

android/ : 안드로이드 앱을 위한 코드와 관련 파일들이 포함되어 있습니다. 

 

ios/ : ios 앱을 위한 코드와 관련 파일들이 포함되어 있습니다. 

 

 

앱 실행 해보기

Mac에서 iOS이라면 간단히 빌드/실행 할 수 있습니다.

react-native run-ios

# 이와 같이 시뮬레이션 할 디바이스를 선택해서 실행 가능하다.
react-native run-ios --simulator="iPad Pro"

# 아래 명령으로 테스트 가능한 디바이스 정보를 확인할 수 있다.
xcrun simctl list devices

Android 를 위한 빌드/실행을 위해 Android Studio 가 설치되어 있어야 합니다. 안드로이드 에뮬레이터 실행을 위해서는 $ANDROID_HOME 이라는 path가 설정되어 있는지 확인합니다. 

echo $ANDROID_HOME

# 만약 등록되어 있지 않다면 자신의 계정 홈 디렉토리로 가서 
cd $HOME

# ANDROID_HOME과 추가 path를 등록합니다. 
vi .bash_prifile

# 아래 내용을 복사하여 추가하세요.
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

# 저장 후 콘솔에서 $ANDROID_HOME가 정상적으로 출력되는지 확인 하시면 됩니다.

위 내용이 확인되었다면 이제 android 애뮬레이터를 실행할 수 있습니다.

react-native run-android

 

이제 개발을 시작할 준비가 모두 마무리 되었습니다. 

 

다음에는 실제 앱 개발에 도움이 될 수 있는 모듈들을 하나씩 적용해 보겠습니다.