KooKs

예시

API

개발 및 사용환경

사용법

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

Hook

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