[React Native] 첫 프로젝트

0. 들어가며

들어가기에 앞서 개발환경 구성은 앞선 React Native 개발환경 구성 부분을 확인하시길 바랍니다. 

 

1. 프로젝트 생성

React Native CLI를 사용해서 React Native 프로젝트를 생성한다. 

react-native init FirstApp

명령어를 사용하면 자동으로 최신 리액트 네이티브 버전으로 프로젝트가 생성된다. 

하지만, 이번 버전을 사용하거나, 특정 프로젝트와 동일한 버전으로 프로젝트를 생성하고 싶은 경우에는 

react-native init -version 0.59.10 FirstApp

-version 옵션을 사용하면 지정할 수 있다. 

 

프로젝트 구성이 다 된 경우에 IOS의 경우

yarn ios 
// or
react-native run-ios

명령어를 통해서 프로젝트를 실행할 수 있으며, Android의 경우에는 

yarn android 
// or
react-native android

명령어를 통해서 실행이 가능하다. 

 

2. 폴더 및 파일 

React Native CLI를 통해서 프로젝트를 생성할 경우 많은 폴더 및 파일이 생성되는 핵심 몇가지만 알아보자면

• index.js : 리액트 네이티브 프로젝트 시작 파일이다. 이 파일을 기준으로 자바스크립트 코드가 번들링 된다. 
• App.js : 화면에 나타나는 내용이 들어 있는 파일이다. 
• /android : 안드로이드 프로젝트가 들어가 있는 폴더이다. 
• /android/app/build.gradle : 안드로이드 앱을 빌드, 배포할 때 사용하는 파일이다. 
• /android/app/src/main/java/com/firstapp/MainActivity.java, MainApplication.java : 안드로이드 앱의 메인 파일이다. 
• /android/app/src/res/ : 안드로이드 앱의 아이콘 또는 시작화면 등 리소스를 관리하는 폴더이다. 
• /ios : IOS 프로젝트가 담겨 있는 폴더이다. 
• /ios/FirstApp/AppDelefate.h, AppDelegate.m : IOS 앱의 메인 파일이다. 
• /ios/FristApp/Info.plist : IOS 프로젝트 설정 파일이다.

리액트 네이티브로 프로젝트를 진행할 때, 자주 수정하게 될 파일 및 폴더들이다. 

거의 대부분 자바스크립트 파일을 만들고 수정하겠지만, 앱을 빌드 및 배포할 때 또는 네이티브 기능을 가진 라이브러리와 연동할 때는 네이티브 파일과 폴더를 다루게 될 것이다. 

 

3. 리액트 네이티브 컴포넌트 

// index.js
/**
 * @format
 */

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

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

index.js를 열면 AppRegistry.registerComponent를 통해서 사용할 모듈을 지정하게 된다. 

 

첫 번째 매개변수는 모듈의 이름을 지정하는 것인데, 이것은 프로젝트를 생성할 때 자동으로 생성되서

연결된다. 

두 번째 매개변수는 처음으로 렌더링될 컴포넌트를 지정한다. 

 

App.js를 열어보면 많은 코드가 나와있는데, 

import React from 'react';

 React Native는 React로부터 파생되었기 때문에 React를 불러와야 한다. 

 

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

React는 HTML 태그를 통해서 화면에 나타내지만, React Native는 HTML을 통해서 화면에 표시할 수 없다. 

대신 특별한 태그만 사용이 가능하다. 

 

1. SafeAreaView

SafeAreaView는 아이폰에 있는 노치 디자인에서 상단에 상태 바와 하단의 홈 버튼의 영역을 제외한 영역에 콘텐츠를 표시할 때 사용하는 컴포넌트이다. 

 

일반적인 전체 화면에 콘텐츠를 나타내고 싶다면 View 컴포넌트를 사용하면 된다. 

 

2. StyleSheet

StyleSheet는 React Native의 컴포넌트에 스타일을 적용할 때 사용한다. 

스타일을 적용하는 하나의 방법으로 인라인 스타일이라는 방법도 있다. 

 

3. ScrollView

ScrollView는 화면 스크롤이 가능한 컴포넌트다.

리액트 네이티브에서 화면 스크롤이 가능한 컴포넌트로 FlatList, ScrollView, SectionList 등을 제공하고 있다. 

 

4. View & Text

React Native에서는 View를 사용해서 전체적인 레이아웃을 잡는다. 그리고 글자를 표시할 때는

반드시 Text 컴포넌트를 사용해야 한다. 사용하지 않으면 에러가 발생한다. 

 

5. StatusBar

StatusBar 는 화면에 표시되는 컴포넌트는 아니고, 상단에 있는 상태 바를 숨기거나 색깔을 변경할 때

사용한다. 

 

4. 추가 라이브러리

리액트 네이티브를 개발할 때 필수는 아니지만 도움이 되는 몇 가지 라이브러리를 알아보자

1. 타입스크립트

React Native는 당연히 자바스크립트로 개발을 한다. 하지만 런타임 중 변수의 타입이 결정되면 변수의 타입 때문에 발생하는 버그와 에러도 자바스크립트로 해결해야한다. 

이를 더 쉽게 해결해주기 위해서 타입스크립트를 사용하면 도움이 된다. 

npm install typescript @types/react @types/react-native --save-dev

• typescript : 타입스크립트 라이브러리
• @types/react : 리액트의 타입이 정의된 파일 
• @types/react-native : 리액트 네이티브의 타입이 정의된 파일 

추가로 타입스크립트를 설정하기 위해서, " tsconfig.json "  파일을 만들고 

{
    "compilerOptions": {
    	"allowJs": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInsterop": true,
        "isolatedModules": true,
        "jsx": "react",
        "lib": ["es6"],
        "moduleResolution": "node",
        "noEmit": true,
        "strict": true,
        "target": "esnext"
    },
    "esclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

내용을 추가해주면 된다. 

 

사실 이런 과정이 귀찮다면 React Native CLI 명령어를 사용해서, 타입스크립트용 프로젝트를 만들 수 있다. 

react-native init FirstApp --template react-native-template-typescript

 

2. Styled Components

React Native의 스타일을 적용하는 방법으로 인라인 방식과 StyleSheet이 있다고 했지만,

가장 유명한 Styled Components를 사용하는 방법도 있다. 

npm install --save styled-components
npm install --save-dev @types/styled-components @types/styled-components-react-native

• styled-components : Styled Components 라이브러리
• @types/styled-components : 타입스크립트를 위해서 Styled Components 타입 정의 파일

3. babel-plugin-root-import

React Native는 컴포넌트를 추가할 때, 상대 경로를 이용한다. ( import Button from '../../../Button ) 

상대 경로를 이용하면 경로가 길어지고 알기 어려워지는 문제점이 있다. 

 

babel-plugin-root-import 와 타입스크립트 설정을 사용하면, 필요한 컴포넌트를 추가할 때,

상대 경로가 아닌 절대 경로를 사용할 수 있다. 

npm install --save-dev babel-plugin-root-import

 

라이브러리를 먼저 설치하고 babel.config.js 파일을 수정한다. 

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plguins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    ],
  ],
};

 

그리고 타입스크립트 설정에도 절대 경로를 적용하기 위해서 tsconfig.json을 열어 수정한다.

// prettier-ignore
{
  "compilerOptions": {
    // ...
    
    "baseUrl": "./src",                               
    "paths": {
      "~/*" : ["*"]
    },    
    
    // ...
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

이제 모든 경로를 ~를 기준으로 변경하면 자동으로 src 폴더와 매핑이 된다.