편하게 관리하는 Local Storage

혹시 localStorage 자주 사용하시나요?

개발을 하다 보면 localStorage를 사용해야 할 때가 종종 있는데요.

저는 보통 아래 코드처럼 useState와 같이 사용하고는 합니다.

const [state, setState] = useState<string>(() => {
    const localState = localStorage.getItem('state-key')
    return localState ? JSON.parse(localState) : ''
})

const handleChange = (value: string) => {
    setState(value)
    localStorage.setItem('state-key', JSON.stringify(value))
}

그러다 여러 코드에서 localStorage를 사용하기 시작하면, 약간의 불편한 점들이 생기게 됩니다.

로컬 스토리지 값을 불러오는 코드와, 값이 변경되었을 때 로컬 스토리지 값을 변경해 주는 코드를 매번 작성해 주어야 하는 번거로움이 있는데요.

그래서 localStorage를 useState처럼 편하게 사용하고자 간단한 훅을 만들었습니다.

useState처럼 관리할 수 있는 훅 만들기

아래 코드처럼 useState에 key만 추가로 넘겨주는 형식으로 만들어 볼겁니다.

const [state, setState] = useLocalState<string>('state-key', '')

먼저 key와 initial값을 받아줍니다.

export const useLocalState = <T>(key: string, initialState: T) => {}

state를 추가해 줍니다.

const [state, setState] = useState<T>(() => {
    const localState = localStorage.getItem(key)
    return localState ? JSON.parse(localState) : initialState
})

state값과 localStorage값을 set해줄 함수를 추가해 줍니다.

const setLocalState = (set: ((state: T) => T) | T) => {
    const newState = set instanceof Function ? set(state) : set
    setState(newState)
    localStorage.setItem(key, JSON.stringify(newState))
}

마지막으로 state와 setLocalState를 반환해 주면 끝입니다.

import { useState } from 'react'

export const useLocalState = <T>(key: string, initialState: T) => {
    const [state, setState] = useState<T>(() => {
        const localState = localStorage.getItem(key)
        return localState ? JSON.parse(localState) : initialState
    })

    const setLocalState = (set: ((state: T) => T) | T) => {
        const newState = set instanceof Function ? set(state) : set
        setState(newState)
        localStorage.setItem(key, JSON.stringify(newState))
    }

    return [state, setLocalState] as const
}

마무리

간단한 훅이지만 정말 유용하게 사용할 수 있어 좋습니다.

다른 사람들은 어떻게 구현했는지 궁금해서 찾아보니, 이곳에선 커스텀 이벤트와 storage 이벤트를 추가해서 다른 탭에서도 변경사항이 바로 반영되도록 만들어 두었던데, 한 번 추가해 보는 것도 괜찮을 것 같습니다.