[React Native] 앱 개발 - 프로젝트 기본 구조

 

 

본문의 이미지들은 vcode(비쥬얼스튜디오 코드)에서 프로젝트 소스를 오픈한 예시

 

좌측은 Typescript templae 프로젝트로 생성된 앱의 폴더 구조로

React와 크게 다르지 않으며,

ios와 android를 위한 폴더와 파일들이 추가된다는 것이 다른 점입니다.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

1. index.js

리액트 네이티브 프로젝트의 시작 파일

(앱을 npx react-native run-android (Mac의 경우  npx react-native run-ios)로 수행할 경우 최초로 실행)

이 파일을 시작으로 리액트 네이티브의 자바스크립트 코드가 번들링(Bundling) 된다.

번들링(Bundling) 이란 "어떤 것들을 묶는다"라는 의미로 기능별로 모듈화 했던 자바스크립트 파일들을 묶어준다는 뜻이다.

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

• 리액트 네이티브는 AppRegistry.registerComponent를 사용하여 네이티브 브릿지에서 사용할 모듈을 지정 한다.
• registerComponent 함수의 첫 번째 매개변수(appName)는 모듈 이름을 지정하며
• 두 번째 매개변수에는 처음으로 랜더링(화면에 표시) 될 컴포넌트를 지정한다

---

2. App.tsx (또는 App.js)

아래 화면에 내용이 들어 있는 파일로

안드로이드 에뮬레이터 화면

 

 

react native 에서는 View, Button, Text 등 여러가지 기본 컴포넌트를 제공하며,

실제 디바이스에 표시되는 코드는 App.tsx (또는 App.js)에 작성되어 있고 App.tsx의 소스를 살펴보면

프로그램 코드와 컴포넌트가 XML 문서처럼 결합되어 있는 형태로 이를 JSX(Javascript XML)라 부른다

 

 

---

3. package.json

해당 파일은 프로젝트와 관련된 모듈들이 기록된 파일로

이를 통해 모듈들의 버전관리를 하게되며,
파일 내용의 중간에 dependencies 오브젝트를 보면 내가 설치한 추가 라이브러리 목록을 볼 수 있습니다

프로그램을 진행 하다 보면 설치한 npm 라이브러리들이 서로 충돌하고 앱 실행이 안되기도 하는 

경우가 있는데 이럴 때 이 폴더에 들어가 그동안 설치했던 라이브러리들을 확인하고 새로 설치할 수 있습니다

 

---

4. android 폴더

안드로이드 프로젝트가 담겨 있는 폴더로

안드로이드 네이티브 모듈을 담당하고 있는 부분입니다.

react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 합니다

혹은 npm 에 공개 모듈로 올려놓 은 것을 다운받아 사용할 수 있는데, 이를 사용하기 위해 서는 dependency 등을 설정해야 할 수 있습니다

주로 이러한 경우에 이 폴더 안에 있는 소스를 수정하게 되겠습니다

1) build.gradle
안드로이드 앱을 빌드 배포할때 사용하는 파일

2) app/src/main/res
안드로이드 앱의 아이콘 및 시작화면 등의 리소스들을 관리하는 폴더

3) app/src/java/com/앱이름/MainActivity.java, MainApplication.java
안드로이드 앱의 메인 파일

 

 

위 네가지 파일은 실제로 각종 안드로이드라이브러리를 설치 및 안드로이드 실행을 위한 중요한 파일들입니다.
android 폴더안의 파일들은 안드로이드 앱을 구성하기 위한 설정파일들, 앱아이콘, SPLASH 그림파일 등이 들어 있으며, SPLASH 파일은 앱이 처음실행될때 나오는그림입니다.

또 앱을 apk나 aab파일로 저장하여 배포/복사시에도 이 폴더에저장됩니다.

 

---

5. ios 폴더

ios 프로젝트가 담겨있는 폴더로, ios의 네이티브 모듈을 담당하고 있는 부분입니다.

ios 폴더는android 폴더와 마찬가지로 ios app을 build 할때 사용 됩니다.

AppDelegate.h, AppDelegate.m

iOS 앱의메인파일입니다.

 

Info.plist

iOS 프로젝트설정파일입니다.

 

Profile
ios에서 코코아포드라는 라이브러리에 대한 의존성 관리를 하는 파일입니다.

 

 

 

---

 

6. node_modules

JavaScript로 만들어진 React이기 때문에 node_modules 폴더에서 패키지를 관리하게 됩니다.

프로젝트와 관련된 모듈들이며, npm을 통해 설치한 모듈도 이곳에 위치하게 됩니다.