📱 33. React Native 완전 입문 — Expo vs CLI, 어떻게 시작해야 할까?

---

React를 공부하다 보면 어느 순간,
“이걸로 모바일 앱도 만들 수 있을까?”라는 생각이 든다.

그때 등장하는 기술이 바로 React Native다.
React로 네이티브 앱(Android, iOS)을 만들 수 있게 해주는 프레임워크다.

근데 막상 시작하려고 보면 두 가지 길이 나온다.

1. Expo로 시작하기
2. React Native CLI로 시작하기

이번 글에서는 두 방식의 차이와
어떤 상황에서 어떤 도구를 선택해야 하는지,
그리고 기본적인 구조와 실행 방법까지 정리해봤다.

---

✅ React Native란?

React를 이용해 iOS/Android 앱을 동시에 개발할 수 있는 프레임워크

• 같은 코드로 두 플랫폼을 모두 커버 가능
• 네이티브 컴포넌트를 직접 조작하지 않아도 됨
• 단, 브라우저 기반이 아니기 때문에 웹과는 다른 환경이다

---

🚀 Expo vs React Native CLI 차이

항목	Expo	React Native CLI
설정	매우 간단	복잡 (Android/iOS 환경 직접 세팅)
실행	웹처럼 바로 실행 가능 (npx expo start)	Android Studio / Xcode 필요
빌드	Expo 서버에서 빌드 가능	직접 빌드 설정 필요
네이티브 코드 수정	❌ 안 됨 (eject 필요)	✅ 자유롭게 가능
앱 크기	약간 큼	최적화 가능

---

🧩 언제 Expo를 쓰면 좋을까?

✅ 빠르게 앱을 만들어보고 싶을 때
✅ 디자인 위주, 기능이 가벼운 앱
✅ 팀원이 모바일 개발 경험이 적을 때
✅ Expo SDK 안에서 제공하는 기능만으로 충분할 때

---

🧑‍💻 언제 React Native CLI를 써야 할까?

✅ 네이티브 모듈을 직접 연결해야 할 때
✅ 기존 앱에 RN을 붙이려는 상황 (Hybrid 앱)
✅ Android/iOS 플랫폼에 특화된 기능이 필요할 때
✅ 앱 사이즈, 성능 최적화가 중요한 상황

---

🔧 설치 및 실행 예시 (Expo 기준)

npm install -g expo-cli
npx create-expo-app myApp
cd myApp
npx expo start

• 브라우저에서 QR코드 띄움
• 핸드폰에 Expo Go 앱만 있으면 바로 실행 가능!

---

📂 기본 프로젝트 구조

myApp/
├── App.tsx          // 메인 컴포넌트
├── assets/          // 이미지, 폰트 등 정적 자산
├── components/      // UI 컴포넌트
├── screens/         // 페이지 단위 화면
├── app.json         // 앱 설정

• React랑 비슷하지만, 실제 HTML 태그가 아닌 네이티브 컴포넌트를 사용
• ex: <View>, <Text>, <ScrollView>, <Button> 등

---

📝 내가 느낀 점

처음에 CLI로 시작하려다 설치부터 너무 어렵고 복잡해서 좌절했다.
그런데 Expo를 써보니 바로 앱 화면이 보이고
React 개발자라면 익숙한 방식으로 빠르게 MVP를 만들 수 있다는 점이 너무 좋았다.

나중에 네이티브 기능이 필요할 때는 eject도 가능하니
일단은 Expo로 시작하는 걸 강력 추천!

---

📦 “모바일 앱도 이제는 React처럼 개발하자. 시작은 Expo로!”

---