key/default
저장 키와 기본값을 훅 인자로 받습니다.
React · hook
useLocalStorage 커스텀 훅 내부 데이터 흐름
초기값은 localStorage에서 읽고, 상태 변경은 React state와 브라우저 저장소에 함께 반영합니다.
저장소 훅 처리 단계
storageread storage
초기 렌더에서 localStorage 값을 파싱합니다.
useState
화면은 React 상태를 기준으로 렌더링합니다.
useEffect save
값이 바뀌면 문자열로 저장소에 기록합니다.
component API
값과 setter만 컴포넌트에 노출합니다.
key
→
read storage
→
state
→
effect save
→
reuse
useLocalStorage 커스텀 훅 정리
커스텀 훅의 품질은 내부 복잡도를 숨기면서도 컴포넌트가 필요한 값과 변경 함수만 받게 만드는 데 있습니다.