[RN 강의] Expo로 앱 띄우기

 

React Native를 업무에서 만나 시작을 하게 되었다. RN 강의 시리즈는 제로초(조현영)님의 React Native 강의을 정리하는 글이며, 해당 강의는 RN 0.79 버전을 기반으로 스레드를 클론 코딩을 진행한다. 공식문서를 따라하거나 AI에게 물어보면서 공부를 할 수도 있지만, 강의를 통해 제로초님의 경험을 전수 받아보자.

 

강의 실습 환경

• Window 11
• Cursor IDE
• Expo SDK 53
• React Native 0.79 (TypeScript)
• Node 22

학습 자료

• 강의 노트
• 소스 코드

 

버전 선택

버전을 선택할 때 최신 버전에서 한 버전 낮춰서 개발을 하면 왠만하면 큰 문제는 없다.

이 강의 정리글은 React Native 0.79 버전으로 시작한다. (현재 2025.06.23 최신 버전은 0.80 버전)

 

Flutter vs React Native

React Native를 사용하는 이유

• React를 사용 (React Components, React Life Cycle, React 생태계)
• JS 개발자에게 언어적 부담이 없음 (Flutter는 Dart를 새로 배워야 함)
• 과도적인 시기가 지나 0.78 버전 이후로는 불편사항들이 많이 개선됨
• 앱 출시 관점에서도 안전성이 매우 올라갔음
• NPM 생태계를 지원하기 때문에 대부분을 패키지를 설치해서 사용할 수 있음

React Native를 깊게 공부하다 보면 Native 단을 공부해야 한다고 말했었다. Native 단에서는 언어가 통일되지 않아서 Android 진형에서는 Java, Kotlin, IPhone 진형에서는 Swift, Objective C를 다 했어야 했다. 이제는 Kotlin과 Switft 둘만 해도 되도록 통일이 되어 언어적인 부담도 줄어들었다. 요즘은 ChatGPT와 같은 AI 서비스가 발달이 되서 쉽게 문제를 해결할 수 있다. 그렇기 때문에 Raect Native 앱 개발을 추천한다. 성능이 매우 중요하고 Native 기능을 정말 많이 쓰지 않는다면 React Native로 개발이 다 가능하다. 더욱이 웹 개발자가 앱을 출시하기에는 Native 언어를 새로 배워서 개발을 하기 보다 React Native로 개발하는 것이 훨씬 빠르고 편리하다.

React Native가 한 때, 유지보수가 어렵다는 말이 있었다. 결국 커뮤니티의 힘과, React Native용 프레임워크 Expo의 관리 하에 제 2의 전성기를 맞이하고 있 다고 본다. React와 Next.js와 관계처럼 React Native는 Expo와 관계로 이해해 볼 수 있다. 요즘은 Next가 React에 관여를 많이 해서 React 19버전을 Next 팀과 함께 만들었는데, 이와 마찬가지로 React Native를 Expo 팀과 같이 만들고 있다. 이렇듯 프레임워크 쪽에 힘이 커지고 있다. 공식 문서에서도 프레임워크(Expo)로 시작하는 것을 추천하고 있다. Expo는 프레임워크이기 때문에 개발 환경 설정, 빌드 및 배포 과정을 단순화하고 긴급 패치에 용이한 코드 푸시 (code-push) 와 유사한 업데이트 기능을 제공하여 개발 효율성을 높여준. 특히 코드 푸시 기능은 React native (expo 지원) 앱에서 앱스토어 재심사 없이 빠르게 업데이트를 배포할 수 있게 하는 기능이다.

 

React Native 0.79 공식문서: Environment Setup

 

1. Expo 환경 설정

기존에 Expo를 생각하며 잦은 버그 발생이나 너무 큰 앱 사이즈를 걱정할 수 있다. 이제 Expo App은 3MB부터 시작하여 용량이 크게 문제가 되지 않으며, 용량이 뻥튀기가 되었다는 것은 프로젝트 내부 assets을 너무 큰 것을 넣었거나 안 쓰는 라이브러리까지 포함해서 배포했을 경우가 될 수 있다. 버그 또한 Expo가 React Native docs에서 공식적으로 쓰이는 만큼 버그 발생하더라도 빠르게 해결되고 있고, 버그 때문에 실행이 안되는 경우는 발생하지 않는다.

 

