[RN] React Native Cli 프로젝트 구조 알아보기 (with. TypeScript)

 

 본 게시글은 React Native 공식문서의 내용을 참고했습니다.
소스 코드는 깃허브를 통해서 확인하실 수 있습니다.

 

1. node.js 설치

• Node.js 한글 사이트는 https://nodejs.org/ko/입니다. 설치 파일을 다운로드 받습니다. 
• Node.js 설치시 NPM도 함께 설치가 되며, 터미널 실행 후 아래 명령어를 통해 버전 체크하여 설치가 정상으로 되었는지 확인 가능합니다.

npm이란 Node.js 패키지 관리자로 node.js로 만들어진 프로그램을 쉽게 설치 해주는 것입니다.

https://nodejs.org/en

# node.js 버전확인
$ node -v

# npm 버전확인
$ npm -v

2. 패키지 설치

1) package.json 생성

# package.json 생성

# npm
$ npm init

# yarn
$ yarn init

 

2) package.json 설치

# npm
$ npm i

# yarn
$ yarn install

 

3. React Native CLI 설치

$ npx react-native init MyReactNativeApp --template react-native-template-typescript

4. 기본 프로젝트 구조

React Native CLI 기본 구조

 

좌측의 이미지는 VSC에서 기본 설치 프로젝트 소스의 예시 입니다. 해당 구조는 TypeScript template 프로젝트로 생성된 앱의 폴더 구조입니다. 

 

기존의 React와의 차이는 iOS와 Android 폴더가 추가되고, Public 폴더와 index.html이 사라졌다는 것에서 차이가 있습니다. (React Native에서는 html과 css/scss 파일은 쓰이지 않습니다.)

4.1. android 폴더 

안드로이드 프로젝트가 담겨 있는 폴더로 안드로이브 네이티브 모듈을 담당하고 있습니다. react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 합니다. 안드로이드 프로젝트는 다음의 구성요소로 이루어져있습니다.

 

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

2) app/src/main/res : 안드로이드 앱의 아이콘 및 splash와 같은 시작화면 등의 리소스들을 관리합니다.

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

 

4.2. ios 폴더

ios 프로젝트가 담겨있는 폴더로, ios의 네이티브 모듈을 담당하고 있는 부분입니다. ios 폴더는android 폴더와 마찬가지로 ios app을 build 할때 사용 됩니다.

1) AppDelegate.h, AppDelegate.m : iOS 앱의메인파일입니다

2) Info.plist : iOS 프로젝트설정파일입니다.

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

 

5. index.js

이 파일은 React-Native 프로젝트의 앱이 시작될 때, 처음으로 실행되는 파일입니다.
앱을 다음의 코드로 최초 실행할 경우 React Native 이 파일(index.js)을 entry point로서 시작하며, React Native의 자바스크립트 코드가 번들링(Bundling)이 됩니다.

번들링(Bundling)이란, "묶어주는 것"을 의미하며, 기능별로 모듈화 했던 "JavaScript 파일들을 묶어준다."는 뜻입니다. 이 과정에서 여러 개의 파일이나 모듈을 한 개의 파일로 결합하고, 필요에 따라 최적화하여 웹 애플리케이션의 성능을 향상 시킵니다. 즉, JavaScript 관련 리소스들을 하나의 파일로 묶어서 최적화하는 프로세스를 말합니다.

# Android 실행
$ npx react-native run-android

# iOS 실행
$ npx react-native run-ios

 

이 파일은 앱의 초기화 및 구성을 담당하며, 주로 루트 컴포넌트를 랜더링하고 앱을 시작하는 역할을 합니다.

 

index.js 소스코드

/**
 * @format
 */

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

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

 

1. 컴포넌트 랜더링: <App/>과 같은 최상위 컴포넌트를 생성하고 랜더링합니다. 이 컴포넌트는 앱의 전반적인 구조를 정의하고, 다른 컴포넌트들을 포함하도록 합니다.
2. 컴포넌트 등록 : AppRegistry.registerComponent 를 사용하여 랜더링할 최상위 컴포넌트를 등록합니다.
   ( 이때, 등록된 이름은 실제로는 앱의 이름과 일치하지 않아도 됩니다. )
3. registerComponent :  첫 번째 매개변수 (appName)는 모듈 이름을 지정하며, 두 번째 매개변수에는 처음으로 랜더링(앱 화면에 표시)될 컴포넌트를 지정합니다.

 

6. App.tsx (타입스크립트일 경우 tsx -> 아닐 경우 App.js)

(좌) App.tsx 파일 소스 코드 / (우) android 애뮬레이터 화면

 

7. package.json

해당 파일은 프로젝트와 관련된 모듈들이 기록된 파일로 이를 통해 모듈의 버전 관리를 합니다. 

• dependencies : 내가 설치한 라이브러리 목록
• devDependencies : 주로 개발 중에 필요한 패키지들을 정의하도록 합니다. npm install --save-dev 또는 npm install -D 명령을 사용하여 패키지를 설치할 때, 이 속성에 명시된 패키지들이 설치됩니다. 

package.json의 script 명령어

 

왼쪽 그림의 명령어를 통해, android 또는 ios 폴더를 실행할 수 있습니다.