2026.08.23 · 4분 읽기 · 조회 0
포에이 외주를 받았다. 소셜 로그인 기능을 추가해야하는데, 먼저 카카오톡 로그인 추가하는 방법을 알아보자.
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을 먼저 설정해주면 된다.
카카오 디벨로퍼스에 들어가 회원가입을 한 후, 앱을 생성한다.
플랫폼 키의 네이티브 앱 키를 기재해주면 된다.
"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
}
}
]
]모든 카카오 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에 저장됩니다.