react-native

Expo 프로젝트 구조 한 번에 정리하기: 처음 열면 보이는 파일들 이해하기

mirabo01 2026. 1. 14. 09:50

Expo로 프로젝트를 생성하고 나면
생각보다 많은 파일이 한꺼번에 생긴다.

이 파일들… 다 써야 하나?
App.js만 보면 되는 거 아냐?
건드리면 안 되는 건 뭐지?

처음엔 구조를 정확히 이해하지 않아도
앱은 실행된다.
하지만 폴더 역할을 모르고 시작하면
조금만 커져도 금방 헷갈린다.

이 글에서는
Expo 프로젝트를 처음 열었을 때 꼭 알아야 할 구조만
실무 기준으로 정리한다.

이 글이 필요한 사람

  • Expo로 React Native 프로젝트를 처음 만든 경우
  • App.js 외에 뭐가 뭔지 헷갈리는 경우
  • 나중에 구조를 어떻게 나눠야 할지 감이 안 오는 경우

Expo 기본 프로젝트 구조 전체 보기

Expo 기본 템플릿을 생성하면
대략 이런 구조를 보게 된다.

my-app
├─ App.js
├─ app.json
├─ package.json
├─ assets/
├─ node_modules/
└─ babel.config.js

처음엔 전부 중요해 보이지만,
실제로 자주 만지는 건 일부다.

App.js – 앱의 시작점

가장 먼저 보게 되는 파일이다.

export default function App() {
  return (
    <View>
      <Text>Hello Expo</Text>
    </View>
  );
}
  • 앱이 실행되면 가장 먼저 렌더링되는 컴포넌트
  • 처음에는 거의 모든 코드를 여기서 시작한다

초반에는 App.js 하나로도 충분하다.
구조 분리는 익숙해진 다음 해도 늦지 않다.

app.json – 앱 설정 파일

app.json은
앱 자체의 메타 정보를 담는 파일이다.

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "version": "1.0.0"
  }
}

여기서 설정하는 것들:

  • 앱 이름
  • 앱 아이콘
  • 스플래시 화면
  • 앱 버전
  • 권한 설정 일부

⚠️ 주의

  • 자주 수정하는 파일은 아니다
  • 빌드나 배포 단계에서 중요해진다

package.json – 의존성 관리의 핵심

웹 개발을 해봤다면 익숙할 파일이다.

{
  "scripts": {
    "start": "expo start"
  }
}
  • 설치된 라이브러리 목록
  • 실행 스크립트 정의
  • 프로젝트의 기술 스택 정보

React Native든 Expo든
모든 시작과 끝은 package.json이라고 봐도 된다.

assets/ – 이미지, 폰트 보관소

정적인 리소스를 넣는 폴더다.

  • 이미지
  • 아이콘
  • 커스텀 폰트
<Image source={require('./assets/icon.png')} />

실제로 써보면
이미지 경로 정리는 초반부터 습관 들이는 게 좋다.

node_modules/ – 건드리지 않는 영역

  • 설치된 라이브러리 실제 코드
  • 자동 생성
  • 수정 ❌

문제가 생기면
삭제 후 재설치는 해도,
직접 수정하는 일은 거의 없다.

babel.config.js – 트랜스파일 설정

초반에는 거의 볼 일이 없다.

  • JavaScript 문법 변환 설정
  • 라이브러리 설정에 따라 간혹 수정

입문 단계에서는
“아, 이런 게 있구나” 정도면 충분하다.

언제 구조를 나누기 시작하면 좋을까

처음에는
App.js 하나로 시작하는 게 맞다.

하지만 이런 순간이 오면
구조 분리를 고민하면 된다.

  • 화면이 2개 이상 생겼을 때
  • 컴포넌트가 길어졌을 때
  • 재사용 UI가 보이기 시작할 때

보통은 이런 식으로 나눈다.

src/
├─ screens/
├─ components/
├─ hooks/
└─ utils/

이건 조금 익숙해진 다음 다룰 주제라
다음 글에서 따로 정리할 예정이다.

실무 기준으로 기억할 포인트

처음 Expo 프로젝트에서
진짜 중요한 건 이것뿐이다.

  • App.js → 앱의 시작
  • app.json → 앱 설정
  • assets → 이미지/폰트
  • package.json → 라이브러리 정보

나머지는
지금 당장 몰라도 개발은 가능하다.

정리

  • Expo 프로젝트 구조는 생각보다 단순하다
  • 초반엔 App.js 중심으로 개발하면 된다
  • 설정 파일은 “언제 쓰는지”만 알아두면 충분하다
  • 구조 분리는 익숙해진 뒤에 해도 늦지 않다

다음 글에서는
**React Native 기본 컴포넌트(View, Text, Image)**부터
본격적으로 화면을 만들어보려고 한다.