Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- Preview
- routing
- 비동기
- setstate
- 배포
- useEffect
- Redux
- 항해99
- 접근 제한 라우팅
- 채팅방
- 라우팅
- 동기
- route
- 후기
- 7기
- socket.io
- FileReader
- 개발
- updater
- rendering
- qwe
- 브라우저 렌더링
- S3
- react
- 스파르타코딩클럽
- previousState
- imagePreview
- 미리보기
- CI/CD
- Github Actions
Archives
- Today
- Total
삐옹
[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
'프로젝트' 카테고리의 다른 글
[Pomodoro]progress bar 기능을 하는 UI만들기 (0) | 2023.06.16 |
---|---|
[Pomodoro] 기능 별 프로세스 정리 (0) | 2023.06.16 |
[TeamNote]페이지 이동 구현하기_Trouble Shooting (0) | 2022.08.12 |
[Teamnote] 하나의 스코프 안에서 setState 연속 사용 (0) | 2022.07.28 |