HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive
/
🎾
Custom Hook
/
LocalStorage(SessionStorage) 커스텀 훅

LocalStorage(SessionStorage) 커스텀 훅

Study Date
Dec 14, 2023
  1. key와 initialValue를 props로 받는 커스텀 훅을 생성한다
  1. 해당 키의 값을 (없으면 initialValue) 상태로 지정한다
    1. ⇒ 초기값으로(useState의 인자) getItem 로직을 작성
      ⇒ 렌더링될 때마다 해당 로직으로 로컬스토리지에서 값을 가져온게 된다
 
  1. setItem 함수 생성
    1. ⇒ 상태도 set해주어서 렌더링 되기 전에도 바뀐 값을 얻어올 수 있게 한다
 
  1. 상태(2)와 setItem(3)을 리턴
    1.  
sessionStorage 또한 local→session으로만 이름을 바꾸면 모든 것이 같다
const useLocalStorage = (key, initialValue) => {}
const useLocalStorage = (key, initialValue) => { const [storedValue, setStoredValue] = useState(() => { try { const item = localStorage.getItem(key) return item ? JSON.parse(item) : initialValue } catch (error) { console.error(error) return initialValue } }) }
const setItem = (key,value) => { try { setStoredValue(value) localStorage.setItem(key,JSON.strigify(value)) } catch(error) { console.error(error) } }
const useLocalStorage = (key, initialValue) => { const [storedValue, setStoredValue] = ... const setItem .. return [storedValue, setItem] }