react-cookie : 정리

1️⃣ 설치

pnpm add react-cookie

2️⃣ 사용법

1.선언

import { useCookies } from "react-cookie";

const [cookies, setCookie, removeCookie] = useCookies(["email", "nickname", "token"]);

2.사용 예시

const expiration = new Date(Date.now() + 1000 * 60 * 30);
setCookie("token", response.data.data.token, {
  path: "/",
  expires: expiration,
});
setCookie("email", response.data.data.email, {
  path: "/",
  expires: expiration,
});
setCookie("nickname", response.data.data.nickname, {
  path: "/",
  expires: expiration,
});

선언을 위에처럼 해주고 useCookies옆 괄호 안에 배열로 자신이 만들고 싶은 속성의 이름을 string으로 집어넣는다. 그 후에 setCookie를 사용해서 처음 인자에 만든 속성이름을 넣고 두번째 인자에 속성값으로 넣고싶은 값을 넣는다.

세번째 인자에는 객체로 언제 그 쿠기가 소멸되게 설정할 수 있다. path에 소멸 후에 갈 주소를 넣고 expire에는 쿠키가 설정된 시간 후로부터 소멸되는 시간을 설정할 수 있다.

<span style={{ overflow: "hidden" }}>ID : {cookies.email}</span>
<span style={{ overflow: "hidden" }}>
	nickname : {cookies.nickname}
</span>

담은 쿠키를 사용하고 싶을 때는 위의 예시처럼 중괄호 안에 cookies.자신이 설정한 이름을 넣으면 된다.

removeCookie("token");

쿠키의 속성을 삭제하고 싶을 때 위처럼 사용하면 된다.

3️⃣ 뭔가 이상한 점

setCookie와 removeCookie를 선언할 때 그 앞의 순서를 지켜서 사용하지 않더라도 쉼표를 넣어줘야 오류가 안 생긴다. (왜 이렇게 만들었지…)

1. setCookie만 사용하고 싶을 때

const [, setCookie] = useCookies(["email", "nickname", "token"]);

1. removeCookie만 사용하고 싶을 때

const [,, removeCookie] = useCookies(["email", "nickname", "token"]);