useCookie Hook을 사용하여 React에서 브라우저 쿠키 관리-JS 튜토리얼-php.cn

useCookie Hook을 사용하여 React에서 브라우저 쿠키 관리

Barbara Streisand

풀어 주다： 2025-01-27 16:40:09

원래의

348명이 탐색했습니다.

Managing Browser Cookies in React with useCookie Hook

이 기사에서는 브라우저 쿠키 관리를 간소화하기 위해 사용자 정의 React 후크 useCookie를 구축하는 방법을 보여줍니다. 브라우저 쿠키는 세션 또는 애플리케이션 섹션 전반에 걸쳐 지속적인 데이터를 저장하는 간단한 방법을 제공합니다.

1. 쿠키 유틸리티 기능

후크를 생성하기 전에 일반적인 쿠키 작업(쿠키 설정, 검색 및 제거)에 대한 도우미 함수를 정의합니다.

`setCookie`: 쿠키 설정 또는 업데이트

이 함수는 키-값 쌍을 저장하고 선택적으로 만료 시간을 지정합니다.

<code class="language-typescript">export function setCookie(key: string, value: unknown, expireDays = 1): void {
  const d = new Date();
  d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
  document.cookie = `${key}=${value}; expires=${d.toUTCString()}; path=/`;
}</code>

로그인 후 복사

기능: 키, 값 및 선택적 만료를 허용합니다(기본값은 1일). 만료 날짜를 계산하고 이에 따라 쿠키를 설정합니다.
예: setCookie("theme", "dark", 7); // 7일 동안 지속되는 쿠키를 설정합니다

`getCookie`: 쿠키 값 검색

이 함수는 키를 사용하여 쿠키의 값을 검색합니다.

<code class="language-typescript">export function getCookie(key: string): string | undefined {
  const name = `${key}=`;
  const decodedCookie = decodeURIComponent(document.cookie);
  const ca = decodedCookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return undefined;
}</code>

로그인 후 복사

메커니즘: document.cookie을 디코딩하여 배열로 분할하고 지정된 키를 검색합니다. 값 또는 undefined을 반환합니다.
예: const theme = getCookie("theme"); // "테마" 값을 검색합니다

`removeCookie`: 쿠키 삭제

이 함수는 만료되지 않은 빈 값으로 쿠키를 덮어써서 쿠키를 제거합니다.

<code class="language-typescript">export function removeCookie(key: string): void {
  document.cookie = `${key}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
}</code>

로그인 후 복사

예: removeCookie("theme"); // "테마" 쿠키 삭제

2. useCookie훅

useCookie 후크는 구성 요소 내에서 우아한 쿠키 관리를 위해 React의 useState와 유틸리티 기능을 통합합니다.

훅 초기화

<code class="language-typescript">import { useState } from "react";
import { getCookie, setCookie, removeCookie } from "@/utils/cookie";

export default function useCookie<T>(key: string, initialValue: T): [T | undefined, (action: T | ((prevState: T) => T)) => void, () => void] {
  const [value, setValue] = useState(() => getCookie(key) as T || initialValue);
  // ...rest of the hook implementation
}</code>

로그인 후 복사

매개변수: key(쿠키 키), initialValue(쿠키가 없는 경우 기본값).
상태 초기화: 쿠키 값을 검색하거나 initialValue을 사용합니다.

상태 변경 전달

handleDispatch 함수는 상태와 쿠키를 모두 업데이트합니다.

<code class="language-typescript">  const handleDispatch = (action: T | ((prevState: T) => T)) => {
    if (typeof action === "function") {
      setValue((prevState) => {
        const newValue = (action as (prevState: T) => T)(prevState);
        setCookie(key, newValue);
        return newValue;
      });
    } else {
      setValue(action);
      setCookie(key, action);
    }
  };</code>

로그인 후 복사

메커니즘: 직접적인 값 업데이트와 기능 업데이트(상태 변환용)를 모두 처리합니다. 쿠키 동기화를 보장합니다.

상태 정리

clearState 함수는 쿠키를 제거하고 상태를 재설정합니다.

<code class="language-typescript">export function setCookie(key: string, value: unknown, expireDays = 1): void {
  const d = new Date();
  d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
  document.cookie = `${key}=${value}; expires=${d.toUTCString()}; path=/`;
}</code>

로그인 후 복사

기능: 쿠키를 제거하고 상태를 undefined으로 설정합니다.

Hook API 반환

후크는 현재 값, 디스패처 함수, 지우기 함수 등의 배열을 반환합니다.

<code class="language-typescript">export function getCookie(key: string): string | undefined {
  const name = `${key}=`;
  const decodedCookie = decodeURIComponent(document.cookie);
  const ca = decodedCookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return undefined;
}</code>

로그인 후 복사

3. useCookie훅

사용하기

React 구성 요소의 사용 예:

<code class="language-typescript">export function removeCookie(key: string): void {
  document.cookie = `${key}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
}</code>

로그인 후 복사