React Native에서 진입점 변경

expo-cli로 작성한 ReactNative 앱으로 엔트리 포인트를 설정하려고했는데 조금 어색했기 때문에 비망으로 남기고 싶습니다.

엔트리 포인트 초기 설정

expo-cli로 생성한 React Native 프로젝트(TypeScript)의 디렉토리 구성은 다음과 같습니다.

my-rn-app
├── App.tsx
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json

진입점 지정

루트 디렉토리에 App.tsx 가 있는 것이 자신적으로 싫었기 때문에, src 디렉토리를 만들어 그 부하로 App.tsx 를 이동시켰습니다.

my-rn-app
├── src
│    └── App.tsx
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json

그런 다음 에뮬레이터에서 다음과 같은 오류가 발생했습니다.


이 에러 내용으로부터, 엔트리 포인트의 설정은 node_module/expo/AppEntry.js 로 행하고 있다고 추측할 수 있었습니다.

그럼 엔트리 포인트를 지정하고 있는 개소는 어디입니까?
찾아보면 진입점: node_module/expo/AppEntry.js 는 package.json 의 name 속성에 지정되었습니다.

"main": "node_modules/expo/AppEntry.js",

이 부분을 src/App.tsx 로 변경합니다.

"main": "src/App.tsx",

변경 후 에뮬레이터에서 앱이 정상적으로 실행되는지 확인하면,



오류가 발생했습니다.
분명히 앱을 실행하기 위해 진입 점을 등록해야하는 것 같습니다.

진입점 등록

공식 문서에는 다음과 같은 설명이있었습니다.

App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.

앱의 루트 구성 요소는 AppRegistry.registerComponent에 등록해야 합니다. 네이티브 시스템은 앱 번들을 로드하고 AppRegistry.runApplication을 호출하여 준비가 되면 실제로 앱을 실행할 수 있습니다.

라고 하므로, src/App.tsx 의 AppRegistry.registerComponent 로 루트 컴퍼넌트를 등록, 하고 싶은 곳입니다만 registerComopnent

static registerComponent(appKey, componentProvider, section?)

첫 번째 인수에는 appKey라는 것이 필요합니다.
조사하면(자), appKey 는 app.json 로 설정하는 것이라고 하므로, property를 추가합니다.
app.json

{
  "expo": {
    "appKey": <APP_KEY>,

  }
}

여기까지 할 수 있으면 남겨두는 것은 src/App.tsx 에 AppRegistry.registerComponent로 루트 컴퍼넌트를 등록하기만 하면 됩니다.
src/App.tsx

import React from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { expo } from './../app.json';
export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

AppRegistry.registerComponent(expo.appKey, () => App);

에뮬레이터에서 앱을 확인하면 제대로 작동하는 것으로 확인되었습니다.