react-cookie로 토큰 저장하기

로그인/로그아웃 기능을 구현하면서 JWT 인증을 받기 위해 토큰을 저장해야 했다. 로컬 스토리지 말고 다른 방법을 사용해 보고 싶었다. 찾아 보니 React에서 react-cookie 패키지를 제공하고 있었다. 사용해 보지 않은 패키지라 경험 삼아 써 보기로 했다.

설치

npm install react-cookie

Cookies.js 이름의 util 파일을 새로 만들어 set, get, remove 할 수 있는 함수들을 모아 두었다.

• setCookie: 쿠키를 저장하는 함수
• getCookie: 쿠키를 가지고 오는 함수
• removeCookie: 쿠키를 삭제하는 함수

setCookie에서는 key, value, option 세 가지 파라미터를 받는다.

• 옵션
  1. path
  : 쿠키 값을 저장하는 서버 경로이며, 보통 /이다. 모든 페이지에서 쿠키에 접근할 수 있다는 뜻이다. 만약 /123인 경우에 .com/123 페이지에서만 접근할 수 있게 된다.
  2. expires: 쿠키 만료 시간을 지정할 수 있으며 Date 객체를 받는다.
  3. httpyOnly: JS의 document.cookie를 이용해서 쿠키에 접속하는 것을 차단해 비정상적인 접근을 막는다.
  4. secure: http로 통신하는 경우만 쿠키를 서버로 전송한다.

removeCookie에서는 setCookie에서 저장한 모든 내용을 지워야 하기 때문에 key와 option을 꼭 받아 와야 한다.

Cookie.js

import { Cookies } from "react-cookie";

const cookies = new Cookies();

export const setCookie = (name, value, option) => {
  return cookies.set(name, value, { ...option });
};

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

export const removeCookie = (name, option) => {
  return cookies.remove(name, { ...option });
};

setCookie는 이렇게 사용했다. 아래의 코드는 로그인 시 api로부터 받은 응답의 토큰을 가지고 와 저장하고 있다.

if (res.data.token) {
	setCookie("token", `JWT ${res.data.token}`, {
		path: "/",
		sameSite: "strict",
	});
}

getCookie는 내가 현재 쿠키를 가지고 있는지, 즉 로그인이 되어 있는지 확인해야 하는 부분에 사용해 주었다. 아래의 코드 같은 경우, 로그인 여부에 따라 렌더링되는 컴포넌트가 다르도록 사용했다.

const cookie = getCookie("token");
{cookie ? <CartBtn to="/cart" /> : <CartBtn to="/login" />}

removeCookie는 당연히 로그아웃 용도로 사용했다. 재렌더링할 필요 없이 쿠키에서 토큰이 삭제되는 것을 확인할 수 있었다.

const logout = removeCookie("token");
<button onClick={logout}>로그아웃</button>

로컬 스토리지에 저장하는 것은 해 보았지만 쿠키는 처음 사용해 본 만큼 다음에는 두 가지 방법의 장단점도 다뤄 볼 예정이다.