반응형
참고
다음과 같이 로컬 스토리지 변경을 감지하는 커스텀 훅을 만들어보자.
여기서는 모든 페이지에 대해 이벤트를 감지한다.
예시 코드는 다음과 같다.
로컬 스토리지가 변경되면 useEffect에서 storage 변경 이벤트 리스너를 등록하면 된다.
import React, { useState, useEffect } from "react";
const KEY0 = "MY_DATA_0";
const LocalStorageHook = () => {
const [localStorageData, setLocalStorageData] = useState(
localStorage.getItem(KEY0)
);
useEffect(() => {
const handleStorageChange = () => {
setLocalStorageData(localStorage.getItem(KEY0));
};
window.addEventListener("storage", handleStorageChange);
return () => {
window.removeEventListener("storage", handleStorageChange);
};
}, []);
const handleChange = (e) => {
const newData = e.target.value;
localStorage.setItem(KEY0, newData);
setLocalStorageData(newData);
};
return (
<div style={{margin : 5}}>
<input type="text" value={localStorageData} onChange={handleChange} />
<p>Local Storage Data: {localStorageData}</p>
</div>
);
};
export default LocalStorageHook;
useLocalStorage
위의 코드를 이용하여 useLocalStorage를 만들 수 있다.
key 값을 전달받아 내부에서 useEffect로 "storage" 이벤트 핸들러를 추가하고 선언한 useState를 반환한다.
useState 초기화는 게으른 초기화를 이용하였다.
const useLocalStorage = (key) => {
const [data, setData] = useState(() => {
let item = localStorage.getItem(key);
return item === null ? "" : item;
});
useEffect(() => {
const handleStorageChange = () => {
let item = localStorage.getItem(key);
setData(item === null ? "" : item);
};
window.addEventListener("storage", handleStorageChange);
return () => {
window.removeEventListener("storage", handleStorageChange);
};
}, []);
return [data, setData];
};
이제 key 값에 대해 useLocalStorage로 hook을 가져와서 사용하면 된다.
const KEY0 = "MY_DATA_0";
...
const LocalStorageHook = () => {
const [localStorageData0, setLocalStorageData0] = useLocalStorage(KEY0);
...
const handleChange = (e, key, setState) => {
const newData = e.target.value;
localStorage.setItem(key, newData);
setState(newData);
};
return (
<div style={{ margin: 5 }}>
<input
type="text"
value={localStorageData0}
onChange={(e) => handleChange(e, KEY0, setLocalStorageData0)}
/>
<p>Local Storage Data 0: {localStorageData0}</p>
...
</div>
);
};
export default LocalStorageHook;
전체 코드는 다음과 같다.
import React, { useState, useEffect } from "react";
const useLocalStorage = (key) => {
const [data, setData] = useState(() => {
let item = localStorage.getItem(key);
return item === null ? "" : item;
});
useEffect(() => {
const handleStorageChange = () => {
let item = localStorage.getItem(key);
setData(item === null ? "" : item);
};
window.addEventListener("storage", handleStorageChange);
return () => {
window.removeEventListener("storage", handleStorageChange);
};
}, []);
return [data, setData];
};
const KEY0 = "MY_DATA_0";
const KEY1 = "MY_DATA_1";
const LocalStorageHook = () => {
const [localStorageData0, setLocalStorageData0] = useLocalStorage(KEY0);
const [localStorageData1, setLocalStorageData1] = useLocalStorage(KEY1);
const handleChange = (e, key, setState) => {
const newData = e.target.value;
localStorage.setItem(key, newData);
setState(newData);
};
return (
<div style={{ margin: 5 }}>
<input
type="text"
value={localStorageData0}
onChange={(e) => handleChange(e, KEY0, setLocalStorageData0)}
/>
<p>Local Storage Data 0: {localStorageData0}</p>
<input
type="text"
value={localStorageData1}
onChange={(e) => handleChange(e, KEY1, setLocalStorageData1)}
/>
<p>Local Storage Data 1: {localStorageData1}</p>
</div>
);
};
export default LocalStorageHook;
반응형
'개발 > React' 카테고리의 다른 글
리액트 - 페이지 가시성 확인하기 (useEffect with Visibility Change Event) (0) | 2024.04.24 |
---|---|
리액트 - 마우스가 일정 시간 움직이지 않는 경우 새로고침하기 (useEffect with Mouse Move Event) (0) | 2024.04.24 |
리액트 Custom Hook - input 입력 유효값 검사하기 (useInput) (0) | 2024.04.15 |
리액트 Custom Hook - useRef로 useState 이전 값 저장하기 (usePrevious) (0) | 2024.04.15 |
리액트, Node JS - 다른 클라이언트가 선택한 셀 표시하기 (Highlighting Cells Selected by Another Client) (0) | 2024.04.13 |
댓글