[React Native] 리액트 네이티브 소개 및 작업 환경 설정

1. 리액트 네이티브란?

리액트 네이티브는 (React Native) 페이스북에서 개발한 자바스크립트 라이브러리로 자바스크립트와 리액트 라이브러리를 사용하여 하이브리드 앱을 개발할 수 있는 기술이다.

리액트 네이티브에서 제공해주는 라이브러리를 사용하여 네이티브의 자원에 접근하고, 사용할 수 있으며 안드로이드 (android), iOS 환경에서 모두 사용할 수 있어서 하이브리드 앱을 개발하는데 유용하다.

 

하이브리드앱은 안드로이드 코틀린이나 iOS 스위프트 등의 언어를 새로 배우지 않아도 리액트 네이티브를 사용하여 안드로이드와 iOS 플랫폼 모두 한번에 개발할 수 있는 장점이 있다.  그러나 개발을 하다보면 안드로이드 스튜디오와 xCode 모두 사용을 해야 하기 때문에 조금씩은 사용하게 된다.

---

2. 작업환경

리액트 네이티브를 사용하는것은 앱을 개발하기 위함이고, 앱을 개발할때는 맥OS를 주로 사용하게 된다.  안드로이드의 경우 윈도우 환경에서도 개발이 가능하지만 iOS의 경우 맥OS에서만 개발이 가능하기 때문이다.  

 

작업환경은 맥OS, Visual StudioCode, Android Studio, xCode.

---

3. 작업환경 설치

  1) node js 설치

    터미널에서 아래 명령어를 실행하여 node.js를 설치한다.  버전은 다른버전으로 설치해도 무관하다.

nvm install 16.14.2

  2) node js 설치 확인 (현재 사용하는 노드 버전)

Node -v

=> v14.17.3

 

  3) 현재 설치한 버전이 아닌 다른 버전을 사용해야 하는 경우

Nvm use 15.14.2

  4) npm 버전 확인하기

npm -version

=> 6.14.13

---

4. 환경변수 설정

  $HOME/.bash_profile 또는 $HOME/.bashrc 파일에 아래의 코드를 추가한다.

  $vim $HOME/ .zprofile 명령어로 파일을 열어서 추가

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

---

5. 리액트 네이티브 프로젝트 만들기

  1) 프로젝트 만들기

    터미널에서 프로젝트를 생성할 경로로 이동한 후 아래 명령어로 sampleProject라는 프로젝트를 생성한다.

react-native init (-version 0.61.5) sampleProject

  2) (Visual Studio Code) File -> Add Folder To WorkSpace -> 프로젝트 경로로 이동

 

  3) 아래 명령어로 메트로 서버를 실행한다.

npm start

---

6. 가상디바이스 실행하기

  * 안드로이드의 경우 안드로이드 스튜디오에서 가상 시뮬레이터를 실행한 후 진행해야 한다.

 

  1) 안드로이드

    - 시뮬레이터를 실행하기 위해 터미널에서 아래 명령어 실행.

react-native run-android

    - 소스를 수정한 후 시뮬레이터를 새로고침 : RR

    - 수정사항을 새로고침 하지 않고 바로 적용 : command + M -> Disable Fast Refresh

 

  2) iOS

    - 시뮬레이터를 실행하기 위해 터미널에서 아래 명령어 실행

react-native run-ios

    - 단말기 종류 변경하기

react-native run-ios —simulator=“I Phone 8 Plus”

    - 소스를 수정한 후 시뮬레이터를 새로고침 : RR

    - 수정사항을 새로고침 하지 않고 바로 적용 : command + M -> Disable Fast Refresh