프로젝트
[Teamnote] LocalStorage의 값 변경 + 저장하기 (실패)
삐옹
2022. 7. 25. 13:17
상황
워크스페이스를 누르면 해당 워크스페이스의 이름을 가져와 화면에 뿌리고 새로고침 했을 때도 유지되게끔 하기
문제
const [workSpaceName, setWorkSpaceName] = useState(""); // 2
useEffect(() => {
localStorage.setItem("workspace", workSpaceName); // 3
}, [workSpaceName]);
...
return (
...
workspaceList.map( ...
return <li
key={idx}
className="workspace-item"
onClick={() => {
setOpenDropdown(false);
setWorkSpaceName(item.split("+")[1]); // 1
}}
>
...)
...
)
li태그 클릭 -> state 업데이트 -> ls(local storage)에 저장
이렇게 하면 state 관리 하듯이 다른 워크스페이스(다른 li)를 클릭 할 때마다
ls에 동기화가 되어서 다른 컴포넌트(상위 컴포넌트!)에서 ls의 변경을 감지해 그때 그때 바뀐 데이터를 가져와 화면에 뿌려주는 것이 가능할 것 같았다.
ls에 저장하면 앱 어디서든 쓸 수 있으니까 가능하지않을까?
결과는 실패.
다른 컴포넌트에서 ls 데이터의 변경을 감지 할 수가 없었다.
거기에 state값에 의해 ls값이 업데이트가 되는 식이다 보니,
새로고침시에는 당연하게도 ls안의 값이 날라가버렸다.
localstorage의 데이터 변화를 실시간으로 감지하면서 새로고침 시에도 유지를 할 수 있는 방법에 대하여
okky에 질문을 올리니 감사하게도 많은 분들이 댓글을 달아주셨다.
해결
결론은 이런 상황에서 로컬스토리지는 불필요하다.
ls는 state처럼 상태관리를 위한 API가 아니고,
로컬스토리지의 변경이벤트는 같은 탭간에 변경을 감지할 수 없기 때문이다.
이럴 땐 그냥 query-string을 이용하거나 redux 이용해야한다고 한다.
🙇🏻okky 선배님들 감사합니다
: https://okky.kr/article/1280721