Expo Router를 사용하는 파일 기반 라우팅 시스템 구조

Next js와 비슷한 Expo Router

 Expo Router를 사용하는 파일 기반 라우팅 시스템은 Next.js와 비슷한 방식으로 작동합니다. 전체적인 구조를 설명해드리겠습니다:
app/
├── _layout.tsx          # 모든 라우트에 적용되는 공통 레이아웃
├── index.tsx           # 메인 홈 화면 (/)
├── calculator/
│   ├── _layout.tsx     # 계산기 관련 화면들의 공통 레이아웃
│   ├── index.tsx       # 계산기 메인 화면 (/calculator)
│   └── history.tsx     # 계산 히스토리 화면 (/calculator/history)
├── settings/
│   └── index.tsx       # 설정 화면 (/settings)
└── modal/
    └── index.tsx       # 모달 화면

 

MyApp/
├── App.tsx                      # 앱의 메인 진입점
├── app.json                     # Expo 설정 파일
├── babel.config.js              # Babel 설정
├── package.json                 # 프로젝트 의존성
├── tsconfig.json               # TypeScript 설정
├── assets/                     # 이미지, 폰트 등 정적 파일
│   ├── icon.png
│   └── splash.png
├── src/
│   ├── components/             # 재사용 가능한 컴포넌트
│   │   ├── AdBanner.tsx       # 배너 광고 컴포넌트
│   │   └── InterstitialAd.tsx # 전면 광고 컴포넌트
│   ├── screens/               # 화면 컴포넌트
│   │   ├── HomeScreen.tsx     # 홈 화면
│   │   ├── DividendCalculatorScreen.tsx  # 배당계산기 화면
│   │   └── ETFListScreen.tsx  # ETF 목록 화면
│   ├── constants/             # 상수 정의
│   │   └── adUnitIds.ts      # 광고 ID 관리
│   └── utils/                 # 유틸리티 함수
│       └── adHelpers.ts       # 광고 관련 헬퍼 함수
└── android/                   # Android 네이티브 코드
    └── app/
        └── src/
            └── main/
                └── AndroidManifest.xml  # 광고 ID 설정 

 

이런 앱을 expo router로 바꾸면

 

MyApp/
├── app.json
├── babel.config.js
├── package.json
├── tsconfig.json
├── assets/
│   ├── icon.png
│   └── splash.png
├── app/
│   ├── _layout.tsx      # 루트 레이아웃
│   ├── index.tsx        # 홈 스크린 (/)
│   ├── dividend/
│   │   ├── _layout.tsx  # 배당 관련 레이아웃
│   │   └── index.tsx    # 배당계산기 화면 (/dividend)
│   └── etf/
│       ├── _layout.tsx  # ETF 관련 레이아웃
│       └── index.tsx    # ETF 목록 화면 (/etf)
├── src/
│   ├── components/
│   │   ├── ads/
│   │   │   ├── AdBanner.tsx
│   │   │   └── InterstitialAd.tsx
│   │   └── common/
│   │       └── Header.tsx
│   ├── constants/
│   │   └── adUnitIds.ts
│   └── utils/
│       └── adHelpers.ts
└── android/
    └── app/
        └── src/
            └── main/
                └── AndroidManifest.xml

 

이런식으로 된다