ReactNative 리액트네이티브 안드로이드,IOS 시뮬레이터 이용하기

 

새로운 RN 프로젝트 생성

npx react-native init <원하는 프로젝트 이름>

 

npx는 Node.js와 함께 설치되며, node 환경에서 구동되는 CLI 도구를 간단하게 사용할 수 있도록 도와준다.

 

 

yarn android 또는 yarn ios를 터미널에 입력하여 각 환경에서 앱을 구동할 수 있다.

yarn start는 Metro를 구동해준다.

 

Metro란, 리액트 네이티브를 위한 자바스크립트 번들러로 js 파일을 읽어서 순서에 맞게 하나의 파일로 합쳐주고 앱에서 실행 준비를 해준다.

참고로 yarn android, yarn ios 스크립트를 입력하면 start 스크립트가 자동으로 시작되어 따로 입력하여 실행하는 일은 드물다.

 

 

 

1. 안드로이드 환경에서 리액트 네이티브 앱 구동

 

안드로이드 스튜디오에서 새로운 프로젝트 클릭 후,

방금 새로 만든 프로젝트 디렉터리 안에 android 디렉터리를 선택해 오픈한다

 

 

우측 상단의 AVD Manager(android virtual device manager)를 클릭하고

Create Virtual Device.. 버튼을 클릭한다

 

 

원하는 기기 선택

 

 

 

가장 상단에 위치한 Release Name을 다운로드하고 선택한다 (위 이미지에선 이미 다운로드가 되어있어서 표시가 없다)

 

 

 

완료 버튼을 누르고 오른쪽 사이드에 플레이 버튼을 누르면 선택했던 기기로 안드로이드 시뮬레이터가 구동된다

 

 

 

VSCode를 실행 후,

터미널에 yarn android 를 입력하면 안드로이드 시뮬레이터가 나온다

(VSCode 내에서 터미널 단축키는 Cmd+Shift+`백틱)

 

 

 

원래 리액트 배경의 Welcome to React 화면이 나오지만 난 이미 프로젝트 이것저것 한 상태라 보이진 않는다

 

 

 

2. IOS 환경에서 리액트 네이티브 앱 구동

 

안드로이드와 다르게 IOS는 터미널에서 바로 yarn ios 입력하면 시뮬레이터가 구동된다.

 

 

 

 

Ref.

리액트 네이티브를 다루는 기술 - 김민준