useStorageState

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

인터페이스

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

파라미터

• keyrequired · string
  

  값을 저장소에 저장하기 위해 사용하는 키예요.

• optionsObject
  

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

  • options.storageStorage · localStorage
    

    스토리지 타입 (localStorage 또는 sessionStorage). 기본값은 localStorage예요.

  • options.defaultValueT
    

    기존의 값을 찾을 수 없을 때의 초기 값이에요.

  • options.serializerFunction
    

    상태 값을 문자열로 직렬화하는 함수예요.

  • options.deserializerFunction
    

    상태 값을 문자열에서 역직렬화하는 함수예요.

반환 값

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

  튜플이에요:

  • stateSerializable<T> | undefined
    

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

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

    상태를 업데이트하고 지속하는 함수예요.

  • refreshState() => 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>
  );
}