로컬스토리지 데이터 변환 감지

리액트에서 로컬스토리지의 변화를 감지하기 위해서는 별도의 라이브러리가 필요하나, useState와 useEffect를 활용하면 쉽게 해결할 수 있습니다. 로컬 스토리지에 저장된 데이터의 변경을 감지하려면 아래와 같은 Hook을 사용해 보세요: ```jsx import { useState, useEffect } from 'react'; function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { console.log(error); return initialValue; } }); useEffect(() => { try { const serializedValue = JSON.stringify(storedValue); window.localStorage.setItem(key, serializedValue); } catch (error) { console.log(error); } }, [key, storedValue]); return [storedValue, setStoredValue]; } ``` 위 코드에서는 localStorage 값이 변경될 때마다 setStoredValue 함수를 호출하여 상태 업데이트를 트리거합니다. 이렇게하면 리액트 컴포넌트는 자동으로 재랜더링되고 이로 인해 쿼리 데이터가 무효화됩니다. 이 함수를 사용하는 방법은 다음과 같습니다: ```jsx const [value, setValue] = useLocalStorage('my-key', 'initial value'); ``` 기존 localStorage getItem 및 setItem 메서드를 대체하는 방식으로 사용하면 됩니다. 이렇게 하면, 컴포넌트 내에서 로컬 스토리지 값의 변경을 감지하고 상태를 업데이트 할 수 있습니다.