Expo로 시작하기

Date
Tags
Expo
부가 설명
간단하게 만들어볼 때 좋음.
분류
RN 프로젝트 세팅

Expo

첫 개발이라면 가장 쉬운 방법은 Expo CLI를 이용하는 것이다.
Expo는 React Native를 중심으로 만들어진 툴 세트.
⇒ 몇 분 안에 React Native 앱을 만들 수 있다.
필요한 건 최신버전의 Node.js와 phone 혹은 emulator만 있으면 된다.
 

Snack

어떤 툴도 설치하기 전에 웹 브라우저 상에서 React Native 코드를 테스트 해보고 싶다면 snack을 이용하자.
notion image
 

Expo CLI Quickstart

Node 12 LTS 혹은 상위버전이 설치된 상태라고 가정하면, npm 명령어 한줄로 Expo CLI 설치 가능.
$ npm install -g expo-cli
 
새로운 React Native project를 생성 및 열어보자.
(앱 이름을 AwesomeProject라고 가정)
#새로운 React Native project 생성하기
$ expo init AwesomeProject

#expo 프로젝트 열기
$ cd AwesomeProject #expo 프로젝트 경로로 이동을 먼저 해야함.
$ npm start # expo init 할 때 설치 패키지 이름 나옴. (아니면 그냥 expo start 해도 됨)
						# yarn start
						# npm start
						# expo start
expo init 할 때 어떤 패키지매니저로 설치했는지 나온다.
참고해서 start 하면 됨. (나는 yarn으로 설치됨)
notion image
notion image
 

모바일 기기에 Expo Client 설치하기

React Native로 작성한 앱이 실제 모바일 디바이스에 어떻게 실행될 지 바로 확인할 수 있게 해주는 앱이다.
  1. Expo Client를 모바일 기기에 설치한다. (android, iOS)
  1. 개발중인 컴퓨터와 모바일 기기를 동일한 와이파이에 둔다.
  1. QRCode를 스캔해서 바로 연동한다.
      • 안드로이드는 Expo Client에 Scan QR Code 기능 있음
      • iOS는 QR코드 스캐너가 내장되어 있어 일반 Camera 앱으로 갖다 대면 됨.
Android - Expo Client
notion image
iOS - 기본카메라 앱
notion image
 
 

소스코드 편집

App.js 열어서 맘대로 편집하면 됨.
변경사항을 저장할 때마다 자동으로 reload 되어 즉각 반영된다.

끝!

 

그 외 참조사항

Expo 도큐먼트 : https://docs.expo.io/
Expo 포럼 : https://forums.expo.io/
Expo의 한계 : https://docs.expo.io/versions/latest/introduction/why-not-expo/
이슈 사항
 

한계

서드파티 모듈, 네이티브 코드 통합 불가

Expo 사용시 우리는 어떠한 네이티브 코드도 만들지 않기 때문에, 엑스포 클라이언트 앱에서 제공하는 Components와 React Native API를 넘어서는 커스텀 네이티브 모듈을 포함할 수 없다.
 

Expo 사용 도중 native 코드가 필요하다면 "eject"

own native code 등을 포함해야하는 경우라도 Expo는 좋은 시작점이 될 순 있다.
정말 커스텀 네이티브 코드나 서드파티 모듈이 필요한 시점에 "eject"를 통해 react-native-cli 형태의 프로젝트로 뽑아낼 수 있다.
 

기존의 프로젝트에 통합하는 경우에는 Expo는 부적합

또한 이미 존재하는 프로젝트에 React Native 프로젝트를 통합하려는 경우라면 Expo는 적절한 선택지가 못된다. 바로 react-native-cli로 건너뛰자.