[React] React-cookie 패키지 사용하기

React-cookie

React에서 cookie를 편리하게 다룰수 있게 해주는 패키지이다.

npm i react-cookie

적용하기

cookie를 사용할 컴포넌트들의 Root 컴포넌트를 CookiesProvider를 통해 감싸준다.

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

ReactDOM.render(
  <CookiesProvider>
    <Root />
  < /CookiesProvider>,
  document.getElementById('root')
)

쿠키값을 get, set하는 로직을 수행하는 component

쿠키에 관한 작업을 진행할 컴포넌트에서 React Hooks 처럼 사용하여 쿠키를 조작할 수 있다.

import { useCookies } from 'react-cookie'

function Login() {
  const [cookies, setCookie, removeCookie] = useCookies()

  return (
      <div>
        <button onClick={() => {
           setCookie("access_token", "access_token_value", {
           path: "/",
           maxAge: 3600,
        });              
        }}>set</button>
        <button onClick={() => {
            removeCookie('access_token')
          }}>remove</button>

          <p>{cookies[0]}</p>
    </div>
  )
}

요약

• cookies: {key: value} 가 모여있는 object
• setCookie(name, value, {...obtions })
  • 쿠키를 저장
  • name(string): 쿠키에 저장될 이름
  • value(string | object): name이라는 key 값이 가지는 value
  • optiopn(object): 적용할 쿠키의 옵션
    -path, secure, httpOnly, expire, maxAge
• removeCookie(name, {...options}) : 쿠키삭제, options(setCookie 와 동일)