useLocalStorage

Introduce

로컬 스토리지와 동기화된 상태를 관리하는 훅입니다.

브라우저의 로컬 스토리지 API를 간편하게 사용할 수 있도록 도와주며, 타입 일관성을 유지하기 위해 잘못된 값이 저장되지 않도록 차단합니다.

interface UseLocalStorageHookProps<T> {
  key: string;
  initialValue: T;
}
 
interface UseLocalStorageHookReturns<T> extends Readonly<[T, (value: ValueResolver<T>) => void]> {}
 
const useLocalStorage = <T>(
  key: string,
  initialValue: T
): UseLocalStorageHookReturns<T>

⚠️

값의 타입이 일치하지 않을 경우 초기값으로 재설정합니다. 또한, 브라우저 환경에서만 동작하므로 서버 환경에서는 사용할 수 없습니다.

Props

key : 로컬 스토리지에 저장할 값의 키를 지정합니다.
initialValue : 저장할 초기 값을 설정합니다. 만약 로컬 스토리지에 기존 값이 존재하지 않거나 타입이 다른 경우, 해당 초기값이 사용됩니다.

Returns

[storedValue, setValue] : 첫 번째 요소는 저장된 값이며, 두 번째 요소는 해당 값을 업데이트하는 함수입니다.

Examples

TestComponent.tsx

const TestComponent = () => {
  const [value, setValue] = useLocalStorage<number>('count', 0);
 
  const handleIncrement = () => setValue((prev) => prev + 1);
  const handleReset = () => setValue(0);
 
  return (
    <div>
      <p>Stored Value: {value}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};

useKeyDown useLongPress