웹스톰으로 리액트 네이티브 시작하기

프로그램 설치하기

일단 리액트 네이티브를 설치한다.

리액트 네이티브의 공식 문서를 참조하는 편이 좋다. 프로젝트를 생성하기 전 단계까지 따라하면 된다.

https://facebook.github.io/react-native/docs/getting-started.html

웹 스톰을 설치한다.

https://www.jetbrains.com/webstorm/

그리고 안드로이드 스튜디오도 깔아주자. 

안드로이드 스튜디오: https://developer.android.com/studio/install?hl=ko

프로젝트 생성하기

웹 스톰에서 File - New - Project...를 클릭하여 새 프로젝트를 생성한다.

생성할 프로젝트 이름을 practice1로 한 후 create 버튼을 누른다.

다음과 같이 프로젝트가 자동으로 생성된다.

안드로이드 디바이스와 연결하기 - 첫 번째 방법

리액트 네이티브를 안드로이드 디바이스와 연결하는 방법은 두 가지가 있다.

안드로이드 디바이스를 usb로 컴퓨터와 연결시킨다.

웹 스톰 상단에 보면 Run/Debug Configurations를 설정할 수 있는데, 'Android'로 바꾼다. (프로젝트 생성 시에 이미 Android와 iOS가 설정되어있다.)

그리고 옆의 초록색 화살표 아이콘을 클릭하여 run 한다.

그러면 다음과 같은 내용이 콘솔 창에 뜬다.

이제 안드로이드 스튜디오를 켜서  File - Open을 클릭하여 리액트 네이티브와 연결되어 있는 프로젝트를 열자. 

practice1 폴더 안에 android를 열면 된다.

다음과 같이 안드로이드 스튜디오가 열린다.

똑같이 초록색 화살표를 눌러 run 해주면 연결된 안드로이드 디바이스에서 앱이 생성된다!

안드로이드 디바이스와 연결하기 - 두 번째 방법

이 방법은 다소 간단하다.

웹 스톰 터미널 창에 react-native run-android 를 입력하면 된다.