우선 되어야 하는 작업

• Cursor 또는 VSCode 설치
• Node LTS 버전 설치

React Native 최신 프로젝트 설치 (Expo 공식 홈페이지 참조)

Android Studio를 설치하고 개발환경 세팅을 Expo 공식 홈페이지를 참조한다. Expo의 환경을 Android Emulator > Development build >  ESA > Windows (set up android studio) 로 진행한다.

npx create-expo-app@latest threads
cd threads

 

환경변수 설정

안드로이드 스튜디오 More Actions > SDK Manager를 누르면 보이는 Adroid SDK Loaction을 복사해서 환경 변수 설정 및 탐색 경로에 추가한다

 

(1) 시스템 환경 변수 편집 > 고급 > 환경 변수 > 사용자 변수: 새로 만들기

SDK manager에서 경로 복사

환경 변수 ANDROID_HOEM 추가

 

(2) 시스템 환경 변수 편집 > 고급 > 환경 변수 > 시스템 변수 > path > 새로 만들기

사용자 변수에서 path 편집: 경로 추가 (Sdk, Sdk/platform-tools)

 

터미널을 pwsh인 환경에서 아래 명령어를 실행했을 때 아래 이미지와 같이 ADNROID_HOME이 나와야 한다.

# terminal: pwsh
Get-ChildItem -Path Env:

 

adb 명령어 실행 확인 (pwsh)

# terminal: pwsh
adb

adb 명령어가 정살 실행되었을 때 출력 결과

Android Studio 애뮬레이터 추가

Andriod Studio > More Actions > Virtual Device Manager > Create Vitual Device (+ 버튼) > Pixel 7 > API 36 "Baklava"

API 버전이 너무 최신이라면 옛날기기들 지원이 안될 수 있다. 현재 React Native가 지원하는 가장 낮은 API 버전은 24이고, 가장 높은 버전은 35버전이다. 그래서 적당히 낮은 33버전까지 지원되는 'Pixel 7' 을 선택한다. 세부 API 버전 설정에서는 최신의 API 36 "Baklava" 안드로이드 버전을 선택한다.

혹시 애뮬레이터가 실행이 안되고 바로 꺼진다면, 그대로 두고 다음 빌드 CLI 명령을 진행해보자. 빌드가 끝나고 QR 코드가 생성된 다음에서 애뮬레이터 설치와 관련된 질문이 추가적으로 나온 뒤에 설치가 완료 되었다.

 

EAS CLI (terminal 실행)

Expo 공식 홈페이지에서 회원가입을 선행하고, cli 를 통해 로그인을 수행한다. 이후 아래 명령어를 통해서 프로젝트를 설정 및 빌드한다. 마지막 빌드에는 10분 정도 시간이 소요된다.

# Install EAS CLI
npm install -g eas-cli

# Create an Expo account and login
eas login

# Configure your project (> All)
eas build:configure

# Create a build
eas build --platform=andriod --profile development

 

 

expo 빌드 완료

 

2. Expo 버전 올리기

Expo는 53.x 버전부터 React 19 버전을 사용한다. 52 이하의 버전을 업그레이드 해야 하는 경우를 다루어 본다. React native의 최신 소식은 공식 홈페이지의 Blog 탭에서 확인해볼  수 있다.

# expo 버전 업그레이트
npx expo install expo@53 # expo@next (최신버전)

# expo가 없다면 설치
npm i expo@53

# expo 관련 react 패키지 업데이트
npx expo install --fix

 

React 18 버전에서 19 버전으로 업그레이드를 하는 경우, React 18 버전과 과련된 에러가 발생할 수가 있다. 이 경우package.json에 아래 내용을 추가하고, react 관련된 패키지(@types, react-test-renderer) 버전을 19 버전으로 직접 수정해준다. package.json의 수정이 끝나면 시 패키지 업데이트 명령어를 실행해 준다.

