[React Native #02] Expo 프로젝트 생성

현재 날짜 기준(2024.02.23)으로 작성된 글입니다. 버전이 다를 수 있는 점 참고 바랍니다.

이전 글 보러가기 👉 [React Native #01] React Native란 무엇일까

[React Native #01] React Native란 무엇일까

---

[React Native #02] Expo 프로젝트 생성

1-1. Visual Studio Code 설치

Visual Studio Code는 국내에서 가장 많이 사용되고 있는 무료 코드 에디터입니다. 아래 사이트를 방문하여 다운로드를 해주세요.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

1-2. node.js 설치

https://nodejs.org/en

Node.js

왼쪽 버전(Recommended For Most Users) 클릭 후 설치

2. 프로젝트 생성 명령어 입력

아래 공식 문서에 따라 진행하면 됩니다.

[VS Code에서 프로젝트 열어 터미널 띄우기]

파일 → 프로젝트 생성할 부모 폴더 열기(또는 미리 생성한 프로젝트 폴더 열기) → 폴더명 오른쪽클릭하여 '통합 터미널에서 열기' 선택

https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

yarn create expo-app rnproject
cd rnproject
yarn expo start​

 

expo를 설치하면 프로젝트 아래에 기본 세팅되는 폴더들을 확인하실 수 있습니다.

source tree

rnproject
├─ .expo
├─ .gitignore
├─ App.js
├─ app.json
├─ assets
├─ babel.config.js
├─ package.json
└─ yarn.lock

• assets: 이미지같은 미디어 파일
• package.json: 패키지 파일 정보가 담겨있는 dependencies 파일
• babel.config.js: 코드가 내부적으로 어떻게 변하는지 설정
• app.json: RN의 설정과 실행 방식을 구성(배경색, 앱이름..)
• App.js: 첫번째 코드 파일

3. 모바일에서 실행해보기

앱스토어 또는 플레이 스토어에서 'Expo Go'(Android는 'Expo')앱을 설치해줍니다.

카메라앱을 열고 expo 실행 후 VSC터미널에서 출력된 QR코드를 그대로 스캔해주시면 expo앱과 연동되어 연동된 미리보기화면이 나옵니다.

실행 화면