🔥🔧 React Native 0.77에서 Kakao Login 연동 시 AppDelegate.swift 이슈 해결

🚨 1. 문제 상황 및 현상

• React Native 0.77부터 AppDelegate.mm → AppDelegate.swift로 변경
• 📚 기존 Kakao Login 가이드는 모두 Objective-C 기반
• 아래 코드에서 loginResult에서 응답이 전혀 오지 않는 현상 발생

import { login as kakaoLogin } from '@react-native-seoul/kakao-login';

export const signInWithKakao = async () => {
  try {
    const loginResult = await kakaoLogin();
    // --->>> 아무런 응답도 없고 console.log 도 찍히지 않는다.
    ...
  } catch (error) {
    console.error('로그인 또는 프로필 조회 실패:', error);
    throw error;
  }
};

📋 2. 환경 정보

• 🎯 React Native: 0.77.1
• 📦 react-native-kakao-login 버전: "@react-native-seoul/kakao-login": "^5.4.1",

🛠️ 3. 해결 방법

3.1 카카오 로그인 문서 대로 설정

• 우선 카카오 문서 기준으로 info.plist 설정 까지는 동일하다. 내가 힘들었던 부분은 Swift Bridging Header 생성하는 4번 항목 부터였다.

3.2 Swift Bridging Header 생성

• 우선 공식 링크 문서 대로 Swift Bridging Header 를 생성한다. 다만 내부 내용이 다르다.
• RNKakaoLogins.h만 단독으로 import하면 컴파일 에러가 발생하는데, 이는 의존성 순서 때문이다.

// YourAppName-Bridging-Header.h
// ❌ 이렇게 하면 에러 발생
#ifndef YourAppName_Bridging_Header_h
#define YourAppName_Bridging_Header_h

#import "RNKakaoLogins.h"

#endif /* YourAppName_Bridging_Header_h */

• RNKakaoLogins.h 내부에서 RCTBridgeModule, NSObject 등을 참조하므로, 이들이 먼저 정의되어 있어야 한다.

// YourAppName-Bridging-Header.h
#ifndef YourAppName_Bridging_Header_h
#define YourAppName_Bridging_Header_h

// 기본 프레임워크들을 먼저 import
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

// React Native 헤더들
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

// 마지막에 RNKakaoLogins import
#import "RNKakaoLogins.h"

#endif /* YourAppName_Bridging_Header_h */

3.3 AppDelegate.swift 수정

• 기존 Objective-C 에서 AppDelegate.mm 파일을 링크 내용대로 수정해야 하는데, 이 내용을 AppDelegate.swift 에 적용 해야 한다.

• 내용 적용된 Swift 코드

// ios/AppDelegate.swift

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
...

@main
class AppDelegate: RCTAppDelegate, MessagingDelegate, UNUserNotificationCenterDelegate {
  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    self.moduleName = "YourAppName"
    self.dependencyProvider = RCTAppDependencyProvider()
    ...
    // 추가: Kakao SDK 초기화
    RNKakaoLogins.initialize()
    ...
  }
  
  // 추가: - Kakao Login URL Scheme 처리
  override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    if RNKakaoLogins.isKakaoTalkLoginUrl(url) {
      return RNKakaoLogins.handleOpen(url)
    }
    return super.application(app, open: url, options: options)
  }
  ...
}
...

• RNKakaoLogins는 앞서 구성한 YourAppName-Bridging-Header.h 파일을 통해 Objective-C 모듈이 Swift 환경으로 브릿징되어 있으므로, Swift 파일에서 별도의 import 구문 없이도 직접 참조가 가능합니다.

3.4 추가 설정

📄 Info.plist 설정: 카카오 문서 내용 대로 3번까지는 설정해야 한다.

🔗 4. 참고 자료

• Claude - AI agent

후기

AppDelegate.swift 에서 kakao 모듈 swift 직접참조하는 방식으로도 시도해봤는데 swift 를 전혀 다뤄본적이 없어 실패했다. 우선 정상동작 하는 방향으로 수정하였다.

Claude 덕분에 블로그 작성이 매우 편해진 것 같다.ㅎㅎ