react-cookie 쉽게 사용하기

 

회원가입과 로그인 같은 인증(auth) 기능을 구현하기 위해서

프론트엔드에서 쿠키에 토큰(jwt)을 저장하는 경우가 많습니다.

 

저는 그런 경우에 react-cookie를 자주 사용하는데요,

패키지 설명을 읽어보면 조금 복잡하게 되어있더라구요.

 

저는 거의 인증기능에서만 쿠키를 이용하기 때문에,

보다 쉽게 사용하는 방법을 설명하고자 합니다!

 

※ 만약 Hooks 방식으로 쿠키를 이용하고 싶은 분들은 패키지 설명을 보시는 것을 추천드립니다.

 

 

1. 쿠키 관련 함수 만들기

우선 패키지를 먼저 다운받습니다.

npm install react-cookie // yarn add react-cookie

 

그 후 저는 쿠키와 관련된 함수를 모아두는 util 파일을 하나 만들었습니다.

cookie.ts (혹은 cookie.js)를 만들어서 다음과 같이 추가했습니다.

// cookie.js (or cookie.ts): 별도 파일이 아니어도 됩니다.
import { Cookies } from "react-cookie"

const cookies = new Cookies()

export const setCookie = (name: string, value: string, option?: any) => {
  return cookies.set(name, value, { ...option })
}

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

 

사실 이제 끝입니다!

만든 set과 get 함수로 쿠키를 저장하고 이용하면 되는 것이죠.

한 번 토큰을 쿠키를 통해 저장해볼까요?

 

 

2. 쿠키 util 사용하기

저는 로그인 함수가 있는 곳에서 setCookie를 통해 jwt 토큰을 저장했습니다.

...
const jwtToken = await signIn(signInPayload)
if (jwtToken) {
  setCookie('myToken', token, {
    path: "/",
    secure: true,
    sameSite: "none",
  })
}
...

 

그리고 실제 사용하는 부분에서는 getCookie를 통해 가져다 썼습니다.

await axios({
  method: 'get',
  url: 'api.example.com/auth/currentUser',
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${getCookie('myToken')}`,
  }
})

 

jwt 토큰이나 authorization에 대해 모를 수는 있어도

cookie 자체를 활용하는 것은 어렵지 않죠??