[React Native] 리액트 네이티브 프로젝트 만들기 (Expo CLI VS React Native CLI)

React Native 프로젝트를 시작하려면 환경 설정부터 구성한 후 프로젝트를 만들어야 합니다.

방식에는 대표적으로 Expo CLI 방식, React Native CLI 방식 두 가지가 있으며 구성 후 프로젝트 생성까지의 과정을 정리해보도록 하겠습니다.

 

 

Expo CLI / React Native CLI

두 도구 모두 React Native 프로젝트를 생성하고 테스트 장치 및 시뮬레이터에서 React Native 앱을 실행하며 React Native 앱을 빌드하여 앱 스토어에 제공할 수 있도록 돕는 도구입니다.

두 도구의 차이점을 알아보자면,

 

[Expo CLI]

1. 기본적으로 써드 파티 서비스를 사용함으로서 비용이 무료. (예 : 앱 생성)

2. Expo를 사용 시 CLI와 관리되는 앱 개발 워크 플로우가 생기게 되어 프로젝트 생성이 쉽고 코드 쓰기가 좀 더 쉬워짐.

즉, 카메라와 같은 기능들을 활용하는 게 더 쉬워지고 편리해짐.

3. Expo 사용 후 나중에 Expo 방식의 워크 플로우가 아닌 React Native 방식의 워크 플로우로 교체 가능.

 

 

[React Native CLI]

1. 베어본 React Native 개발 설정을 제공한다. (개발자 스스로 더 많은 구성과 셋업 작업을 수행해야 함)

2. 카메라나 기타 기능 사용과 같은 특정 기본 장치 기능들을 활용해야 하는 경우 Expo 방식에 비해서 수행해야 하는 작업이 많다.

3. 기본 순수 React Native 워크 플로우에는 기본 소스 코드와 통합하는 것이 좀 더 쉽다는 장점이 있다. (Java, Objective-C, SWIFT, Kotlin 등의 언어 코드와의 통합이 쉬움)

따라서 기타 언어들과의 통합하여 사용되는 환경일 경우 React Native CLI 를 사용하는 것이 좋을 수 있다.

 

 

위의 특징들을 살펴보았을 때 처음 React Native 프로젝트를 시작할 때는 때에 따라 워크 플로우를 교체할 수 있는 Expo를 기본적으로 선택합니다.

저도 이번 정리 과정에서는 Expo 방식으로 생성하겠습니다.

 

 

(1) 사이트 접속 후 React Native 프로젝트 시작 도구 선택

https://www.udemy.com/course/react-native-the-practical-guide/learn/lecture/31197316#notes

 

React Native 사이트에 들어가서 Get started 를 눌러줍니다.

 

 

Expo CLI

 

React Native CLI

각각 빠르게 설정하기 위한 목적을 가지고 있습니다.

Expo CLI 로 진행하겠습니다.

 

 

(2) React Native 프로젝트 생성

!! React Native 프로젝트를 생성하기 이전에 Visual Studio Code 프로그램을 설치하고, npm (node)가 설치되어 있어야 합니다.

 

저는 Expo CLI 방식으로 생성할 것이므로 위에서 확인한 npx create-expo-app {프로젝트 명} 명령어를 입력하여 Expo React Native 프로젝트를 생성합니다.

 

정상적으로 생성이 되었으면 Your project is ready! 라는 문구와 함께 npm run android, npm run ios, npm run web 과 같이 각 앱 플랫폼에 맞는 실행 명령어가 나오는 것을 확인할 수 있습니다.

 

 

cd {생성된 프로젝트 명} 명령어를 입력하여 해당 프로젝트로 진입합니다.

 

 

이제 npx expo start 명령어를 입력하면 React Native 프로젝트가 시작되면서 앱용 QR 코드가 생성된 것을 확인할 수 있습니다.

생성된 QR 코드를 지금 스캔해봤자 아무런 내용도 없을 뿐더러 접속도 할 수 없습니다.

 

 

또한 왼쪽에 프로젝트 구성 내용들이 생성되면서 무사히 프로젝트가 생성된 것을 확인할 수 있습니다.