react-cookie 사용하기

작품을 진행하던 중 사용자 정보를 다른 페이지에서 활용할 일들이 생겨 방법을 고민해봤다.

우선 기존에는 Redux를 이용하여 사용자가 로그인을 완료하면 Redux에 저장한 후 그 데이터를 활용하려 했다.

그러나, 이 방법의 심각한 문제점은 새로고침을 하면 Redux의 정보가 모두 날아간다는 것이었다.

따라서 사용자 정보를 로컬 브라우저에 담아야 했고, 쿠키를 생성하여 사용하기로 했다

쿠키를 다음과 같이 알고있다.

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

 

하지만 쿠키에는 토큰에 관한 정보를 넣을 수도 있다. 즉 토큰을 쿠키처럼 사용할 수 있는 것이다.

cookie를 설정 및 사용하려면 react-cookie에서 제공하는 useCookies라는 hook을 사용해야 한다.

import { useCookies } from 'react-cookie'
const [cookies, setCookie, removeCookie] = useCookies(['cookie_name'])

사용자가 로그인에 성공하면 서버로부터 받은 사용자의 정보를 쿠키에 저장한다.

const login = async (e: any) => {
  e.preventDefault()
  const result: any = await api.login(id, pwd)
  if (result) {
    handleCookie(result.data.userid, result.data.username, result.data.email)
  } else {
    alert('로그인 실패')
  }
}
const handleCookie = (userid: string, username: string, email: string) => {
  const expireDate = new Date()
  expireDate.setMinutes(expireDate.getMinutes() + 10)
  setCookie(
    'cookie_name',
    {
      userid: userid,
      username: username,
      email: email,
    },
    {
      path: '/',
      expires: expireDate,
    }
  )
}

setCookie는 3가지의 매개변수를 받는다.

1. 쿠키의 이름
2. 저장할 정보를 담은 객체
3. 쿠키 설정 값

setCookie 함수의 설정에서 path를 지정하면 해당 페이지에서만 쿠키가 작동하며
'/'로 설정하면 전체 페이지에서 사용이 가능하다.

expires는 쿠키의 만료시간을 지정하는 변수이다.

---

이렇게 설정한 쿠키를 다른 페이지에서 사용하고 싶다면 해당 페이지의 컴포넌트에서 useCookie를 사용하면 된다.

쿠키 내부의 정보들을 접근하고 싶다면 . 을 이용하여 접근하면 된다.

const [cookies, setCookie, removeCookie] = useCookies(['userInfo'])
const onStart = () => {
  if (!cookies.userInfo) {
    alert('로그인 후 이용해주세요.')
  } else {
    router.push('/qna')
  }
}