React Native 프로젝트는 어떻게 구성되나요?

Question

Accepted Answer

React Native 프로젝트는 **JavaScript/TypeScript 코드**와 **네이티브 iOS/Android 프로젝트** 및 설정을 결합한 구조를 가집니다. 구조와 주요 파일을 이해하면 React Native 앱을 탐색하고 만드는 데 도움이 됩니다.

## 구조의 주요 부분

```text
my-app/
  App.js / App.tsx       → 루트 component (앱 진입점)
  src/ (또는 app/)        → JS/TS 코드 (component, screen 등) — 여기에 정리
  package.json           → 의존성과 스크립트 (npm/yarn) — 여느 JS 프로젝트와 같음
  node_modules/          → 설치된 npm 의존성
  ios/                   → 네이티브 iOS 프로젝트 (Xcode) — bare RN용
  android/               → 네이티브 Android 프로젝트 (Gradle) — bare RN용
  index.js               → 루트 component 등록
  app.json / app.config  → 앱 설정 (이름, 아이콘) — 특히 Expo에서
  (Expo 프로젝트는 ios/android를 숨김; Expo가 관리)
```

## JavaScript 생태계

```text
→ package.json → 의존성 (React Native, navigation, 라이브러리) + 스크립트
→ npm / yarn → 패키지 설치 (npm install); 방대한 npm 생태계 사용 가능
→ Metro → React Native의 JavaScript 번들러 (앱용 JS 번들링)
→ Babel → 최신 JS/JSX/TypeScript 트랜스파일
```

## 코드 정리

```text
→ src/를 폴더로 정리 (일반적):
  src/components/ (재사용 UI), src/screens/ (화면 component),
  src/navigation/, src/services/ (API), src/hooks/, src/utils/, src/store/ (state)
→ 앱이 커질수록 코드를 정리 (기능별 또는 유형별 분리).
```

## 왜 중요한가

React Native 프로젝트가 어떻게 구성되는지 이해하는 것은 React Native 앱을 탐색하고, 만들고, 정리하는 데 필요한 실용 지식이므로 유용한 기초 지식입니다.

**주요 부분** — **App.js/App.tsx가 루트 component**(진입점)이고, **JS/TS 코드가 `src/`에** 있으며(대부분의 시간을 보내는 곳), **package.json**이 의존성과 스크립트를 관리(여느 JavaScript 프로젝트와 같음)하고, **네이티브 `ios/` 및 `android/` 프로젝트**가 존재(bare React Native용이며, Expo는 이를 관리)한다는 것 — 을 아는 것은 JavaScript 코드와 네이티브 프로젝트를 결합한 React Native 프로젝트에서 길을 찾는 데 필요합니다.

**JavaScript 생태계** 측면을 이해하는 것은 중요합니다. React Native 프로젝트는 의존성에 **package.json과 npm/yarn**을 사용(방대한 npm 생태계 사용 가능 — 큰 장점)하고, **Metro**(React Native의 번들러)와 Babel을 사용합니다 — React Native 개발이 익숙한 도구를 사용하는 JavaScript 개발임을 반영하며, 웹 개발자에게 가치가 있습니다.

**코드 정리** 방법(`src/`를 기능별 또는 유형별 폴더로 구성 — component, screen, navigation, service, hook, util, store)을 이해하는 것은 앱이 커질수록 유지보수 가능한 프로젝트를 위한 좋은 관행을 반영합니다.

React Native 작업에는 프로젝트 구조 탐색(JS 코드와 네이티브 프로젝트), package.json과 npm을 통한 의존성 관리, 번들러 이해, 코드 정리가 필요하고, 이 지식이 어떤 React Native 개발에든 필요한 실용 기초이므로 — 주요 파일, JavaScript 생태계, 코드 정리와 함께 — React Native 프로젝트가 어떻게 구성되는지 이해하는 것은 가치 있는 기초 실용 지식입니다. 앱을 만들고 유지보수하는 데 필요하며, 특히 JavaScript/npm 생태계에 익숙한 개발자에게 접근하기 쉬운 기본 역량입니다.