[React.js] universal-cookie를 이용한 쿠키 설정

 쿠키(Cookie)의 개념 

쿠키란?

인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터(클라이언트)에 설치되는 작은 기록 정보 파일이다. HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 하며, 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다.

 

쿠키의 종류 

세션쿠키 (Session Cookie)

보통 만료시간(Expire data)를 설정하고 메모리에만 저장되며 브라우저 종료 시 쿠키를 삭제한다.

지속쿠키(Persistent Cookie)

장시간 유지되는 쿠키파일로 저장되어 브라우저 종료와 관계없이 사용한다.

Secure Cookie

HTTPS에서만 사용, 쿠키 정보가 암호화되어 전송한다.

Third-Party Cookie

방문한 도메인과 다른 도메인의 쿠키, 광고 배너 등을 관리할 떄 유입 경로를 추적하기 위해 사용한다.

 

쿠키의 단점

쿠키에 대한 정보를 매 통신 시 Header에 추가하여 보내기 때문에 상당한 트래픽을 발생시킨다.

결제 정보 등을 쿠키에 저장하였을 때 쿠키가 유출되면 보안에 대한 문제점도 발생할 수 있다.

 

 React에서 쿠키를 사용하는 방법 

universal-cookie

react-cookie보다 더 업그레이드된 버전의 모듈

 

설치방법

npm install universal-cookie
# or
yarn add universal-cookie

 

아래와 같이 Cookie.js를 생성 후 

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);
}

 

Cookie를 사용할 페이지에서 아래와 같이 사용하는 방법이 있다.

import { setCookie, getCookie } from '../actions/Cookie';

setCookie([cookie_key], [cookie_value])
getCookie([cookie_key]);

 

참고 자료 :

쿠키(Cookie)란?