React-Cookie

1. Issue

• 클라이언트에서 로그인 요청이 들어오면 서버에서 토큰을 발급한다.
• 발급받은 토큰을 Redux로 관리한다.
• 페이지를 새로고침 하면 Redux state가 초기화된다.

---

2. About

• 웹 서버가 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보
• 웹페이지 방문 시 방문 기록 등 브라우저의 정보들이 저장된 텍스트 파일

---

3. Install

Terminal

$ npm install react-cookie

 

CDN

<script
  crossorigin
  src="https://unpkg.com/react@16/umd/react.production.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/universal-cookie@3/umd/universalCookie.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-cookie@3/umd/reactCookie.min.js"
></script>

---

4. Use

// index.js

import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';

export default function Root() {
  return (
    <CookiesProvider>
      <App />
    </CookiesProvider>
  );
}

 

import { useCookies } from 'react-cookie'

const [cookies, setCookie, removeCookie] = useCookies(['cookie_name']);

const expireDate = new Date();
expireDate.setMinutes(expireDate.getMinutes() + 10);

setCookie(
	'cookie_name',
    {
    	user_id: userId,
        user_name: userName
    },
    {
    	path: "/",
        expires: expireDate
    }
);

console.log(cookies.user_id);

removeCookie("cookie_name");