[React] 리액트 쿠키 사용법

 

웹사이트에서 '쿠키'를 이용하면 클라이언트를 식별하는데 유용하게 활용이 가능하다.

나는 쿠키로 회원과 비회원을 구분해 useState 훅으로 ui를 유동적으로 변경하는 방식으로 프론트엔드를 개발중이다.

그래서 리액트의  'cookie' 사용법에 대해 포스팅하려고 한다.

여기서 주의할 것은 'cookie'와 'react-cookie'는 문법이 다르다는 점이다. 'js-cookie'도 조금 다르다.

난 이전에 'react-cookie'로 개발을 해봤는데, 이번에는 사용해보지 않은 'cookie'를 활용해보았다.

yarn 홈페이지 기준 이용자 수가 월등히 많은걸 보니 훨씬 상용적으로 쓰이는 듯 싶었다.

아무튼 패키지를 설치할 때 세 가지를 확실히 구분하는게 좋을 듯.

 

우선, 라이브러리를 설치하고, 사용할 컴포넌트에서 import 해야한다.

yarn add cookie // npm install cookie

import { serialize, parse } from 'cookie';

 

그리고 serialize로 쿠키 이름,값,경로를 설정한 후 parse로 읽어들이면 된다.

// serialize() 함수로 '쿠키 이름' , 쿠키 값 , 경로를 저장할 수 있다. 경로를 '/'로 설정하면 도메인 전역에서 사용할 수 있다.
document.cookie = serialize('userId', 'sh6351' ,  { path: '/' });

// 쿠키에 저장한 데이터를 꺼내와 변수에 치환하여 활용 가능하다.
  const [userId, setUserId] = useState('');
  useEffect(() => {
    const cookies = parse(document.cookie);
    setUserId(cookies.userId || '');
  }, []);

이렇게 설정된 쿠키로 클라이언트마다 고유한 정보를 식별할 수도 있고, 다양한 기능에 활용이 가능하다. 

 

serialize와 parse 함수가 궁금하다면 아래를 참고하자.

 

1.serialize 함수:

serialize 함수는 객체를 쿠키 문자열 형태로 직렬화하는 역할을 합니다.

직렬화된 쿠키 문자열은 쿠키를 설정할 때 사용됩니다.
cookie 라이브러리와 js-cookie 라이브러리에서 모두 지원합니다.
주요 매개변수:
첫 번째 매개변수: 쿠키의 이름 (문자열)
두 번째 매개변수: 쿠키의 값 (문자열)
세 번째 매개변수: 옵션 객체 (선택적) - 쿠키의 속성들을 설정할 수 있습니다.

 

import { serialize } from 'cookie';
const cookieString = serialize('userId', '12345', { path: '/', expires: 1 });
// 쿠키 문자열 형태로 직렬화: "userId=12345; Path=/; Expires=Fri, 29 Jul 2023 0

2.parse 함수:

parse 함수는 쿠키 문자열을 객체로 역직렬화하는 역할을 합니다.
역직렬화된 객체는 쿠키 정보를 읽을 때 사용됩니다.
cookie 라이브러리와 js-cookie 라이브러리에서 모두 지원합니다.

주요 매개변수:
첫 번째 매개변수: 쿠키 문자열 (문자열)

 

import { parse } from 'cookie';
const cookieObject = parse('userId=12345; Path=/; Expires=Fri, 29 Jul 2023 09:00:00 GMT');
// 역직렬화된 객체: { userId: '12345', Path: '/', Expires: 'Fri, 29 Jul 2023 09:00:0