[TIL] 231212_React: 리액트에서 카카오 로그인 구현하기

지코·2023년 12월 12일

Today I Learned

목록 보기

10/66

메인 화면에서 로그인 전 화면과 로그인 후 화면의 기존 렌더링 방식은 api 연결을 크게 고려하지 않고, useState 훅을 사용하여 로그인 여부를 변경하는 방식이었다.

function MainScreen(props) {
	// 로그인 여부를 담는 IsLogin 변수의 기본 값을 0으로 지정해놓고,
	// 로그인이 완료되면 IsLogin 값을 1로 변경
  const [IsLogin, setIsLogin] = useState(0);

  if (!IsLogin) {
    return(
      <BeforeLoginSet />
    );    
  } else {
    return (
      <AfterLoginSet />
    );
  }
}

하지만 api를 연결하려고 보니 이 방식을 사용할 수 없다는 결론 등장 ! 💥💥 그럼 어떻게 구현했을까 ?

Api 연결하기

먼저 로그인 화면에는 카카오, 네이버, 구글 이렇게 세 가지의 로그인 형태가 있고, 원하는 소셜 로그인 법튼을 누르면 플랫폼 별로 로그인 창이 나와야 한다. 따라서 login 함수를 구현하고, 버튼 연결을 다음과 같이 구현하였다.

<SocialLoginButton socialtype="kakao" onClick={() => login('kakao')}>
  <SocialButtonIcon src={kakaoLogo} alt="카카오 로고" className="social-icon" />
  카카오 로그인
</SocialLoginButton>

버튼 클릭시 onClick 함수를 통해 login 함수에 ‘kakao’라는 문자열을 전달한다. 네이버는 ‘naver’, 구글은 ‘google’과 같다.

const login = (socialtype) => {
    try {
      window.location.replace(
        `${process.env.REACT_APP_BE_HOST}/api/v1/auth/login/oauth-types/${socialtype}`
      );
    } catch (error) {
      console.error("유효하지 않은 URL입니다!", error);
    }
  };

login 함수는 각각의 버튼을 클릭 시 백엔드 쪽에서 구축해놓은 로그인 api와 연결되게 하였는데, 이 때 process.env.REACT_APP_BE_HOST 라는 환경 변수를 사용한 예약어 부분이 있다 ! React는 Node.js를 사용하기 때문에 process.env[key] 의 형태로 환경 변수를 사용하는데 … (이어서 계속)

환경 변수

.env 파일을 다음과 같이 설정하였다.

# 등호 앞뒤로 띄어쓰기 없음 주의 !
REACT_APP_BE_HOST='https://localhost'

REACT_APP_ 은 기본 예약어이고 뒤쪽에 붙인 BE_HOST 는 임의로 설정한 것이다. 따라서 login 함수를 통해 각각의 소셜 로그인 창으로 이동할 때, 환경 변수로 설정한 주소에 뒤쪽에 연결된 문자열로 된 api 명세가 연결되어 이동한다 !

그리고 .gitignore 파일에는 다음과 같이 작성되어 있다. 만약 .env.local을 사용할 경우 .gitignore 파일에 수정 후 .env.local 파일을 작성해야 한다.

# misc
.DS_Store
.env
.env.development.local
.env.test.local
.env.production.local

그러나 실제 Node.js 프로젝트에서는 환경변수를 효과적으로 관리하기 위해서 dotenv 라는 라이브러리를 주로 사용하는데, 이는 다음에 기회가 된다면 알아보도록 하자 !

로그인 등의 인증(Auth) 기능을 프론트엔드 쪽에서 사용할 때, 백엔드 쪽에서 accessToken 같은 JWT Token을 받아와 쿠키 또는 local 저장 공간에 저장하여 사용한다. 따라서 쿠키를 이용해 로그인 여부를 판별하는 방식을 사용했는데, 이 때 react-cookie 의 Cookies 를 이용해 함수를 정의하여 사용한다 !

npm install react-cookie

yarn add react-cookie

📁 <src/api/cookie.js>

import { Cookies } from 'react-cookie';

const cookies = new Cookies();

export const setCookie = (key, value) => {
  cookies.set(key, value, { path: '/' });
};

export const getCookie = (key) => {
  return cookies.get(key);
};

export const removeCookie = (key) => {
  cookies.remove(key, { path: '/' });
};

react-cookie 의 Cookies 를 import하고 cookies 객체를 선언하였다.

함수는 크게 쿠키 값을 설정하는 setCookie(), 쿠키 값을 가져오는 getCookie(), 쿠키 값을 삭제하는 removeCookie() 로 나눌 수 있다. 메인 화면을 렌더링하는 데에는 getCookie() 함수만 사용하였고, removeCookie() 함수는 후에 로그아웃 기능 구현 시 사용할 예정이다.

📁 <src/screen/MainScreen.jsx>

import { getCookie } from '../api/cookie';

function MainScreen(props) {
  const token = getCookie('access_token');

  if (!token) {
    return(
      <BeforeLoginSet />
    );    
  } else {
    return (
      <AfterLoginSet />
    );
  }
}

export default MainScreen;

작성한 📁 cookie.js 파일을 불러와 위와 같이 getCookie() 함수를 사용하였다.

token 객체를 정의하고 accessToken을 받아오게 하였는데, 이 때문에 로그인이 완료되면 token이 true가 되어 로그인 후 화면이 렌더링된다.

More … CookiesProvider

추후에 타입스크립트와 redux를 적용한다면, store에 저장된 전역 상태를 모든 컴포넌트에서 사용하기 위해 CookiesProvider 로 하위 컴포넌트를 감싸 수정 가능하다는 점 !

import {CookiesProvider} from 'react-cookie';

ReactDOM.render(
	<CookiesProvider>
  		<App/>
  	</CookiesProvider>
  document.getElementById('root')
)