useStorageState

리액트 훅으로, useState처럼 작동하지만 상태 값을 브라우저 저장소에 저장해요. 이 값은 페이지룰 새로고침해도 유지되며, localStorage를 사용할 경우 탭 간에 공유될 수 있어요.

인터페이스

function useStorageState(
  key: string,
  options: Object
): readonly [
  state: Serializable<T> | undefined,
  setState: (value: SetStateAction<Serializable<T> | undefined>) => void,
];

파라미터

• keyrequired · string
  

  저장소에 값을 저장하는 데 사용되는 키예요.

• optionsObject
  

  저장 동작을 설정하는 옵션이에요.

  • options.storageStorage · localStorage
    

    저장소의 유형 (localStorage 또는 sessionStorage)이에요. 기본값은 localStorage예요.

  • options.defaultValueT
    

    기존 값이 발견되지 않을 경우의 초기 값이에요.

반환 값

• readonly [state: Serializable<T> | undefined, setState: (value: SetStateAction<Serializable<T> | undefined>) => void]
  

  튜플이에요:

  • stateSerializable<T> | undefined
    

    저장소에서 가져온 현재 상태 값이에요.

  • setState(value: SetStateAction<Serializable<T> | undefined>) => void
    

    상태를 업데이트하고 저장하는 함수예요.

예시

// 지속적인 상태를 가진 카운터
import { useStorageState } from 'react-simplikit';

function Counter() {
  const [count, setCount] = useStorageState<number>('counter', {
    defaultValue: 0,
  });

  return (
    <button onClick={() => setCount(prev => prev + 1)}>Count: {count}</button>
  );
}