리액트 네이티브(React Native) 빠르게 시작하기 (feat. Expo)

리액트 네이티브(React Native)

리액트가 웹 서비스를 만들기 위한 것이었다면 리액트 네이티브는 iOS, 안드로이드와 같은 모바일 네이티브 서비스를 만들기 위한 것이라 할 수 있어요. 그래서 iOS, 안드로이드를 따로 만들 필요 없이 하나만 만들어도 되는 장점이 있어요. 본격적으로 리액트 네이티브를 시작하기 전에 하나를 짚고 넘어가려고 해요.

 

Expo

파이썬 장고(Django) 에서는 django-admin 명령어를 사용하면 어플리케이션에 필요한 파일들을 알아서 만들어줘요. 루비온레일즈는 rails generate 를 하면 되요. 리액트에서는 create-react-app 이라는 좋은 친구가 있었어요.

 

리액트 네이티브도 그런 친구가 있어요. 바로 Expo 에요.

Expo

Expo 는 리액트 네이티브 어플리케이션을 만들 때 빠르고 쉽게 앱을 만들 수 있도록 해요. 처음 기본 파일들을 생성해주는 것 뿐 아니라 에뮬레이터나 실제 기기에서 테스트를 할 수도 있게 해줘요. 이 글에서는 이 Expo 를 이용해서 리액트 네이티브 앱을 빌드하고 테스트하기로 해요.

 

리액트 네이티브 시작하기

먼저 Expo 를 설치해요. Expo 설치를 위해서는 Node.js 와 npm 이 설치되어 있어야 해요.

$ npm install -g expo-cli

설치가 끝나면 Expo 를 이용해서 리액트 네이티브 프로젝트를 만들어요.

$ expo init [프로젝트이름]

그러면 처음에 blank 프로젝트로 할 건지, Typescript 프로젝트로 할 건지 등을 물어봐요. 전 처음이니까 blank 로 했어요. 선택하고 나면 프로젝트 폴더가 생성되요.

 

아직 아무 코드도 입력하지는 않았지만, 앱을 빌드해봐요. npm start 말고 yarn start 도 상관없어요.

$ npm start

그러면 이상한 http://localhost:19002/ 라는 곳으로 이동할거에요.

여기서 빌드한 앱을 테스트해 볼 수 있어요. 왼쪽에 보면 여러 메뉴가 있어요. 만약 맥북을 사용한다면 Xcode 에뮬레이터를 사용해서 빌드한 앱을 실행해볼 수 있어요. 윈도우나 리눅스는 AndroiStudio 를 사용해서 실행할 수 있어요. 스마트폰에서 Expo 앱을 다운받으면 휴대폰으로도 테스트할 수 있어요.

 

Expo 는 문서가 잘 정리되어 있는 편이에요. 여기를 참고해요.

Guides to get things done - Expo Documentation

API Reference - Expo Documentation