KooKs

예시

API

개발 및 사용환경

사용법

1// 문자열 저장
2const { value, setValue, removeValue } = useLocalStorage('name', '');
3
4// 값 업데이트
5setValue('John');
6
7// 값 제거
8removeValue();
9
10// 객체 저장
11const { value, setValue, removeValue } = useLocalStorage('user', { name: 'John' });
12
13// 값 업데이트
14setValue({ name: 'Jane' });
15
16// 값 제거
17removeValue();
18
19// 함수형 업데이트
20setValue((prev) => ({ ...prev, age: 25 }));

Hook

1/**
2 * 로컬 스토리지 데이터를 관리하는 Hook
3 *
4 * 이 훅은 브라우저의 localStorage를 사용하여 데이터를 저장하고 관리하는 기능을 제공합니다.
5 * 데이터의 타입 안전성을 보장하며, JSON 직렬화/역직렬화를 자동으로 처리합니다.
6 *
7 * @template T - 저장할 데이터의 타입
8 * @param key - localStorage에 저장될 키
9 * @param initialValue - 초기값
10 * @returns {Object} 로컬 스토리지 관련 함수들을 포함한 객체
11 *   - value: 현재 저장된 값
12 *   - setValue: 값을 업데이트하는 함수
13 *   - removeValue: 값을 제거하는 함수
14 */
15export function useLocalStorage<T>(key: string, initialValue: T) {
16  const [value, setValue] = React.useState<T>(() => {
17    if (typeof window === 'undefined') {
18      return initialValue;
19    }
20
21    try {
22      const item = window.localStorage.getItem(key);
23      return item ? JSON.parse(item) : initialValue;
24    } catch (error) {
25      console.error('useLocalStorage: Failed to read value', error);
26      return initialValue;
27    }
28  });
29
30  const setStoredValue = React.useCallback((newValue: T | ((val: T) => T)) => {
31    try {
32      const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
33      setValue(valueToStore);
34      
35      if (typeof window !== 'undefined') {
36        window.localStorage.setItem(key, JSON.stringify(valueToStore));
37      }
38    } catch (error) {
39      console.error('useLocalStorage: Failed to set value', error);
40    }
41  }, [key, value]);
42
43  const removeStoredValue = React.useCallback(() => {
44    try {
45      setValue(initialValue);
46      if (typeof window !== 'undefined') {
47        window.localStorage.removeItem(key);
48      }
49    } catch (error) {
50      console.error('useLocalStorage: Failed to remove value', error);
51    }
52  }, [key, initialValue]);
53
54  return { value, setValue: setStoredValue, removeValue: removeStoredValue };
55}