React Native iOS 빌드 시 검은 화면과 번들 중복 실행 문제 해결

안녕하세요! React Native 프로젝트의 iOS 빌드 과정에서 겪었던 검은 화면 문제와 index 번들 중복 실행

문제를 공유합니다. 해결 과정과 원인을 단계별로 정리해보았으니, 같은 문제를 겪는 분들께 도움이 되면 좋겠습니다.

---

문제 1: 검은 화면 발생

현상

React Native 앱을 실행하면 네이티브로 설정한 Bootsplash 화면은

정상적으로 표시되지만, 화면 전환 후 검은 화면으로 넘어가는 문제가 발생했습니다.

원인

RCTRootView가 제대로 초기화되지 않았기 때문입니다.
React Native 앱은 RCTRootView를 통해 JavaScript 번들을 로드하고 화면을 렌더링하는데, AppDelegate.mm에서 이 부분이 빠져있었거나 잘못 설정되어 있었던 것입니다.

---

잘못된 해결법: super 코드 추가

문제를 해결하려고 웹에서 찾은 해결 방법을 따라 **super application:didFinishLaunchingWithOptions**를 추가했습니다.

추가한 코드:

 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    return [super application:application didFinishLaunchingWithOptions:launchOptions];

}

이 코드를 추가하니 검은 화면 문제가 해결되었습니다.
하지만 이때는 문제의 근본 원인을 해결하지 못했고, React Native의 내부 초기화와 충돌이 발생할 여지가 있었습니다.

---

2. 문제 2: index 번들이 두 번 실행됨

현상

검은 화면 문제를 해결한 후 앱을 실행해보니 index 번들이 두 번 실행되는 현상이 나타났습니다.

원인

• super application:didFinishLaunchingWithOptions를 호출하면 React Native의 기본 앱 초기화 과정에서 이미 RCTRootView를 초기화합니다.
• 그런데 이후에 수동으로 RCTRootView를 한 번 더 초기화하는 코드가 있었기 때문에 RootView가 중복으로 생성되었고, 그 결과 index 번들이 두 번 실행된 것입니다.

---

3. 최종 해결법: RootView 명확하게 초기화

문제의 원인은 결국 RCTRootView의 중복 초기화였습니다.
따라서 super 호출을 제거하고, RCTRootView를 명확하게 수동 초기화하면 검은 화면과 중복 실행 문제가 모두 해결됩니다.

수정된 AppDelegate.mm 코드

#import "AppDelegate.h"

#import "RNBootSplash.h"

#import <React/RCTBundleURLProvider.h>

#import <React/RCTRootView.h>

#import <Firebase.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

  // Firebase 초기화

  [FIRApp configure];

  // React Native RootView 명확히 초기화

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:[self bundleURL]

                                                      moduleName:@"FlirtingAi"

                                               initialProperties:nil

                                                   launchOptions:launchOptions];

  // BootSplash 초기화

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

  // RootViewController 설정

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

  UIViewController *rootViewController = [UIViewController new];

  rootViewController.view = rootView;

  self.window.rootViewController = rootViewController;

  [self.window makeKeyAndVisible];

  return YES; // super 호출 제거

}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge

{

  return [self bundleURL];

}

- (NSURL *)bundleURL

{

#if DEBUG

  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];

#else

  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

#endif

}

@end

---

4. 핵심 요약

검은 화면 원인

• RCTRootView가 초기화되지 않아 React Native 화면이 렌더링되지 않은 것.

super 코드의 역할

• super application은 React Native의 기본 초기화 과정을 수행해 검은 화면 문제를 해결했지만,
• 동시에 RCTRootView를 다시 초기화하면서 index 번들이 중복 실행되는 문제를 발생시켰습니다.

최종 해결

• super 호출을 제거하고 RCTRootView를 수동으로 명확히 초기화합니다.
• 이렇게 하면 검은 화면과 중복 실행 문제를 모두 해결할 수 있습니다.