React Native with Expo Router: .tsx, 라우팅, 그리고 npm

🧁 개요

Expo로 앱 개발을 시작하려는 분들 중 많은 사람들이 여전히 App.js 기반의 구형 구조에 머물러 있습니다.

하지만 2025년 현재, Expo는 expo-router와 TypeScript 기반 .tsx 구조를 중심으로 발전 중이며, 더 빠르고 유연한 앱 개발을 가능하게 해줍니다.

이번 글에서는 제가 실제로 겪은 시행착오를 바탕으로:

• .tsx를 사용하는 최신 Expo Router 구조 소개
• 기존 App.js 방식과의 차이점
• npx create-expo-app 중 발생한 의존성 충돌 문제들

을 정리해보려 합니다.

 

---

1. 최신 Expo 프로젝트의 구조: .tsx와 expo-router

기본 특징

• .tsx 기반 TypeScript 프로젝트
• app/ 폴더 기반 자동 라우팅
• expo-router 사용으로 Next.js 스타일 파일 라우팅 지원
• App.js는 없음

기본 폴더 구조 예시

pgsql
CopyEdit
just-time-app/
├── app/
│   ├── index.tsx          ← 홈 화면
│   ├── Do.tsx             ← Do 페이지
│   └── _layout.tsx        ← 공통 레이아웃
├── tsconfig.json
├── babel.config.js
├── package.json

 

✅ 각 파일은 URL처럼 자동으로 라우팅됨 (/Do, /settings, 등)

 

2. 🤔 기존 App.js 구조와의 차이

항목 구형 방식 (App.js) 최신 방식 (expo-router)

진입점	App.js	app/index.tsx
라우팅	수동 설정 (Stack.Navigator)	파일 기반 자동 라우팅
확장성	복잡한 구조 필요	폴더 구조로 간단히 구성
타입 지원	JS 기반, 타입 직접 지정	TS 기반, 타입 자동 추론
감성	오래된 튜토리얼들과 친함	최신 프로젝트들과 친함

✅ expo-router는 실제로 Expo 공식 문서에서도 기본 구조로 점점 채택되고 있음.

---

3. 💣 npx create-expo-app 설치 충돌과 npm 오류들

제가 겪었던 오류들은 다음과 같습니다.

 

1. t with-router 옵션 무시됨

npx create-expo-app just-time-app -t with-router

• ❌ 문제: 템플릿이 무시되고 App.js 기본 구조가 생성됨
• ✅ 해결: CLI가 구버전이었음 → @latest 명시 필요

npx create-expo-app@latest just-time-app -t with-router

---

2. npm install expo 했더니 의존성 지옥 시작됨

• ❌ 실수: 그냥 npm install expo 입력 → 최신 Expo가 강제로 설치됨
• 💥 결과: 기존 프로젝트의 react / react-native 버전과 충돌
• ✅ 해결법:

# 항상 이걸로
npx expo install react react-native

또는 전체 강제 초기화:

rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

 

 

3. react@16 vs react-native@0.78 충돌

• 문제가 된 항목:
  • react-router@4.3.1 ← 웹용 구버전이 끼어들면서 react@16 요구함
  • Expo는 react@18 이상을 요구
• 💣 결과: 설치 안 되고 dependency tree 충돌
• ✅ 해결: package.json에서 react, react-router 수동 제거 후 재설치

 

4. 🧠 나의 설치 성공 공식

# 최신 expo CLI부터
npm install -g create-expo-app

# 템플릿 지정
npx create-expo-app@latest just-time-app -t with-router

# 프로젝트 폴더 진입 후
cd just-time-app

# 모든 의존성 정리
rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

# 호환 버전으로 강제 설치
npx expo install react react-native