[RN] 네이버 소셜 로그인

참고 - 너무 감사합니다

앱 최초 진입시 간단한 사용자경험을 위해 한가지 핵심 소셜 로그인 기능 구현해보자

소셜 로그인 순위

한국소비자연맹 조사결과
네이버 51.2%
카카오 39.8%
페이스북7.9%
구글 1.2%
라는 이유로 네이버 한가지로 정했다

---

필요한 라이브러리

npm install @react-native-naver/naver-login

Naver 소셜 로그인 구현

Naver 소셜 로그인을 위해 `src/components/Login.js' 파일 생성

// src/components/Login.js
import React, {useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { Navigation, getProfile } from '@react-native-naver/naver-login';

const Login = ({ onLogin }) => {
  const [isLoggedIn, setLoggedIn] = useState(false);
  const [profile, setProfile] = useState(null);
  
  useEffect(() => {
    // 네이버 로그인 초기화
    NaverLogin.initNaverLogin(
      'NAVER_CLIENT_ID',
      'NAVER_CLIENT_SECRET',
      'NAVER_CLIENT_NAME'
    );
  }, []);
  
  const handleNaverLogin = async () => {
    try {
      // 네이버 로그인 실행
      const result = await NaverLogin.login();
      
      if (result.resultCode === 'success') {
        // 로그인 성공
        setLoggedIn(true);
        
        // 사용자 프로필 정보 가져오기
        const user = await getProfile();
        setProfile(user);
        
        // 부모 컴포넌트로 로그인 상태 전달
        onLogin(true);
      } else {
        // 로그인 실패
        setLoggedIn(false);
        setProfile(null);
      }
    } catch (error) {
      console.error('Naver login error: ', error);
    }
  };
  
  return (
   <View style={{
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center' 
    }}>
    	<Text>{isLoggedIn ? `Hello, ${profile?.nickname}!` : '로그인'}</Text>
	</View>
	);
};

export default Login;

NAVER_CLIENT_ID, NAVER_CLIENT_SECRET, NAVER_CLIENT_NAME을 자신의 네이버 애플리케이션 정보로 대체해야 합니다

--

재사용 가능한 컴포넌트

방금 구현한 컴포넌트를 사용하여 다른 부분에서 손숩게 로그인 기능 구현하도록 src/App.js 파일에서 이 컴포넌트 사용

// src/App.js
import React, { useState } from 'react';
import { SafeAreaView, View, Text } from 'react-native';
import Login from './component/Login';

const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false);
  
  const handleLogin = (status) => {
    setLoggedIn(status);
  };
  
  return (
    <SafeAreaView style={{ flex: 1 }}>
    	<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          	<Text> hello world!</Text>
		</View>

		{!isLoggedIn && <Login onLogin={handleLogin} />}
	</SafeAreaView>
 );
};

export default App;