"overrides": {
	"react": "19.0.0"
}

npx expo install --fix

 

Expo Go로 실행하기

패키지의 버전 업데이트 가 끝나면 package.json의 실행 명령어 w 정상적으로 프로젝트가 실행되는 지 확인해보면 된다. 수업에서는 기본적으로 앱을 실행할 때 expo로 실행되는 npm run andriod 명령어 사용한다.

  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "expo lint"
  },

 

만약 Expo Go로 실행하고 싶은데, 계속 development build 앱으로 실행된다면 npm run andriod 명령어로 실행한 다음 터미널 상에서 옵션 s(switch to Expo Go) 선택하고, 옵션 a (open android)를 차례로 선택해주자.

Expo Go를 사용하는 상태에서 옵션 a를 선택(입력)

3. 패키지 업데이트

Expo Go와 설치된 App의 차이

프로젝트를 실행해보면 애뮬레이터 내에서 두가지로 앱을 실행해 볼 수 있는데, 설치 앱 (devlopment build) 과 Expo Go 이다. 대부분의 경우 더 빠르기 때문에 기본적으로 Expo Go를 사용한다. 하지만 카메라, 센서, Background push 알림 기능 등의 (Android, iOS) Native 단을 건드려야 하는 기능부터는 Expo Go만으로 할 수 없기 때문에 설치되는 App을 사용할 것이다. 앞서 아래 명령어를 통해 빌드를 했던 것이 설치되는 App의 빌드 명령어이다.

eas build --platform=android --profile development

 

앞서 언급했지만, Native 단의 기능을 사용하기 이전에는 Expo Go로 실행하는 아래 명령어를 사용한다.

npm run android

 

앱 이름 변경하기

설치되는 앱 (development build)의 이름을 변경하고 싶은 경우 app.json 파일의 name과 slug를 변경하면 된다.

{
  "expo": {
    "name": "threads-clone",
    "slug": "threads-clone",
    "versi
    ...

 

앞으로 npm run andriod 명령어를 실행하고, 애뮬레이터 내부의 Expo Go를 통해 threads-clone을 실행할 것이다. 애뮬레이터에 따로 설치된 threads-clone 앱과는 빌드가 전혀 다른 별개의 앱이다.

 

패키지 업데이트

주기적으로 애뮬레이터 에러로 패키지 버전을 업그레이 하라는 내용이 터미널 상에서 에러 메시지가 출력된다. 이러한 경우 npm update를 사용할 경우에는 expo sdk와 안맞는 패키지 버전이 설치될 수 있다. 그렇기 때문에 애뮬레이터와 관련하여 패키지를 업데이트 할 경우에는 아래 명령어를 사용하도록 하자.

npx expo install --check # install:check

 

위 명령어는 expo sdk에 가장 호환이 잘 맞는 패키지 버전과 필요한 프러그인을 설치해준다.

 

애뮬에이터 연결 오류 해결법

adb 명령어를 통해서 애뮬레이터의 상태를 체크하고 절적한 조치를 취해준다.

# 애뮬레이터 상태 체크
adb devices

# 애뮬레이터 상태가 offline 인 경우
adb kill-server
adb start-server
adb devices

# 그래도 offline인 경우
adb -s [애뮬레이터 이름] emu kill
adb devices
npm run android

# 애뮬레이터 상태가 "device" 라면 정상

 

그래도 애뮬레이터 연결이 안되는 경우에는 안드로이드 스튜디오를 열어서 해결한다. 애뮬레이터의 캐시 데이터를 모두 날린 후에 다시 실행해서 초기화를 하는 수 밖에 없다. 그러면 프로젝트의 터미널에서 다시 npm run android 명령어를 실행하면 Expo Go와 빌드를 다시 수행한다. 

android studio > More Actions > Virtual Device Manager > 애뮬레이터 디바이스 상세보기 > Wipe Data 클릭

 

 

 

 

>>> 다음 내용: 웹 개발과 유사한 Expo 앱 개발