受信したデータをローカルストレージに保存:Recoilの使用

React와 Recoil을 이용하여 데이터를 로컬 스토리지에 저장해야하는 기능을 맡았다. 🤯🤯🤯 하지만! 하나씩 차근차근해보쟈!まず、ローカルストレージについて説明します.
ローカルストレージとは?
ローカルストレージはWebストレージオブジェクトです!Web上にデータを格納するスペース(?)このように理解するのはもっと簡単です.Webストレージには、主にローカルストレージとセッションストレージがあります.これら2つは、ブラウザ内で키-값対のストレージを使用することができる.
ビスケットとは違う!🍪
Cookieは、有効期限のあるキー値リポジトリです.Cookieは最初からサーバとクライアントの間で継続的なデータ交換を行うために作成されたので、サーバに送信されています.これで問題だ!どうして.理由は以下の通り.Cookieの容量制限が4 kbに近い場合、要求のたびにデフォルトの4 kbのデータを使用する必要があります.つまり、サーバには4 kbの不要なデータが含まれている可能性があります.これはデータを浪費します!!
ローカルストレージとセッションストレージはサーバに自動的に送信されないため、より多くのデータを保持できます.
localStorage vs sessionStorage

提供されるプロセスと方法

設定Item(key,value):キー値ペアを保持し、文字列

である必要があります.

getItem(鍵):鍵に対応する値

removeItem(キー):削除キーとその値

clear():

をすべて削除

キー(インデックス):インデックスに対応するキー

length:保存されたアイテム数

例

// localStorage에 set
localStorage.setItem('test', 1);

// sessionStoage에서 get
sessionStorage.setItem('test');

// localStorage 모두 삭제
localStorage.clear();

Recoil
Recoilでは、簡単に言えばFacebookが作成したステータス管理ライブラリです.Reactの内部状態のみを利用し,小Atom単位で管理する.次にSelectorという純粋な関数を使用します.その利点は,状態が変化するとatomを参照する素子のみがレンダリングされるため,容易に実現できることである.さらに,Recoilの状態は相互依存性を持つ可能性がある.データストリームに応じて、複数の状態の関連コンポーネントを有機的に管理できます!
もっと詳しい事項は公式文書で見ることができます
ローカルストレージ持続性
Atom Effectは、Atomステータスをブラウザのローカルストレージに保持するために使用することができる.localStorageは、async/awaitまたはPromiseを必要とせずに、データを同期して直接受信することができる
この言葉は正式な書類に書かれています!
公式ファイルのコードは、データのローカルストレージに格納する方法を示します.apiでデータをロードし、ユーザーがデータからコメントを追加すると、リストにデータを入れたり、変更したり、削除したりします.この場合、これらの変化した値をローカルストレージに格納できます.
実際、recoilの更新関数setter関数と次のコードを使用すると、変化した値を簡単に追加できます./utilities/localStorage.js

export const localStorageEffect =
  (key) =>
  ({ setSelf, onSet }) => {
    const savedValue = localStorage.getItem(key);
    // console.log(savedValue);
    if (savedValue != null) {
      setSelf(JSON.parse(savedValue));
    }

    onSet((newValue) => {
      localStorage.setItem(key, JSON.stringify(newValue));
    });
  };

上記のコードについては、まずuserStoredListを作成して、小さなAtomユニットで管理されているrecoilを使用する必要があります.

import { atom } from "recoil";
import { localStorageEffect } from "../constants/localStorage";

export const userStoredList = atom({
  key: "userStoredList",
  default: [],
  effects: [localStorageEffect("user_list")],

この場合、atom()関数はキーと値で構成され、そのdefault配列には私たちが入れる値が含まれます.この場合の効果はreact의 useEffect()に似ています.この文章は公式文書で詳しく知ることができる.effectを使うのは、値が変わるにつれてlocalstrageの値も変わるからだと推測できます!
次に/constants/localStorage.jsに戻り、以下に詳しく説明します.

const localStorageEffect = key => ({setSelf, onSet}) => {
  const savedValue = localStorage.getItem(key)
  // localstorage의 user_list에 해당되는 값 -> savedValue가 null	이라면 
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue));
   }
    // setSelf() 함수 내에서는 Promise를 사용하거나 데이터를 비동기적으로 호출할 때 사용할 수 있다.

  // setting함수가 변화되었을 때 즉, component에서
  // setUserList(변화한 값);을 코드에 작성했을 때
  // localStorage.setItem(key, JSON.stringify(newValue)); 가 실행되어
  // localStorage에 키-값 형태로 들어가게 된다!
  onSet((newValue, _, isReset) => {
    // newValue 값의 길이가 0일 때
    // userlist에 대한 값을 삭제해주면 된다.
      const confirm = newValue.length === 0;
      confirm ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(newValue));
  });
};

現在、ルータが/に構成されているMain.jsでは、localStorageの値を決定するコードが次のように記述されています.

import { useRecoilState } from "recoil";
import { userStoredList } from "../atoms";
import { useEffect } from "react";

const Main = () => {
  const [userList, setUserList] = useRecoilState(userStoredList);
  useEffect(() => {
    setUserList([
      {
        id: 100,
        name: "Keane Sykes",
        address: "Ap #765-5550 A, Av.",
        phone: "010-1152-3825",
        memo: "luctus, ipsum leo elementum sem, vitae aliquam eros turpis non",
      },
    ]);
  }, []);

  return <div>MainPage Hello World!</div>;
};

export default Main;

なぜ削除するときはclear()ではなくlocalStorageなのか.removeItemを使用していますか?localStorage.clear();を使用すると、ローカルストレージ内のコンテンツはすべて削除されます.しかし、機能がもう少し多ければ、低値を削除したいだけなので、より安全なlocalStorage.removeItem(key)を使用しました.