[데이터 관리] react-cookie

2023. 12. 5. 23:17·기술/라이브러리,도구

1. 쿠키

우리가 흔히 사용하는 웹 사이트들은 HTTP 프로토콜을 이용하여 통신한다. HTTP는 비연결성 특징을 가지고 있어 항상 연결된 상태가 아니라, 필요할 때마다 요청을 보내고 응답을 받는 방식이다. 이러한 특성으로 인해 웹 브라우저는 사용자의 상태를 유지하고 관리하기 위해 '쿠키'라는 데이터를 활용한다.

 

예를 들어 웹 서버로 로그인 요청을 보내면, 서버는 로그인 요청에 대한 응답과 함께 브라우저에서 저장할 정보를 보낸다. 브라우저는 그 정보를 쿠키로 저장해 두었다가 다음에 웹 서버에 연결할때 저장해 두었던 쿠키를 송신함으로써 서버는 연결을 시도하는 상대가 누구인지 식별할 수 있다.

 

쿠키는 사용자 인증용도 뿐만 아니라 언어 정보, 야간모드, 사용자 팝업창 설정( 오늘 하루동안 열지않음) 등 다양한 처리가 가능하다.

 

쿠키는 개발자 도구 창에서도 확인할 수 있다.

2.설치

yarn add react-cookie //리액트 쿠키
yarn add react-jwt //토큰 디코딩

3.사용

쿠키는 서버에서 헤더로 집어 넣어줄 수도 있고, 서버에서 보내준 토큰 값을 브라우저에서 set-cookie를 통해 넣어줄 수 있다.

사용방법은 로컬스토리지와 비슷하다, setCookie를 통해 정보를 저장하고, get을 통해 가져온다. 후에 remove로 삭제한다

import { Cookies } from "react-cookie";

const cookies = new Cookies();

// 로그인 시 사용자 정보를 담은 쿠키를 생성한다
export const setCookie = (name, value, option) => {
  return cookies.set(name, value, { ...option });
};

// 사용자 인증이 필요한 데이터를 요청할 때 쿠키를 가져온다
export const getCookie = (name) => {
  return cookies.get(name);
};

//쿠키를 지운다
export const removeCookie = (name) => {
  return cookies.remove(name);
};

 

저작자표시 비영리 변경금지 (새창열림)

'기술 > 라이브러리,도구' 카테고리의 다른 글

[번들러] 모듈 번들러란 무엇인가  (1) 2025.05.19
[스타일링] styled-components (스타일드 컴포넌트)  (1) 2023.11.26
[UI/UX] Progress Indicator- Skeleton UI (스켈레톤 UI, loading)  (0) 2023.11.26
'기술/라이브러리,도구' 카테고리의 다른 글
  • [번들러] 모듈 번들러란 무엇인가
  • [스타일링] styled-components (스타일드 컴포넌트)
  • [UI/UX] Progress Indicator- Skeleton UI (스켈레톤 UI, loading)
빔네모
빔네모
console.log("빔네모")
  • 빔네모
    bimnemo("개발")
    빔네모
  • 전체
    오늘
    어제
    • 기록 (153)
      • 기술 (42)
        • JavaScript (6)
        • TypeScript (9)
        • React.js (10)
        • Next.js (0)
        • 라이브러리,도구 (4)
        • HTML,CSS (4)
        • CS (5)
        • BE (4)
      • 개발 (99)
        • 프로젝트 (0)
        • 트러블슈팅 (5)
        • 알고리즘(코딩테스트) (94)
      • 정보 (4)
      • 취미 (8)
        • 감상 (8)
  • 인기 글

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
빔네모
[데이터 관리] react-cookie
상단으로

티스토리툴바