React-cookie 라이브러리

사용법이 간단하고 쿠키를 쉽게 관리할 수 있어서 프로젝트에 사용했다.

설정

utils/cookies.ts

import { Cookies } from 'react-cookie';

const cookies = new Cookies();

export const setCookie = (
  name: string,
  value: string | boolean,
  option?: any,
) => {
  return cookies.set(name, value, { ...option });
};

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

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

• utils 폴더에 쿠키 파일 생성

---

import { setCookie, getCookie } from '../../utils/cookie';

setCookie('accessToken', accessToken, { path: '/', secure: true, sameSite: 'Lax' });
setCookie('MODAL_EXPIRES', true, { path: '/', expires });

console.log(getCookie('accessToken'))
console.log(getCookie('MODAL_EXPIRES'))

• import 해서 사용

---

만료시간

utils/expires.ts

// 팝업 만료시간
export const getExpiredPopUpDate = (days: number) => {
  const date = new Date();
  date.setDate(date.getDate() + days); // 일
  return date;
};

// 토큰 만료시간
export const getExpiredCookieHours = (hours: number) => {
  const hour = new Date();
  hour.setHours(hour.getHours() + hours); // 시간
  return hour;
};

---

index.tsx

const expires = getExpiredPopUpDate(1); // 1일
setCookie('MODAL_EXPIRES', true, { path: '/', expires });

const expires = getExpiredCookieHours(1); // 쿠키만료 - 1시간
setCookie('accessToken', accessToken, {
  path: '/',
  // secure: true,
  sameSite: 'Lax',
  expires,
});