HTTP 쿠키라는 용어는 포춘 쿠키에서 만들어졌습니다. 포춘 쿠키는 19세기 일본 교토까지 거슬러 올라갑니다. 이 쿠키 안에는 특수 메시지가 내장되어 있습니다. 웹 개발자인 Lou Montulli 는 HTTP 쿠키를 발명하기 위해 한 프로그램에서 다른 프로그램으로 작은 데이터 파일을 보내기 위해 Unix 시스템에서 사용하는 방법뿐만 아니라 이 아이디어를 사용했습니다.

이 자습서에서는 JavaScript를 사용하여 HTTP 쿠키를 탐색하고 쿠키를 설정하고 검색하기 위해 마우스 게임을 실행한 방법을 살펴봅니다.

문제 설명

accessToken. _ 다음으로 생성된 정보를 사용하여 사용자 정보를 검색하고 싶습니다 accessToken. 이 작업은 가져오기 요청으로 수행됩니다.

callback: (response) => {
      // run fetch request to get user info
      let value = fetch(url + response.access_token, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
        },
      })
        .then(value => value.json())
        .then(text => console.log(text))
    }

.then(text => return text)

function callme() {
  callback: (response) => {
      ...
    }
}

let userinfo = callme();

솔루션 바닐라 쿠키

내 마음에 온 첫 번째 솔루션은 값을 쿠키로 저장하는 것입니다. 이렇게 하면 필요할 때마다 쿠키 값을 검색하기만 하면 됩니다.

.then(text => document.cookie = "userinfo=" + JSON.stringify({ username: text.name, userimg: text.picture }))

let userinfo = document.cookie

다른 페이지에서 등록된 쿠키를 검색해야 하므로 이것이 큰 문제가 되었습니다. 바닐라 JavaScript로 빌드하는 경우 창 다시 로드 기능으로 이 문제를 해결할 수 있습니다.

window.location.reload()

솔루션 반응 쿠키

솔루션을 찾기 위한 검색에서 완벽한 React 쿠키 라이브러리 를 찾았습니다 . 지시에 따라 나는 이것에 도달했습니다.

(Pageone.jsx)

import React from "react";
import { useCookies } from "react-cookie";

export default function Pageone() {
  const [setCookie] = useCookies(["user"]);

  function myCookie() {
    setCookie("user", "blah", {
      path: "/"
    });
  }
  return (
    <button onClick={myCookie()}>Set Cookie</button>
  );
}
(Pagetwo.jsx)

import React from "react";
import { useCookies } from "react-cookie";

export default function Pagetwo() {
  const [cookies] = useCookies(["user"]);

  return (
    <div className="Pagetwo">
      <h1>React cookies</h1>
       {cookies.user && <p>{cookies.user}</p>}
      <button onClick={myCookie()}>Set Cookie</button>
    </div>
  );
}

구조에 대한 반응 상태

디자인 흐름 구현에는 사용자 정보 검색, 저장 및 저장된 정보가 있는 새 페이지로 이동이 포함됩니다. 를 사용하면 React useNavigate탐색하는 동안 사용자 정보를 상태로 저장할 수 있습니다.

.then(text => navigate('/', { state:{username:text.name, userimg:text.picture}}))

import { useLocation } from 'react-router-dom';

const Sidebar = () => {
  const location = useLocation();
  // retrieve userimg
  let userimg = location.state.userimg;
  // retrieve username
  let username = location.state.username;
}

나는 React state를 사용하여 고양이와 쥐를 쫓는 것을 성공적으로 끝냈습니다. 이 기사에서는 React 구성 요소 간에 정보를 전달하는 방법을 살펴보았습니다. 먼저 바닐라 JavaScript 쿠키를 살펴보았습니다. 다음으로 React 쿠키 라이브러리와 마지막으로 React 상태를 사용했습니다.