리액트 네이티브 설치 및 실행

리액트 네이티브는 npm이라는 명령어를 사용해 설치 및 실행을 한다. npm 명령을 사용하기 위해 Node.js를 Node.js 다운받아 설치하자.

 

리액트 네이티브의 공식 홈페이지는 https://reactnative.dev/이고 여기서 두 종류의 react native 설치 방법을 가르쳐 준다. 그 중 하나는 Expo CLI를 이용한 방법이고, 다른 하나는 React Native CLI를 이용한 방법이다. Expo를 사용하면 별도 Android Studio나 Xcode 없이도 화면을 실행해 볼수 있고 앱의 유용한 기능을 기본모듈로 제공해 주기 때문에 초보자들에게 굉장히 유용하다. 하지만 큰 단점이 존재하는데 네이티브 본래의 기능을 사용하지 못한다는 것이다. 기기의 특정 기능들을 포기하고 빠르게 화면만 구성하기에는 최적화 된 사용방법이다.

 

설치는 다음과 같이 expo-cli를 먼저 설치한뒤 expo init 명령어로 프로젝트를 설치하고 실행하면 끝이다.

npm install -g expo-cli

expo init AwesomeProject

cd AwesomeProject
npm start # you can also use: expo start

 

하지만 위 방식은 추후 디바이스 자체기능인 Push 알럿이나 기타등등 세부적인 기능을 사용하기 위해서는 ejected를 실행해야 하기 때문에 처음부터 ejected를 실행해서 android studio와 Xcode가 분리되어 있는 react-native cli 방식으로 프로젝트를 생성하는것을 개인적으로는 추천한다. 

 

react native 프로젝트 설치를 위해 react-native-cli를 설치한다. 이 설치는 한번만 하면 된다.

npm install -g react-native-cli

 

react-native-cli가 설치되면 react-native init을 통해서 react-native로 된 프로젝트를 설치 할 수 있게된다.

react-native init myProject

 

새로 생성된 myProject를 실행하기 위해서는 cd 명령어로 myProject로 들어간 뒤 android는 npm run-android, iOS는 npm run-ios를 각각 실행하면 되는데 일단 run-android를 실행하기 위해서는 개발자 모드가 활성화 된 android폰을 USB로 컴퓨터에 연결하거나 제니모션을 실행시켜야 하고, run-ios를 실행하기 위해서는 xcode가 설치된 맥 에서 시뮬레이터를 실행시켜둔 상태여야 한다. 둘중 무엇을 사용해도 상관없지만 윈도우 기반의 안드로이드를 기반으로 설명해보겠다.

cd myProject

// ios
react-native run-ios

// android
react-native run-android

제니모션 설치방법은 다음 링크[제니모션 설치방법]를 참조하자

 

위 명령으로 android를 실행하면 다음과 같은 에러가 나는데 이는 안드로이드에 android sdk 위치가 설정되지 않았기 때문이다. 

 

이 문제를 해결하기 위해서는 local.properties 파일을 myProject/android에 생성한 뒤 다음과 같이 sdk 위치를 지정해 주는 방법이 있고

sdk.dir=C\:\\Users\\내계정이름\\AppData\\Local\\Android\\Sdk

혹은 간단하게 android studio를 열어 myProject/android 폴더를 open하면 자동으로 local.properties 파일이 만들어진다.

 

local.properties 파일이 생성된 것을 확인 한 뒤에 다시한번 npm run-android 명령을 통해서 프로그램을 실행해보자.

그러면 다음과 같이 react native 프로그램이 실행된다.

 

안드로이드를 실행하기 위해서는 android studio를 설치하면서 최초로 몇몇 sdk와 에뮬레이터를 설치해야 하고 gradle 또한 설치해야 한다. 따라서 위 튜토리얼은 최소 하나의 안드로이드 앱을 실행한 뒤에 따라해보기 바란다.