[React Native] 시작하기(Setup)

공식 문서에 적힌 방법 그대로 따라할 예정

Setting up the development environment · React Native

환경 설정 및 설치

React Native로 개발을 할 때 두 가지 방법이 있음

• Expo Go
• React native CLI

만약 모바일 개발이 처음이라면 Expo Go를 사용하는 걸 추천!

(나도 처음이니까 Expo Go를 선택)

My PC Environment

• Device: Macbook Pro (M1)
• OS: Ventura - Version 13.4.1 (22F82)
• Node: v18.16.1

1. Node.js 설치

무조건 최신 버전의 LTS를 설치!

다운로드 | Node.js

node -v
# v18.16.1

2. XCode

iOS 시뮬레이터를 실행하기 위해 필요

3. Android Studio Emulator (optional)

안드로이드 시뮬레이터를 실행하기 위해 필요

Android Studio Emulator

(여기선 iOS만 할거라 설치 안함)

4. Expo 앱 (optional)

Expo앱을 실제 사용하는 폰에 설치하면 폰에서 직접 확인할 수 있음

동일한 와이파이에 연결되어 있다면 코드 수정이 실시간 반영도 됨

‎Expo Go

---

Project 생성하기

create-expo-app을 사용해서 프로젝트 생성

1. yarn을 사용하는 경우

yarn create expo-app AwesomeProject

cd AwesomeProject
yarn expo start

⚠️ **만약 yarn으로 설치했는데 에러가 난다면?**

Node.js 버전이 16.10 이상이라면 npm을 사용하는 걸 추천

(corepack으로 제공되는 yarn은 에러가 발생하는 듯?)

내 환경에서는 yarn add에서 에러가 발생

무조건 yarn을 사용하고 싶다면?

먼저 .gitignore 파일에 .yarn 를 추가

생성된 프로젝트 폴더 안의 root 경로에 빈 yarn.lock 파일을 생성

아래 명령어 실행

yarn add

QR코드와 함께 위와 같은 화면이 나오면 프로젝트 생성 성공!

2. npm을 사용하는 경우 (추천)

💡 **expo-cli**

이전에는 expo-cli를 글로벌로 무조건 설치해야 했지만, 최신 버전의 Expo에서는 npx를 사용해서 명령어를 입력할 수 있음

# 예시
npx expo start

프로젝트 생성을 위해 아래의 명령어 실행

npx create-expo-app npm-app

cd npm-app
npx expo start

만약 typescript 베이스로 만들고 싶다면? --template 을 뒤에 붙여주면 됨

npx create-expo-app <프로젝트이름> --template

예제 코드를 보기 위해서 Navigation(Typescript)을 선택

---

프로젝트 실행

위에서 생성한 navigation-app 프로젝트를 실행 해보자

npx expo start 혹은 yarn expo start 를 실행하면 아래와 같은 화면이 나옴

여기서 원하는 환경으로 열어보면 됨

• w: 웹으로 열기
• i: iOS 시뮬레이터로 열기
• QR코드 스캔: 폰에서 열기

app > tabs > index.tsx 에 코드를 변경해보면서 달라지는 화면을 확인해보자!

소감

• 시뮬레이터 설치를 해야하는게 조금 귀찮다
  (시뮬레이터 없이 할 수 있는 방법이 있긴 하지만 코드 반영이 조금 오래 걸리는 느낌)
• 처음에 yarn 때문에 고생을 했다.. 맘편히 npm을 사용하자
• 코드를 제대로 보지는 않았지만, React를 해봤다면 어렵지않게 따라할 수 있을 듯하다 (Next.js와 비슷한 느낌?)