많은 웹 애플리케이션에서 소셜 로그인 기능은 필수적입니다. 이번 튜토리얼에서는 React에서 Custom Hook을 활용하여 간편하게 소셜 로그인 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 패키지 설치

먼저, 소셜 로그인 기능을 구현하기 위해 필요한 패키지를 설치해야 합니다. 다음과 같은 명령어를 사용하여 react와 react-dom을 설치합니다.

npm install react react-dom

추가로, 소셜 로그인에 이용할 서드파티 라이브러리를 설치해야 합니다. 예를 들어, 구글 로그인을 구현하려면 react-google-login 패키지를 설치해야 합니다.

npm install react-google-login

2. Custom Hook 생성

이제 Custom Hook을 생성하여 소셜 로그인 기능을 구현할 차례입니다. useSocialLogin.js라는 파일을 생성하고 다음과 같은 코드를 작성합니다.

import React, { useState } from 'react';

const useSocialLogin = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  const handleLogin = () => {
    // 실제 로그인 기능 구현
    setLoggedIn(true);
  };

  const handleLogout = () => {
    // 로그아웃 기능 구현
    setLoggedIn(false);
  };

  return {
    loggedIn,
    handleLogin,
    handleLogout,
  };
};

export default useSocialLogin;

위 코드에서 useSocialLogin Custom Hook은 loggedIn 상태값과 handleLogin, handleLogout 함수를 반환합니다.

3. 소셜 로그인 컴포넌트 구현

이제 실제로 소셜 로그인 기능을 사용하기 위한 컴포넌트를 구현해보겠습니다. SocialLogin.js라는 파일을 생성하고 다음과 같은 코드를 작성합니다.

import React from 'react';
import useSocialLogin from './useSocialLogin';

const SocialLogin = () => {
  const { loggedIn, handleLogin, handleLogout } = useSocialLogin();

  return (
    <div>
      {loggedIn ? (
        <button onClick={handleLogout}>로그아웃</button>
      ) : (
        <button onClick={handleLogin}>로그인</button>
      )}
    </div>
  );
};

export default SocialLogin;

위 코드에서 SocialLogin 컴포넌트는 useSocialLogin Custom Hook을 사용하여 로그인 상태에 따른 UI를 렌더링합니다. 로그인 버튼을 클릭하면 handleLogin 함수가 호출되고 로그아웃 버튼을 클릭하면 handleLogout 함수가 호출됩니다.

4. 소셜 로그인 컴포넌트 사용

이제 SocialLogin 컴포넌트를 원하는 곳에서 사용할 수 있습니다. 예를 들어, App.js에서 SocialLogin 컴포넌트를 사용하려면 다음과 같은 코드를 작성합니다.

import React from 'react';
import SocialLogin from './SocialLogin';

const App = () => {
  return (
    <div>
      {/* 다른 컴포넌트 */}
      <SocialLogin />
    </div>
  );
};

export default App;

위 코드에서 SocialLogin 컴포넌트를 App 컴포넌트에서 사용하였습니다.

마무리

위 방법을 통해 Custom Hook을 활용하여 간편하게 소셜 로그인 기능을 구현할 수 있습니다. 이와 같은 방법을 사용하면 여러 소셜 로그인 기능들을 쉽게 추가하고 관리할 수 있습니다. 시간과 노력을 절약하고 효율적인 개발을 할 수 있습니다.

#React #CustomHook

참고 자료:

• React 공식 문서
• react-google-login 패키지