chorock.page
소개글시리즈프로젝트
© 2026 chorock.page
← 목록으로
React Native 공부 · 3/4
← 이전 글다음 글 →
React Nativeappexpo

Expo에서 카카오 로그인 추가하기

2026.08.23 · 4분 읽기 · 조회 0

목차
라이브러리의존성 설치app.json 설정카카오 SDK 초기화하기카카오 로그인 설정 및 번들 등록카카오 로그인하기로그아웃로그인 상태 확인사용자 정보 확인

포에이 외주를 받았다. 소셜 로그인 기능을 추가해야하는데, 먼저 카카오톡 로그인 추가하는 방법을 알아보자.

라이브러리

react-native-kakao 라이브러리를 사용한다.

공식문서가 잘 되어있기 때문에 천천히 따라하면 된다.

해당 모듈은 카카오 SDK의 구조를 그대로 따른다.

의존성 설치

// 공통 패키지 설치
npx expo install @react-native-kakao/core
 
// expo-build-properties 설치
npx expo install expo-build-properties
 
// 카카오 로그인 및 관련 기능을 담고 있는 패키지 설치
npx expo install @react-native-kakao/user

의존성 설치에서 오류가 생기는 경우에는 app.json을 먼저 설정해주면 된다.

app.json 설정

카카오 디벨로퍼스에 들어가 회원가입을 한 후, 앱을 생성한다.
플랫폼 키의 네이티브 앱 키를 기재해주면 된다.

"plugins": [
  [
    "expo-build-properties",
    {
      "android": {
        "extraMavenRepos": [
          "https://devrepo.kakao.com/nexus/content/groups/public/"
        ]
      }
    }
  ],
  [
    "@react-native-kakao/core",
    {
      "nativeAppKey": "<네이티브 AppKey>",
      "android": {
        "authCodeHandlerActivity": true
      },
      "ios": {
        "handleKakaoOpenUrl": true
      }
    }
  ]
]

카카오 SDK 초기화하기

모든 카카오 API를 부르기 전에 항상 해당 함수를 호출해야한다.
그러므로 _layout.tsx에 해당 코드를 기재하였다.

//.env
EXPO_PUBLIC_NATIVE_APP_KEY = <네이티브 AppKey>

임의로 키를 등록해준다. EXPO_PUBLIC 방식은 안전하지 않으므로 실제 사용 시에는 주의해야 한다.

//_layout.tsx
 
import { initializeKakaoSDK } from '@react-native-kakao/core';
 
export default function RootLayout() {
  const kakaoNativeAppkey = process.env.EXPO_PUBLIC_NATIVE_APP_KEY || "";
 
  useEffect(() => {
    initializeKakaoSDK(kakaoNativeAppkey);
  }, []);
 
  return (생략)
}

카카오 로그인 설정 및 번들 등록

카카오 로그인을 사용하려면 앱 관리페이지의 [카카오 로그인] > [일반] >[사용 설정] > [상태] 를 [ON] 으로 설정해야 한다.
[상태]가 [OFF]인 경우, 카카오 로그인 요청 시 오류가 발생한다.

또한 앱 설정에서 IOS 와 안드로이드의 Bundle Identifier을 등록해 주어야 한다.
해당 사항은 app.json에서 확인할 수 있다.

"ios": {
  "bundleIdentifier": "<번들ID>"
},
"android": {
  "package": "<패키지명>"
},

여기에 있는 값을 카카오 디벨로퍼스 앱 설정에 기재해주면 된다.
하지만 안드로이드는 이것 외에도 하나의 값이 더 필요하다.
"
라고 적혀있다.
키해시 값을 필요로 한다.

import { getKeyHashAndroid } from "@react-native-kakao/core";
 
const key = await getKeyHashAndroid();
console.log("키 정보", key);

해당 함수를 통해 해당 디바이스의 키해시를 추출할 수 있으나, 주의사항을 잘 숙지하도록 하자.

  • 모든 개발 환경의 디버그 키 해시들과 릴리즈 키 해시를 등록해야 합니다.
  • 키 해시가 등록되지 않은 앱에서는 카카오 API를 호출할 수 없습니다.
  • 여러 명의 개발자가 앱의 개발에 참여하고 있다면 각 개발자들의 개발 환경에 따라 디버그 키스토어(keystore)가 각자 다르므로 각 디버그 키 해시를 모두 등록해야 합니다.

나중에 구글플레이 콘솔에 테스트하고, 앱 출시할 때도 키값 달라지므로 모두 등록해줘야 함에 주의해야 한다.

여기까지 완료했다면 이제 로그인하면 된다.

카카오 로그인하기

login() 함수를 호출하면 바로 실행할 수 있다.

import { login } from "@react-native-kakao/user";
 
export default function HomeScreen() {
  const handleLogin = () => {
    login();
  };
 
  return (
    <Pressable onPress={handleLogin}>
      <Text>로그인하기<Text/>
    <Pressable/>
  )
}
 

웹으로 연결이 된다.

해당 login() 함수는 Promise로 다음과 같은 값들을 반환한다.

export interface KakaoLoginToken {
  accessToken: string;
  refreshToken: string;
  tokenType?: string;
  idToken?: string;
  accessTokenExpiresAt: number;
  refreshTokenExpiresAt: number;
  accessTokenExpiresIn: number;
  refreshTokenExpiresIn: number;
  scopes: string[];
}

해당 반환값들이 잘 내려진다면 카카오 로그인에 성공한 것이다.

로그아웃

로그아웃은 간단하다.

import { logout } from '@react-native-kakao/user';
 
logout()

을 호출하면 된다.

로그인 상태 확인

isLogined() 로 확인할 수 있다.

사용자 정보 확인

me() 함수를 통해 사용자의 정보를 받을 수 있다.

export type KakaoUser = {
  id: number;
  email: string;
  name: string;
  nickname: string;
  profileImageUrl: string;
  thumbnailImageUrl: string;
  phoneNumber: string;
  ageRange: string;
  birthday: string;
  birthdayType: string;
  birthyear: string;
  gender: string;
  (생략)

등등 굉장히 많은 값을 받아올 수 있으나, 이는 카카오 로그인 동의항목에서 따로 설정을 해주어야 값을 받아올 수 있다.

비즈앱 전환을 받지 않을 시에는 사용자의 닉네임과 프로필 사진 밖에 가져올 수 없다.

비즈앱 전환 방법으로는 사업자 번호를 등록하거나, 데브톡에 정해진 양식을 통해 신청하는 방식이 있으므로 참고하도록 하자.

초록
초록

앱과 웹을 만들고, 직접 운영하며 기록합니다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글

포에이 회고록React Nativeexpoapp회고

expo로 소셜 로그인 붙이기 후기

2026.09.10·15분 읽기·조회 0
React Native 공부React Nativeappexpo

Expo 에서 네이버 로그인하기

2026.08.27·2분 읽기·조회 0
하이브리드 앱 만들기appReact NativeNext.js

React Native: 웹앱 만들기 일지(2) - 웹과 앱의 통신

2026.07.04·3분 읽기·조회 0

목차

라이브러리의존성 설치app.json 설정카카오 SDK 초기화하기카카오 로그인 설정 및 번들 등록카카오 로그인하기로그아웃로그인 상태 확인사용자 정보 확인