[Expo + React Native] 1. 프로젝트 초기 구조 완벽 이해

1. 프로젝트 목표

이번 포스팅에서는 Expo + React Native를 이용해 앱 프로젝트를 완전히 초기화하고,
필요 없는 파일 제거 + 폴더 구조와 주요 파일 역할을 이해하는 것을 목표로 합니다.

스플래시 화면은 제외하고, 초보자가 폴더/파일 역할을 이해할 수 있도록 정리합니다.

 

1️⃣ 환경 준비

1-1. Node.js 설치 확인

node -v
npm -v

 

• 권장 Node.js 버전: LTS (예: v20.x)
• 만약 오류가 나면 nvm 사용하여 설치:

nvm install --lts
nvm use --lts

 

1-2. Expo CLI 설치 확인

최근 Expo는 npx create-expo-app 사용을 권장합니다.

npx create-expo-app --version

 

기존에 expo-cli 설치되어 있어도 이제 npx 사용이 공식 권장

---

2️⃣ 프로젝트 생성

2-1. 새 프로젝트 만들기

npx create-expo-app JJIK-F

템플릿: blank (TypeScript) 추천

설치가 완료되면 프로젝트 폴더로 이동:

cd JJIK-F

2-2. 실행 확인

npx expo start

 

브라우저에서 Metro Bundler가 열림

QR 코드로 iOS / Android 앱 미리보기 가능 

---

3️⃣ 불필요한 파일 삭제

초기 템플릿에는 샘플 코드와 예제 파일이 들어 있음.
초보자는 지워서 깔끔하게 시작하는 걸 추천.

 

3-1. 삭제 목록

rm -rf app/(tabs) app/modal.tsx
rm -rf components/* services/* utils/* store/*
rm README.md package-lock.json expo-env.d.ts eslint.config.js

3-2. 남겨야 하는 필수 파일

• app/_layout.tsx
• app/index.tsx
• package.json
• app.json
• tsconfig.json
• assets/

---

4️⃣ 폴더별 역할 

폴더/파일	역활
app/	화면(Screen) 단위, 라우팅 경로 관리
_layout.tsx	전체 레이아웃, 공통 네비게이션
index.tsx	첫 화면, 앱 진입점
assets/	이미지, 폰트 등 정적 자원
components/	재사용 UI 컴포넌트
services/	서버/API 요청 관리
store/	전역 상태 관리
utils/	공통 유틸 함수
package.json	라이브러리/스크립트/의존성 관리
app.json	Expo 앱 설정
tsconfig.json	TypeScript 설정
node_modules/	설치 라이브러리

 

---

5️⃣ 핵심 파일 역할

5-1. _layout.tsx

import { Stack } from "expo-router";

export default function RootLayout() {
  return <Stack />;
}

 

모든 화면의 공통 구조 담당

Stack Navigation으로 화면 전환 관리

탭/헤더 등 공통 요소 포함 가능

 

5-2. index.tsx

import { View, Text } from "react-native";

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

 

앱 진입 화면

_layout.tsx 안에 포함되어 최초로 표시

온보딩, 홈 화면 등 라우팅 연결 가능

---

6️⃣ 폴더 생성 (초기화 기준) 

mkdir components utils services store

 

앞으로 컴포넌트, 유틸, API, 상태관리를 여기에 모아 관리

---

 7️⃣ 프로젝트 실행

루트 폴더에서 실행:

npx expo start

QR 코드 스캔 → iOS / Android에서 앱 확인

앱 실행 후 화면이 깨끗하게 “Hello! Expo App” 표시됨

---

8️⃣ 프로젝트 구조 최종 정리

JJIK-F/
 ├── app/
 │   ├── _layout.tsx
 │   └── index.tsx
 │
 ├── assets/
 │   └── images/
 ├── components/
 ├── services/
 ├── store/
 ├── utils/
 ├── package.json
 ├── app.json
 ├── tsconfig.json
 └── node_modules/