[데이터 관리] react-cookie

1. 쿠키

우리가 흔히 사용하는 웹 사이트들은 HTTP 프로토콜을 이용하여 통신한다. HTTP는 비연결성 특징을 가지고 있어 항상 연결된 상태가 아니라, 필요할 때마다 요청을 보내고 응답을 받는 방식이다. 이러한 특성으로 인해 웹 브라우저는 사용자의 상태를 유지하고 관리하기 위해 '쿠키'라는 데이터를 활용한다.

 

예를 들어 웹 서버로 로그인 요청을 보내면, 서버는 로그인 요청에 대한 응답과 함께 브라우저에서 저장할 정보를 보낸다. 브라우저는 그 정보를 쿠키로 저장해 두었다가 다음에 웹 서버에 연결할때 저장해 두었던 쿠키를 송신함으로써 서버는 연결을 시도하는 상대가 누구인지 식별할 수 있다.

 

쿠키는 사용자 인증용도 뿐만 아니라 언어 정보, 야간모드, 사용자 팝업창 설정( 오늘 하루동안 열지않음) 등 다양한 처리가 가능하다.

 

쿠키는 개발자 도구 창에서도 확인할 수 있다.

2.설치

yarn add react-cookie //리액트 쿠키
yarn add react-jwt //토큰 디코딩

3.사용

쿠키는 서버에서 헤더로 집어 넣어줄 수도 있고, 서버에서 보내준 토큰 값을 브라우저에서 set-cookie를 통해 넣어줄 수 있다.

사용방법은 로컬스토리지와 비슷하다, setCookie를 통해 정보를 저장하고, get을 통해 가져온다. 후에 remove로 삭제한다

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) => {
  return cookies.remove(name);
};