Chrome.storage + Jotai 세팅하기

1. jotai를 설치한다.

npm i jotai

---

2. 최상위 파일에 Provider를 추가해준다.

import { Provider } from "jotai";

...

root.render(
  <React.StrictMode>
    <Provider>
      <WeeklySheet />
    </Provider>
  </React.StrictMode>
);

---

3. useLocalStorage 추가

useLocalStorage는 크롬에서 제공하는 로컬 저장소를 이용할 때 사용할 것이다.

// useLocalStorage.tsx

/// <reference types="chrome"/>

import { useAtom } from "jotai";
import { useEffect } from "react";
import { stampRecordAtom } from "../atoms/stampRecord";

export const useLocalStorage = () => {
  const [_, setStampRecord] = useAtom(stampRecordAtom);

  useEffect(() => {
    chrome.storage.local.get(["stampRecord"], ({ stampRecord }) => {
      setStampRecord(JSON.parse(stampRecord ?? "{}"));
    });
  }, []);

  const setLocalStorage = (key: string, value: any) => {
    chrome.storage.local.set({ [key]: value });
  };

  return { setLocalStorage };
};

---

4. Atom 생성

Atom이란 Jotai에서 관리하는 상태를 부른 말이다.
아래 예제를 참고하여 자신만의 Atom을 만들자

import { atom } from "jotai";

export interface StampRecord {
  id: number;
  type: number;
  createdAt: string;
}

export const stampRecordAtom = atom<{ [key: string]: StampRecord[] }>({});

---

5. 실제 사용 예시

import { useAtom } from "jotai";
import { StampRecord, stampRecordAtom } from "../atoms/stampRecord";
import { useLocalStorage } from "../hooks/useLocalStorage";

const WeeklySheet = () => {
  const [stampRecord, setStampRecord] = useAtom(stampRecordAtom);
  const { setLocalStorage } = useLocalStorage();

  const handleClick = () => {
    const today = dayjs().format("YYYYMMDD");
    const newStampRecord = {
      ...stampRecord,
      [today]: [
        ...(stampRecord[today] ?? []),
        { id: 0, type: 0, createdAt: dayjs().format("YYYY-MM-DD HH:mm:ss") },
      ],
    };
    setLocalStorage("stampRecord", JSON.stringify(newStampRecord));
    setStampRecord(() => newStampRecord);
  };
  
  ...

보면 매번 업데이트가 일어날 때마다 Atom과 localStorage가 업데이트 되고 있다.

이것도 어떻게 일괄적으로 처리하면 좋을텐데 나중에 고민해보겠다.