React Native - React Native 프로젝트 기기에 실행시키기


까먹기 전에 React Native 프로젝트를 real device(기기를 usb)로 연결해서 실행시키는 방법을 정리하려고 한다.

우선 emulator를 사용하지 않고 real device를 사용하는 이유는 real device를 사용할 때 emulator를 사용하는 것보다 빠르다는 점에 있다.

  1. 프로젝트를 처음 다운 받았을 경우

우선 프로젝트를 저장한 디렉토리가 있을 것이다.

cmd의 cd 명령어를 이용해서 해당 디렉토리로 이동한다.

npm install 

명령어를 통해서 관련있는 node js project 모듈들 파일들을 다운받는다. 우선 이렇게 세팅을 마무리 한다.

  1. 프로젝트를 다운 받고 npm 세팅도 되어있을 경우

바로 여기서부터 시작하면 된다.

먼저 충전용 케이블이 아니라 디버깅용 usb로 기기를 컴퓨터와 연결한다.

그 상태에서 cmd창에

adb devices

라고 치면

image

와 같이 기기 이름 - device 형태로 연결된 기기의 목록이 나온다.

만약 아무런 기기도 뜨지 않았다면 연결이 되어있는지 다시 확인해봐야 한다. 연결이 다 되어 있는 것 같은데도 안 뜨는 경우가 있는데, 우선 연결되어 있는 것 같은 기기를 정말 내 컴퓨터가 인식하는 지 확인하기 가장 좋은 방법은 안드로이드 스튜디오를 통해 확인하는 것이다. 만약 안드로이드 스튜디오가 설치되어 있다면 안드로이드 스튜디오를 실행한 후 오른쪽 상단에 있는

image

의 저 ‘rn test’ 부분에 기기 기종이 떠 있는지 확인하면 된다. 나는 rn test라고 따로 명명한 emulator가 현재 떠 있지만 기기를 인식하면 그 기기의 기종이 뜰 것이다.

안드로이드 스튜디오는 단지 확인용일 뿐이고, 인식하게 하려면 핸드폰의 설정>개발자 옵션>(디버깅)USB 디버깅 을 껐다가 다시 키면 된다.

이 디버깅 모드를 끄고 다시 켰을 때 내 컴퓨터가 기기를 인식하지 않는 경우는 아직 없었다. 기기가 다시 인식되었는지 확인하려면 adb devices 커맨드를 통해 또 확인하면 된다.

그러면 이제

adb -s ce05160582d1802104 reverse tcp:8081 tcp:8081

명령어를 입력해서 8081 포트로 기기와 연결할 수 있도록 한다. 이렇게 하면 원래 npx react-native start를 했을 때 emulator가 열리던 것을 연결된 기기로 실행할 수 있게 해주는 것이다.

저 위의 ce어쩌구04 부분에는 위에서 확인했던 기기 이름을 넣어주면 된다.

그러면 이제 연결 세팅은 다 된 것이다.

이제 프로젝트를 실행시켜보자.

npx react-native run-android

커맨드를 입력하면 굉장히 복잡하고 많은 것들이 쭉쭉 출력되면서 (시간이 좀 소요된다)

image

위와 같은 새로운 리액트 서버용 커맨드 창이 뜨고, 원래 실행시키던 커맨드 창에서

image

이렇게 뜨면 기기에 앱이 설치되어 있을 것이다.

간혹 image 이렇게 뜨는 경우도 있는데,

가끔 실행시킬때 한 두 번쯤 안되는 경우가 있어서 사소한 문제/실행 도중의 문제라면 다시 npx react-native run-android를 실행시키면 잘 될 것이다.