[React]리액트 쿠키 react-cookie 다루기

[ 쿠키란? ]

 

 쿠키는 사용자가 웹 페이지 방문시 클라이언트 로컬에 저장되는 키와 값이 들어있는 데이터 파일입니다. Key와 Value 쌍으로 구성되며 String 형태로 이루어져 있습니다.

 최대 300개까지 저장 가능하며 하나의 도메인당 20개의 값만 가질 수 있습니다. 이때 하나의 쿠키값은 4KB까지 가능합니다.

 

 웹 서버가 웹 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보라고 할 수 있습니다.

 

 우리는 이 쿠키를 통해 브라우저를 종료했다가 다시 접속하더라도 로그인 상태를 유지할 수 있게 되는 것입니다. 

 

 

★ 쿠키의 장점

1. 세션관리: 로그인, 접속 시간 등 서버가 알아야 할 정보를 저장할 수 있다. 

2. 개인화: 사용자마다 다르게 적절한 페이지를 보여줄 수 있다. 

3. 트래킹: 사용자의 행동과 패턴을 분석하여 기록할 때 사용된다. 

 

 

★ 쿠키의 단점

1. 사생활 침해 가능성: 방문한 웹 사이트에 대한 정보 및 개인정보가 기록되어 있다. 

2. 최약한 보안: 사용자에게 저장되기 때문에 임의로 고치거나 삭제가 가능하다

3. 트래픽: 매번 헤더에 쿠키에 대한 정보를 추가해서 보내기 때문에 상당한 트래픽을 발생시킨다. 

 

 

 

 

[ react-cookie 사용법 ]

- 설치

$ npm i react-cookie

 

- CookiesProvider

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { CookiesProvider } from 'react-cookie';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <CookiesProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </CookiesProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

- 기본 사용법

 

 쿠키와 관련된 함수들을 모아 cookie.js 파일에 저장하겠습니다. 

 

 name은 쿠키 Key 문자열, value는 쿠키 Value 문자열 또는 객체를 의미합니다. 

 

 options는 객체 형태이며 다음 값들이 올 수 있습니다. 

 

options	설명
path	string, 쿠키를 접근할 수 있는 경로 지정
expires	Date, 쿠키 만료 날짜 지정
maxAge	number, 초 단위로 쿠키의 상대적인 max age 지정
secure	boolean, HTTPS로만 접근 가능하게 할 것인지 지정

 

// cookie.js

import { Cookies } from "react-cookie";

const cookies = new Cookies();

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

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

export const removeCookie = (name) => {
  return cookies.remove(name);
}

 

- 예제

// CookieTest.jsx

import React from 'react';
import { 
  setCookie, getCookie, removeCookie
} from './config/cookie';

const CookieTest = () => {
  const onSet = () => {
    setCookie('cookieKey', 'cookieValue', {
      path: '/',
      secure: true,
      maxAge: 3000
    })
  }
  const onGet = () => {
    const getVal = getCookie('cookieKey');
    console.log(getVal);
  }
  const onRemove = () => {
    removeCookie('cookieKey')
  }

  return (
    <>
      <button onClick={onSet} type="button">set cookie</button>
      <button onClick={onGet} type="button">get cookie</button>
      <button onClick={onRemove} type="button">remove cookie</button>
    </>
  );
};

export default CookieTest;