프로젝트 구조

이 장에서는 Expo 프로젝트와 Community CLI 프로젝트가 어떤 파일로 이루어지는지, 앱의 진입점은 어디인지, 앱 이름·아이콘·권한 같은 설정은 어디에 두는지 살펴봅니다.

Expo 기본 템플릿

npx create-expo-app@latest로 만든 프로젝트는 대략 다음과 같습니다. 세부 파일은 Expo SDK 버전과 템플릿에 따라 조금씩 다르고, 템플릿에 따라 app/ 대신 src/app/을 쓰기도 합니다.

my-app/
  app/                 화면(라우트) 파일
    _layout.tsx        루트 레이아웃
    (tabs)/
      _layout.tsx      탭 내비게이터
      index.tsx        첫 번째 탭(/)
      explore.tsx      두 번째 탭(/explore)
  assets/              이미지 · 글꼴
  components/          재사용 컴포넌트
  constants/           색상 같은 상수
  hooks/               사용자 정의 훅
  app.json             앱 설정
  package.json
  tsconfig.json

package.json의 main 필드가 expo-router/entry로 되어 있어, 앱이 시작되면 Expo Router가 app/ 폴더를 읽어 화면을 구성합니다. 예제 화면을 지우고 빈 app/ 폴더로 시작하고 싶다면 템플릿에 들어 있는 npm run reset-project 스크립트를 실행합니다.

Expo Router의 파일 규칙

Expo Router는 app/ 폴더 안의 파일 경로가 곧 화면 주소가 되는 파일 기반 라우터입니다.

레이아웃 파일은 그 폴더의 화면을 어떤 내비게이터로 보여 줄지 정합니다. 다음은 스택 내비게이터를 쓰는 루트 레이아웃입니다.

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "홈" }} />
      <Stack.Screen name="settings" options={{ title: "설정" }} />
    </Stack>
  );
}

라우터 없는 빈 템플릿(--template blank-typescript)을 고르면 App.tsx가 루트 컴포넌트이고, index.ts가 registerRootComponent(App)으로 그것을 등록합니다.

app.json과 app.config

앱 이름, 아이콘, 스플래시 화면, 번들 식별자, 권한, 설정 플러그인은 app.json의 expo 항목에 적습니다.

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "ios": { "bundleIdentifier": "com.example.myapp" },
    "android": { "package": "com.example.myapp" },
    "plugins": ["expo-router"]
  }
}

환경 변수에 따라 값을 바꾸고 싶다면 app.config.ts(또는 app.config.js)를 씁니다. 이 파일은 app.json의 내용을 config 인자로 받아 고쳐서 돌려줄 수 있습니다.

import type { ExpoConfig, ConfigContext } from "expo/config";

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: process.env.APP_VARIANT === "development" ? "My App (Dev)" : "My App",
  slug: "my-app",
});

네이티브 폴더와 prebuild

Expo 프로젝트에는 처음에 android/와 ios/ 폴더가 없습니다. Expo는 CNG(Continuous Native Generation) 방식으로, 필요할 때 app.json과 설정 플러그인을 바탕으로 네이티브 프로젝트를 만들어 냅니다. npx expo run:android나 EAS Build가 내부에서 이 과정을 거치며, 직접 실행할 수도 있습니다.

npx expo prebuild
npx expo prebuild --clean

네이티브 폴더를 생성물로 보고 .gitignore에 넣어 두면 설정을 한곳(app.json)에서만 관리할 수 있습니다. 반대로 생성된 폴더를 직접 고치고 저장소에 커밋하면, 그 뒤로는 그 폴더를 직접 관리하는 방식이 되므로 app.json의 네이티브 설정 변경이 자동으로 반영되지 않습니다.

Community CLI 프로젝트

CLI로 만든 프로젝트에는 네이티브 폴더가 처음부터 들어 있습니다.

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => App);

정리

• Expo 프로젝트의 화면은 app/ 폴더의 파일 구조가 정하고, _layout.tsx가 내비게이터를 정합니다.
• 앱 설정은 app.json에, 동적인 설정은 app.config.ts에 둡니다.
• android/·ios/는 npx expo prebuild로 생성하며, 직접 관리할지는 팀이 정합니다.
• CLI 프로젝트는 index.js의 AppRegistry가 진입점이고 네이티브 폴더를 직접 관리합니다.