히치키치

typescript-todo : localStorage에 tasks 저장을 위한 훅 작성 본문

typescript-todo

typescript-todo : localStorage에 tasks 저장을 위한 훅 작성

히치키치 2022. 8. 12. 19:40

💙 useLocalStorage

import react, { useEffect, useState } from 'react';

const useLocalStorage = <TState>(key: string, newState: TState) => {
  const [state, setState] = useState<TState>(() => {
    const stateStr = window.localStorage.getItem(key);
    return stateStr ? (JSON.parse(stateStr) as TState) : newState;
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState] as const;
};

export default useLocalStorage;

 

Comments