React - Cookie

https://doqtqu.tistory.com/303

 

설치

npm install universal-cookie --save

yarn add universal-cookie --save

 

Cookie는 왜 사용?

브라우저에 값을 저장하기 위해서. 

저장된값은 수정, 삭제 그리고 가져와서 사용도 가능하다.

예) 로그인 된 사람에게 우리는 미니프로젝트 1주차에 토큰을 지급했다. 그 토큰이 유저들의 웹 브라우저 쿠키에 저장되어 있어서 그 사람이 모든 페이지를 이용 가능했다. 만약 쿠키에 로그인 된 사람의 정보(토큰 혹은 그 어떤거)가 저장이 안되있으면, 로그인 후, 메인페이지 구경하다가 다른 페이지를 보러갔는데 또 로그인 하라는 문제가 발생한다. 

 

Cookie.js

// 설치된 패키지 import
import Cookies from "universal-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);
}

 

사용법

// 값을 저장할때는 setCookie하고 뒤에 저장할 key랑, 저장하고싶은 value를 적는다
setCookie(key, value)

// 값을 가져올땐 key를 이용해서 가져온다
getCookie(key);

// 값을 지울땐 key 를 이용해서 지운다.
removeCookie(key)