Next.js의 useStorage-Custom 후크

export const isSsr = typeof window === 'undefined';

후크 🪝

import { useState, useEffect } from 'react';
import { isSsr } from '@/utils/isSsr';

export const getStorage = (storage, key) => JSON.parse(storage.getItem(key));

export const setStorage = (storage, key, newValue) => storage.setItem(key, JSON.stringify(newValue));

const useStorage = (storageType, key, initialValue) => {
  if (isSsr) return [initialValue];

  const storageName = `${storageType}Storage`;
  const storage = window[storageName];

  const [value, setValue] = useState(getStorage(storage, key) || initialValue);

  useEffect(() => {
    setStorage(storage, key, value);
  }, [value]);

  return [value, setValue];
};

export default useStorage;

간략한 설명

사용하는 방법

const LOCAL_STORAGE_KEY = 'filters';
const initialStateFilters = { isExpended: true };

const [filters, setFilters] = useStorage('local', LOCAL_STORAGE_KEY, initialStateFilters);

// The value
const { isExpended } = filters;

// Setting the value
const handleToggle = newIsExpended => setFilters({ ...filters, isExpended: newIsExpended });

You're maybe wondering why I'm using an object as the value of the data, it is simply for scalability reasons.
In the future we'll probably want to add more filters, so instead of creating a hook for each one we'll have them all under the same key.

읽어 주셔서 감사합니다!