[React Native] React Native 프로젝트 구조 완벽 가이드: 시작부터 이해까지

모바일 앱 개발의 새로운 패러다임, React Native

React Native는 Facebook에서 개발한 오픈소스 프레임워크로, JavaScript를 사용해 네이티브 모바일 애플리케이션을 빌드할 수 있습니다.

단일 코드베이스로 iOS와 Android 앱을 모두 개발할 수 있다는 장점 덕분에 많은 개발자가 선택하는 도구로 자리 잡았습니다.

본 글에서는 React Native 프로젝트의 기본 구조와 각 구성 요소의 역할에 대해 알아봅니다.

출처: reactnative.dev

---

React Native 프로젝트의 기본 구조

1. 프로젝트 생성

React Native 프로젝트를 시작하려면 아래 명령어로 새 프로젝트를 초기화합니다.

npx react-native init MyProject

생성된 프로젝트 폴더는 다음과 같은 구조를 가집니다.

MyProject/
├── android/
├── ios/
├── node_modules/
├── App.js
├── package.json
├── babel.config.js
└── metro.config.js

2. 주요 폴더 및 파일 설명

• android/
  • 이 폴더는 Android 플랫폼을 위한 네이티브 코드와 설정을 포함합니다.
  • Gradle 빌드 스크립트와 AndroidManifest.xml 파일이 있으며, 앱 빌드와 배포에 사용됩니다.

Gradle 빌드 스크립트
  - Gradle이라는 빌드 자동화 도구를 사용하여 프로젝트를 빌드하는 과정을 정의하는 스크립트
  - 프로젝트를 어떻게 컴파일하고, 테스트하고, 패키징할지에 대한 모든 정보를 담고 있는 파일

• ios/
  • iOS 플랫폼의 네이티브 코드와 설정이 포함됩니다.
  • Xcode 프로젝트 파일(.xcodeproj)과 Info.plist 파일이 있어 iOS 앱 설정 및 빌드를 담당합니다.
• noded_modules/
  • 프로젝트 의존성이 설치되는 폴더로, React Native 및 기타 패키지가 여기에 저장됩니다.

프로젝트 의존성
  - 하나의 프로젝트가 다른 프로젝트나 라이브러리의 기능을 사용해야 할 때 발생하는 관계
  - 자신의 프로젝트를 완성하기 위해 다른 외부 요소에 의존한다는 것

• App.js
  • 프로젝트의 진입 파일입니다.
  • React Native 컴포넌트 기반으로 화면과 로직을 구성하는 역할을 합니다.

컴포넌트 기반
  - 소프트웨어 개발에서 복잡한 시스템을 작고 독립적인 단위인 컴포넌트로 나누어 개발하고 관리하는 방식
  - 김, 단무지, 햄 등으로 각종 재료를 활용하여 하나의 김밥을 만들 듯, 컴포넌트를 조합하여 시스템을 구성하는 것

import React from 'react';
import {Text, View} from 'react-native';

const App = () => {
  return (
    <View>
      <Text>Welcome to React Native!</Text>
  	</View>
  );
};

export default App;

• package.json
  • 프로젝트 설정 및 의존성 관리 파일입니다.
  • npm 패키지 이름과 버전 정보, 스크립트 명령어 등이 포함됩니다.
• babel.config.js
  • Babel 설정 파일로, ES6+ 문법을 트랜스파일링하기 위해 사용됩니다.
• metro.config.js
  • React Native 번들링 도구인 Metro에 대한 설정 파일입니다.

번들링 도구
  - 여러 개의 작은 파일들을 하나의 큰 파일로 묶어주는 도구

3. React Native의 실행 원리

React Native는 JavaScript와 네이티브 코드를 브릿지(Bridge)를 통해 연결합니다.

JavaScript에서 작성한 UI 및 로직은 Android와 iOS에서 네이티브 컴포넌트로 변환되어 실행됩니다.

---

React Native 프로젝트 구조의 이해와 활용

React Native의 기본 구조를 이해하면 프로젝트 관리와 디버깅이 훨씬 수월해집니다.

특히 iOS와 Android 네이티브 파일을 활용해야 할 때 구조를 정확히 파악하고 있으면 효율적으로 작업할 수 있습니다.

프로젝트를 생성하며 이 구조를 익히는 것을 추천합니다.