[React] 📕Recoil 로컬, 세션 스토리지 (ft. 만료시간 지정)

📕 Recoil 로컬 스토리지

Local Storage

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

  onSet((newValue, _, isReset) => {
    isReset
      ? localStorage.removeItem(key)
      : localStorage.setItem(key, JSON.stringify(newValue));
  });
};

typescript 추가

import { AtomEffect } from 'recoil';

const localStorageEffect: <T>(key: string) => AtomEffect<T> =
  (key: string) =>
  ({ setSelf, onSet }) => {
    const savedValue = localStorage.getItem(key);
    if (savedValue != null) {
      setSelf(JSON.parse(savedValue));
    }

    onSet((newValue, _, isReset) => {
      isReset ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(newValue));
    });
  };

export default localStorageEffect;

원하는 atom에 적용

const currentUserIDState = atom({
  key: 'CurrentUserID',
  default: 1,
  effects: [
    localStorageEffect('current_user'), // ⭐️추가
  ]
});

📕 로컬스토리지 만료 시간 지정하기

import { AtomEffect } from 'recoil';

// 원하는 시간 지정
const ONE_HOUR = 3600 * 1000; // 1시간
const getExpirationTime = () => Date.now() + ONE_HOUR;

const localStorageEffect: <T>(key: string) => AtomEffect<T> =
  (key: string) =>
  ({ setSelf, onSet }) => {
    // 로컬에 저장된 키 가져오기
    const savedValue = localStorage.getItem(key);
    const expirationTime = localStorage.getItem(`${key}_expiration`);

    // 만료 시간이 지났거나 값이 없을 경우 삭제
    if (expirationTime && Date.now() > parseInt(expirationTime, 10)) {
      localStorage.removeItem(key); // 값 삭제
      localStorage.removeItem(`${key}_expiration`); // 만료 시간 정보 삭제
    } else if (savedValue != null) {
      // 만료 시간이 지나지 않았고, 값이 존재하는 경우에는 해당 값을 Recoil 상태에 설정
      setSelf(JSON.parse(savedValue));
    }

    // Recoil 상태가 변경될 때 호출되는 콜백 함수를 정의
    onSet((newValue, _, isReset) => {
      // Recoil 상태가 재설정되는 경우, 해당 키와 만료 시간 정보를 삭제
      if (isReset) {
        localStorage.removeItem(key);
        localStorage.removeItem(`${key}_expiration`);
      } else {
        // Recoil 상태가 업데이트되는 경우, 새로운 값을 로컬 스토리지에 저장하고 만료 시간 정보를 갱신
        localStorage.setItem(key, JSON.stringify(newValue)); // 값 저장
        localStorage.setItem(`${key}_expiration`, getExpirationTime().toString()); // 만료 시간 갱신
      }
    });
  };

export default localStorageEffect;

▷ recoil-persist

📕 세션스토리지

recoil-persist로 sessionStorage 또는 localStorage를 사용할 수 있다.

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

const sessionStorage = 
      typeof window !== 'undefined' ? window.sessionStorage : undefined

const { persistAtom } = recoilPersist({
  key: 'music',
  storage: sessionStorage,
});

const musicAtom = atom<MyAtomType>({
  key: 'musicAtom',
  default: myDefaultState,
  effects_UNSTABLE: [persistAtom], // ⭐️ 추가
});

📕 SSR 대응

SSR 대응법

/* hook */
import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil';
import currentTrackState, { currentTrackDefault } from 'src/atom/currentTrackState';

const useCurrentTrackSSR = () => {
  const [isInitial, setIsInitial] = useState(true);
  const [value, setValue] = useRecoilState(currentTrackState);

  useEffect(() => {
    setIsInitial(false);
  }, []);

  return [isInitial ? currentTrackDefault : value, setValue] as const;
};

export default useCurrentTrackSSR;

/* 최상위에서 한번만 사용 */
const [currentMusicAndTrack, setCurrentMusicAndTrack] = useCurrentTrackSSR();

🍒Recoil 사용법 보러가기