[React Native] React Native with TypeScript : Hello World

tsconfig.json 파일 생성

TypeScript 설정 파일인 tsconfig.json 파일을 프로젝트의 root 경로에 추가한다.

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

tsconfig.json 파일은 TypeScript를 컴파일하는데 필요한 내용을 포함하고 있다.

npx typescript --init

위의 명령어로 tsconfig.json 파일을 생성해줄 수 있다.

 

TypeScript 작성하기 (App.tsx)

App.tsx 파일을 열고, 다음의 prototype을 작성한다.

import React from 'react'
import { Component } from 'react'

Component에는 Button, Text, View 등 사용하는 컴포넌트를 추가한다.

Text로 Hello World를 출력하는 코드를 작성해보면 다음과 같다.

기존의 ch02_1 프로젝트의 App.tsx 파일을 다음과 같이 수정했다.

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

export default function App(){
  const textElement = React.createElement(Text, null, 'Hello World!') // 가상 DOM 객체 생성
  return textElement // 가상 DOM 객체를 네이티브로 넘김
}

 

 

index.js 작성하기 

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

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

자바스크립트 엔진(네이티브 모듈에서 동작)이 가상 DOM 객체를 넘겨주는 App의 존재를 알 수 있도록 index.js 파일에 기술해준다.

android 경로에 위치한다.

 

 

MainApplication.java 작성하기 

...
@Override
  protected String getJSMainModuleName() {
  return "index";
}
...

android/app/src/main/java/com/ch02_1/MainApplication.java에 위의 코드를 포함시킨다.

자바스크립트 엔진이 index.js 파일의 존재를 알 수 있도록 하는 코드이다.

 

 

Android 애뮬레이터 실행

저장 후, npm run android를 통해 애뮬레이터를 실행해준다.

npm run android // 안드로이드 앱 빌드 명령어

TypeScript 코드와 상관없이 android 디렉터리만을 대상으로 네이티브 앱(ch02_1/android)을 빌드하여 애뮬레이터에 앱을 설치하는 명령이다.

npm start 명령으로 설치된 앱이 구동 시 수신해야 하는 TypeScript 코드(ES5 JavaScript 코드로 컴파일됨)를 제공하는 메트로 서버를 실행한다.

React Native 앱을 디바이스에서 실행 시, MainApplication.java가 실행된다.

자바스크립트 엔진(자바스크립트 스레드에서 실행)은 getJSMainModuleName 함수로 index.js 파일을 존재를 인식하고,

index.js 파일로 App의 존재를 알게 되어 App을 호출한다.

App이 호출하여 얻은 가상 DOM 객체를 bridge를 통해 네이티브로 넘긴다.

그럼 최종적으로 'Hello World!' 가 출력되는 것이다.

 

 

참고

Do it! 리액트 네이티브 앱 프로그래밍