Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

new_bird-hyun

React - 커스텀 훅 만들기 (useLocalStorage) 본문

코딩 공부

React - 커스텀 훅 만들기 (useLocalStorage)

새혀니 2025. 3. 31. 22:43

import { useState, useEffect } from 'react';

export function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    if (typeof window === 'undefined') return initialValue;
    const stored = localStorage.getItem(key);
    return stored !== null ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// 사용 예
// const [name, setName] = useLocalStorage('username', 'guest');

'코딩 공부' 카테고리의 다른 글

React - useRef로 DOM 제어하기 (스크롤 이동)  (0) 2025.04.03
JavaScript - IntersectionObserver로 요소 감지하기  (0) 2025.04.03
JavaScript - try-catch를 함수형으로 wrapping하기  (0) 2025.03.31
React - useMemo, useCallback, React.memo 최적화 예제  (0) 2025.03.31
JavaScript - debounce 함수 직접 구현하기  (0) 2025.03.31
'코딩 공부' Related Articles more