LocalStorage(SessionStorage) 커스텀 훅

Study Date

Dec 14, 2023

key와 initialValue를 props로 받는 커스텀 훅을 생성한다


const useLocalStorage = (key, initialValue) => {}

해당 키의 값을 (없으면 initialValue) 상태로 지정한다

⇒ 초기값으로(useState의 인자) getItem 로직을 작성

⇒ 렌더링될 때마다 해당 로직으로 로컬스토리지에서 값을 가져온게 된다


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
		}
	})
}

setItem 함수 생성

⇒ 상태도 set해주어서 렌더링 되기 전에도 바뀐 값을 얻어올 수 있게 한다


const setItem = (key,value) => {
	try {
		setStoredValue(value)
		localStorage.setItem(key,JSON.strigify(value))
	} catch(error) {
		console.error(error)
	}
}

상태(2)와 setItem(3)을 리턴


const useLocalStorage = (key, initialValue) => {
	const [storedValue, setStoredValue] = ...
	const setItem ..
	
	return [storedValue, setItem]
}

sessionStorage 또한 local→session으로만 이름을 바꾸면 모든 것이 같다