[Teamnote] LocalStorage의 값 변경 + 저장하기 (실패)

상황

워크스페이스를 누르면 해당 워크스페이스의 이름을 가져와 화면에 뿌리고 새로고침 했을 때도 유지되게끔 하기

 

문제

  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

OKKY | [React] 로컬스토리지 값을 변경과 동시에 화면에 반영하기!! (도움이 간절합니다ㅠㅜㅠㅜ)