반응: 로컬 저장소와 동기화

Question

React 앱을 사용하세요. 특정 구성 요소는 일정 기간 동안 동일한 키를 사용하여 로컬 저장소에 다른 데이터 값을 설정합니다. 로컬 저장소에서 이 프로젝트의 여러 구성 요소를 구독해야 합니다. 특정 키를 가진 값이 로컬 저장소에 업데이트될 때마다 구독된 구성 요소는 업데이트된 값을 로컬 저장소에 알리거나 제공해야 합니다.

이를 위한 사용자 정의 후크를 만들고 아래와 같이 storage 이벤트에 이벤트 리스너를 추가하여 with를 사용해 보았습니다.

으아악

다음과 같이 구성 요소에 사용하세요.

으아악

클릭 이벤트에서 로컬 저장소 값을 업데이트하려고 했지만 후크가 로컬 저장소에 업데이트된 값을 반환하지 않습니다. 개발도구에서 로컬 스토리지 값이 업데이트된 것을 확인했습니다. 문제는 저장소 변경을 일으킨 동일한 창/탭에서 storage 이벤트가 실행되지 않는 것 같습니다.

로컬스토리지의 가치를 구독할 수 있는 방법이 있나요?

Answer 1

당신이 취한 접근 방식은 정확하지만 당신 말이 맞습니다. 저장소 변경을 일으킨 동일한 창/탭에서 저장소 이벤트가 실행되지 않습니다. 저장소 이벤트는 저장소가 다른 창이나 탭에 의해 수정되었음을 다른 창이나 탭에 알리기 위한 것입니다.

귀하의 경우 동일한 창에서 localStorage 값을 업데이트하고 있으므로 저장소 이벤트가 트리거되지 않으므로 구독하는 구성 요소가 업데이트를 수신하지 못합니다.

이 제한을 극복하기 위해 사용자 정의 후크를 수정하여 다른 메커니즘을 사용하여 localStorage 값 변경에 대해 구독 구성 요소에 알릴 수 있습니다. 한 가지 접근 방식은 별도의 이벤트 시스템(예: React Context API 또는 Redux와 같은 상태 관리 라이브러리)을 사용하여 구성 요소 간의 통신을 처리하는 것입니다.