[React] React cookie

bunny.log·2022년 7월 8일
0

cookie란

  • 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 데이터파일입니다.
  • Key와 Value로 구성되고, String의 형태로 이루어져 있습니다.
  • 유효시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되어도 유지됩니다.
  • 클라이언트 상태로 로컬에 저장했다가 참조하여 정보를 가져옵니다.
  • 300개까지 저장이 가능하며, 하나의 도메인당 20개의 값만 가질 수 있고, 하나의 쿠키값은 4KB까지 저장 가능합니다.
  • 사용자가 따로 요청하지 않아도 Request시에 Request Header를 넣어서 자동으로 서버에 전송합니다.

사용이유

세션관리 로그인, 접속 시간 등 서버가 알아야 할 정보를 저장할 때 사용합니다.
개인화 사용자마다 다르게 적절한 페이지 보이도록 할 때 사용합니다.
트래킹 사용자의 행동과 패턴 분석하여 기록할 때 사용합니다.

단점

방문한 웹 사이트에 대한 정보 및 개인정보가 기록되어 사생활을 침해할 수 있습니다.
사용자에게 저장되기 때문에 임의로 고치거나 삭제가 가능하며, 보안이 취약합니다.
매번 헤더(Http Header)에 쿠키에 대한 정보를 추가해서 보내기 때문에 상당한 트래픽을 발생시킵니다.

npm install react-cookie

set cookie 쿠키에 저장
get cookie 쿠키값 가져오기
remove cookie 쿠키를 삭제

import { Cookies } from "react-cookie";

const cookie = new Cookies();

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

export const getCookie = (name) => {
  return cookie.get(name);
};
export const removeCookie = (name) => {
  return cookie.remove(name);
};
profile
나를 위한 경험기록

0개의 댓글