[리액트네이티브] npx create-expo-app my-new-expo-app 이렇게 플젝 생성했을 때 App.js가 안보이는 이유

Expo 최신 프로젝트에 App.js가 없는 이유

React Native + Expo 개발을 처음 시작할 때 대부분 App.js 파일을 열어서 화면을 수정하곤 합니다.
그런데 최근 Expo CLI(create-expo-app)로 프로젝트를 만들면, 루트에 App.js가 보이지 않아 당황하는 경우가 많습니다.

이번 글에서는 왜 App.js가 사라졌는지, 그리고 대신 어떤 구조를 사용해야 하는지 정리해 보겠습니다.

---

1. 예전 Expo 프로젝트 구조

기존 Expo(구버전) 템플릿은 루트에 App.js 파일이 있었고, 여기서 앱의 시작점을 관리했습니다.

my-app/ ┣ App.js ┣ package.json ┗ node_modules/

모든 화면은 App.js에서 네비게이션을 설정하거나 컴포넌트를 불러와서 구성했습니다.

---

2. 새로운 Expo 프로젝트 구조

Expo 49 버전 이후부터는 expo-router가 기본 포함된 템플릿이 제공됩니다.
이제는 루트에 App.js가 없고, app/ 디렉토리를 중심으로 파일 기반 라우팅을 사용합니다.

예시 구조:

my-new-expo-app/ ┣ app/ ┃ ┣ (tabs)/ ┃ ┃ ┣ _layout.tsx ┃ ┃ ┣ explore.tsx ┃ ┃ ┗ index.tsx ┃ ┣ _layout.tsx ┃ ┗ modal.tsx ┣ assets/ ┣ components/ ┣ package.json ┗ ...

여기서 중요한 점은:

• app/_layout.tsx → 앱 전체의 공통 레이아웃
• app/(tabs)/_layout.tsx → 탭 네비게이션 설정 (BottomTabNavigator 역할)
• app/(tabs)/index.tsx → 탭의 첫 화면 (예전 App.js처럼 시작 화면 역할)
• app/(tabs)/explore.tsx → 두 번째 탭 화면
• app/modal.tsx → 모달 화면

즉, 이제는 App.js 대신 폴더와 파일 이름이 곧 라우팅 경로가 됩니다.

---

3. 첫 화면 수정하기

예전처럼 App.js를 열 수는 없지만, 같은 효과를 내려면 app/(tabs)/index.tsx를 수정하면 됩니다.

 

// app/(tabs)/index.tsx
import { View, Text } from "react-native";

export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello Expo Router!</Text>
    </View>
  );
}

이렇게 하면 앱을 실행했을 때 첫 화면에 Hello Expo Router!가 표시됩니다.

---

4. 예전 스타일(App.js)로 만들고 싶다면?

만약 기존 구조(App.js 포함) 로 시작하고 싶다면 프로젝트 생성 시 --template blank 옵션을 주면 됩니다.

 

npx create-expo-app my-old-style-app --template blank

이 경우에는 루트에 App.js가 생기고, 이전 방식 그대로 코드를 작성할 수 있습니다.

---

5. 정리

• App.js가 없는 건 오류가 아니라 Expo의 새로운 기본 구조 때문입니다.
• 최신 Expo는 expo-router를 기반으로 파일 기반 라우팅을 지원합니다.
• app/(tabs)/index.tsx가 사실상 예전의 App.js 역할을 대신합니다.
• 예전 스타일을 원한다면 --template blank 옵션으로 생성하면 됩니다.

---

앞으로 Expo를 사용한다면 expo-router 구조를 익혀두는 것이 좋습니다.
Next.js처럼 폴더 = 라우트 구조라서, 프로젝트 규모가 커질수록 훨씬 관리하기 편리해집니다.