[React Native] 리액트 네이티브 프로젝트 만들기 (윈도우)

리액트 네이티브 프로젝트를 생성하는 방법은 Expo를 이용하는 방법과 리액트 네이티브 CLI를 이용하는 방법이 있다.

두 가지 방법 모두 시도해 볼 것이다.

 

 

1. Expo

https://expo.io

Expo

 

먼저 위의 Expo 웹사이트에서 회원가입 후 Expo 프로젝트를 진행한다.

 

expo는

• 최종적으로 완성된 프로젝트를 쉽게 배포 및 관리할 수 있도록 다양한 기능을 제공
• 아이폰과 안드로이드 폰이 있으면 해당 플랫폼의 테스트를 진행하며 개발 가능
• Expo에서 제공하는 API만 사용 가능하며 네이티브 모듈을 추가로 만들어서 사용하는 것이 불가능하다.
• 리액트 네이티브 CLI를 이용했을 때 빌드 파일의 크기가 크다.

 

(1) 설치

터미널 혹은 명령프롬프트(cmd)에서 명령어로 설치.

npm install --global expo-cli

그러면 어쩌고 저쩌고 많은 명령어들과 함께

이런 창이 나타난다.

 

설치가 완료되면 다음 명령어로 Expo 프로젝트를 생성한다. (생성 전에 나는 원하는 디렉토리로 이동했다.)

expo init my-first-expo

위의 명령어를 입력하면 어떤 프로젝트를 생성할 지 선택지를 제공하는데, 원하는 항목 선택. 나는 첫 번째 선택지인 blank를 선택했다.

 

 

(2) Expo 프로젝트 실행

 

프로젝트 생성이 완료되면 해당 프로젝트 폴더로 이동해서 프로젝트를 실행한다.

cd my-first-expo
npm start

결과

 

동시에 웹브라우저에서 Expo 개발자 도구 페이지가 열린 것을 확인 할 수 있다.

대충 이런 창이 뜬다

 

그 후 자신의 폰에서 Expo 애플리케이션을 다운받아 설치한다.

설치 후 위의 QR코드를 촬영하면 실제 기기에서 Expo 프로젝트를 실행 할 수 있다.

 

또는 안드로이드 에뮬레이터를 이용해서 화면을 확인 가능하다.

• 명령 프롬프트에서 a 를 입력하거나
• Expo 개발자 도구에서 왼쪽의 Run on Android device/emulator 를 클릭

 

나는 바로 클릭하니까 오류나서 안드로이드 스튜디오에서 에뮬레이터 한번 켜준다음에 실행하니까 됐다.

 

ctrl + M 누르면 다음과 같은 메뉴가 뜬다.

 

(3) 내보내기

프로젝트의 상황에 따라 네이티브 모듈을 건드리거나 다른 이유 때문에 CLI 프로젝트로 변경해야 하는 상황이 발생할 수 있다. 이 경우 eject 명령어를 이용해 해결할 수 있다.

하지만 다시 Expo 프로젝트로 돌아올 수 없다는 점에 주의해야한다.

 

 

 

2. 리액트 네이티브 CLI

• 필요한 기능이 있을 경우 모듈을 직접 만들어 사용할 수 있다.
• Expo에 비해 배포가 불편하고 리액트 네이티브를 처음 다루는 이용자에게 더 어렵게 느껴진다.

 

(1) 프로젝트 생성

npx react-native init MyFirstCLI

위의 명령어를 이용해 리액트네이티브 CLI프로젝트 생성.

 

대충 이런 화면이 나옵니다..

 

(2) 프로젝트 실행

생성을 완료했으면 프로젝트 폴더로 이동해서 프로젝트를 실행한다.

cd MyFirstCLI
npm run android

 

결과로는 리액트 네이티브가 실행되면서 터미널이 추가로 열리고 Metro가 실행됨을 확인 가능하다.

Metro는 리액트 네이티브를 위한 자바스크립트 번들러로서 리액트 네이티브가 실행될 때마다 자바스크립트 파일들을 단일 파일로 컴파일한다.

 

결과

이런 창이 실행되면 완성이다.

 

(sdk 설정 오류때문에 세팅하는데만 3일은 쓴듯...)