Dev

[React Native] Invariant Violation: "main" has not been registered.

호랑2 2025. 1. 28. 14:55

React Native 프로젝트에서 파일 호출 순서는 package.json의 main 필드와 index.js 파일의 설정에 따라 달라진다.

일반적으로 Expo 또는 React Native 앱의 실행 흐름은 다음과 같다.

1. package.json 확인

package.json 파일의 "main" 필드가 앱의 진입점(entry point)을 결정하며, 기본적으로 다음과 같이 설정되어 있어야 한다.

"main": "index.js"

 

즉, index.js 파일이 먼저 호출된다.

2. index.js 파일의 역할

index.js 파일은 프로젝트의 진입점(entry point)으로, AppRegistry를 사용해 앱의 루트 컴포넌트를 등록한다.

index.js 예시:

import { AppRegistry } from 'react-native';
import App from './App'; // App.js를 가져옴
import { name as appName } from './app.json'; // app.json의 name 필드 값 가져옴

AppRegistry.registerComponent(appName, () => App);
  • AppRegistry.registerComponent: React Native 앱의 루트 컴포넌트를 등록한다.
  • 여기서 App은 App.js 파일을 가져온 컴포넌트 이다.
  • **app.json**의 "name" 필드 값이 사용된다.

3. App.js 파일의 역할

App.js 파일은 앱의 주요 UI 및 로직을 정의하는 루트 컴포넌트 이다.

index.js 파일에서 가져와서 앱의 루트 컴포넌트로 등록된다.

 

App.js 예시:

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

export default function App() {
  return (
    <View>
      <Text>Welcome to my App!</Text>
    </View>
  );
}

실행 흐름 정리

  1. package.json의 "main" 필드 확인:
    • "main": "index.js" 이면 index.js 가 실행된다.
  2. index.js 파일에서 앱의 루트 컴포넌트 등록:
    • AppRegistry.registerComponent를 통해 App.js 를 등록.
  3. App.js 파일이 호출되어 UI 렌더링 시작.

문제 발생 가능성

만약 index.js 파일이 없거나 올바르게 설정되지 않았다면 앱이 시작되지 않고 "main" has not been registered 같은 오류가

발생할 수 있다.

 

따라서 해당 오류 발생시에는 아래와 같은 내용을 확인해야 한다.

  • package.json의 "main" 필드를 확인.
  • index.js 파일이 존재하는지 확인.
  • AppRegistry.registerComponent 호출이 올바르게 이루어졌는지 확인.

그런데 나는 Expo 를 사용해서 앱개발을 하고 있었다.

 

Expo는 React Native 프레임워크를 기반으로 하는 오픈소스 플랫폼으로, iOS, Android, 및 Web용 앱을 보다 빠르고 간단하게 개발하고 배포할 수 있도록 도와준다. 크로스 플랫폼 개발이 가능하고, Expo Go 앱을 통해 빠르게 결과물 확인이 가능한 것이 장점이다.

또한 나는 카메라와 번역 등의 라이브러리가 필요한데. Expo 에서는 이러한 기능에 대한 라이브러리도 제공하고 있다.

 

어쨌든 Expo 를 사용하는 경우에는 index.js 를 사용하지 않는데, 이는 Expo가 자체적으로 앱의 진입점을 관리하여 프로젝트 설정에 따라 자동으로 진입 파일을 처리하기 때문이다. 따라서 위의 "main" has not been registered 오류의 발생 원인이 달라지게 되었다.

 

 

  1. Expo의 기본 진입점:
    • Expo는 프로젝트의 진입점으로 App.js를 기본으로 사용한다.
    • App.js 파일을 자동으로 찾아 앱의 루트 컴포넌트로 설정한다.
    • 즉, App.js가 Expo의 기본 entry point 가 된다.
  2. app.json 또는 app.config.js 설정:
    • Expo는 app.json 이나 app.config.js 파일에서 앱의 진입점(entry point)을 관리한다.
    • Expo의 기본 동작은 App.js 를 entry point로 사용하는 것이며, 이를 변경하려면 expo.entryPoint 를 명시적으로 설정해야 한다.

따라서 현재 나에게 발생하는 "main" has not been registered 오류는 Expo가 App.js 를 진입점으로 처리하지 못하고 있기 때문이었다. 이를 해결하기 위해서는 다음을 확인해야 한다.

 

1. app.json 설정 확인: 

  • expo.entryPoint가 설정되어 있다면 삭제한다.
{
  "expo": {
    "name": "YourAppName",
    "slug": "your-app-slug",
    "version": "1.0.0",
    "sdkVersion": "52.0.0"
  }
}

 

 2. App.js 파일 확인:
    • App.js가 존재하며, 유효한 React 컴포넌트인지 확인합니다.
import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello, Expo!</Text>
    </View>
  );
}

 

3. Custom Entry Point 필요 여부 확인:

  • 기본 Expo 워크플로를 사용 중이라면 index.js는 필요하지 않다.
  • 불필요하게 작성된 index.js가 있다면 삭제한다.