탭 간 저장소 이벤트 처리하기

사용자가 앱을 두 탭에서 열어 두고 탭 A에서 값을 업데이트하면 탭 B에는 여전히 이전 상태가 표시됩니다. 두 탭은 localStorage를 공유하더라도 각각 메모리에 별도의 리액트 상태를 갖습니다.

조정하지 않으면 두 탭이 현재 값에 대해 서로 다른 상태를 갖게 됩니다.

브라우저는 localStorage가 변경될 때마다 동일한 출처의 다른 탭에서 storage 이벤트를 전달합니다. 중요한 점은 변경을 수행한 탭에서는 이 이벤트가 발생하지 않는다는 것입니다.

이것이 바로 탭 A가 무언가를 업데이트했다는 사실을 탭 B가 알아차리는 데 필요한 신호입니다.

useEffect에서 window.addEventListener('storage', handler)를 호출하고 이를 제거하는 정리 함수를 반환합니다. 이렇게 하면 컴포넌트가 탭 간 변경 사항을 구독합니다.

효과는 마운트될 때 한 번 실행되어야 하므로 비어 있거나 안정적인 의존성 배열이 적절합니다.

이벤트 객체에는 변경된 키를 나타내는 key, 변경 전후의 문자열인 oldValue와 newValue, 영향을 받은 저장소 객체인 storageArea가 들어 있습니다.

null 키와 널 값은 저장소 전체가 삭제되었다는 뜻입니다.

저장소 이벤트는 출처의 모든 키에 대해 발생하므로, 처리기는 반응하기 전에 event.key === yourKey를 확인해야 합니다. 관련 없는 키를 무시하면 불필요한 재렌더링을 방지할 수 있습니다.

또한 event.newValue가 널인 경우, 즉 키가 삭제된 경우도 처리하십시오.

관련된 변경 사항이 도착하면 event.newValue를 파싱하고 설정 함수를 호출해 리액트 상태를 업데이트하십시오. 이렇게 하면 두 번째 탭이 다른 곳에서 발생한 변경 사항과 동기화됩니다.

useLocalStorage 훅과 결합하면 탭 간 연결이 완성됩니다.

BroadcastChannel을 사용하면 동일한 출처의 탭끼리 postMessage로 직접 메시지를 주고받을 수 있습니다. 저장소 이벤트를 이용하는 것보다 깔끔하며 localStorage에 쓰지 않고도 작동합니다.

이름으로 채널을 만들고 업데이트를 게시한 다음 message 이벤트를 수신합니다.

리액트는 외부 저장소를 동시성에 안전한 방식으로 구독할 수 있도록 useSyncExternalStore를 제공합니다. 이 훅의 구독 함수를 storage 이벤트에 연결하고 스냅샷을 localStorage 읽기에 연결할 수 있습니다.

이렇게 하면 외부 저장소의 업데이트가 리액트 렌더링과 올바르게 통합됩니다.

대표적인 애플리케이션 사례는 모든 곳에서 로그아웃하는 것입니다. 한 탭에서 인증 플래그를 삭제하면 다른 탭의 저장소 이벤트가 이를 감지하고 해당 탭을 로그인 화면으로 리디렉션합니다.

이렇게 하면 오래된 탭이 인증된 콘텐츠를 계속 표시하는 것을 방지할 수 있습니다.

테마도 이에 잘 맞습니다. 한 탭에서 다크 모드를 전환하면 localStorage에 기록되고, 다른 탭에서 저장소 이벤트가 발생하며, 다른 탭의 테마 상태도 즉시 일치하도록 업데이트됩니다.

사용자는 어느 탭으로 전환하더라도 일관된 화면을 볼 수 있습니다.

탭 간 동기화는 storage 이벤트를 수신하거나 BroadcastChannel을 사용하고, 해당 키만 필터링한 다음, 새 값으로 리액트 상태를 업데이트하는 과정으로 요약할 수 있습니다.

안정적이고 동시성에 안전한 구독에는 useSyncExternalStore가 현대적인 선택입니다.

storage 이벤트가 다른 탭에서 발생한다는 점과 이벤트를 수신하고 키로 필터링하며 상태를 업데이트하는 방법을 배웠습니다. 또한 BroadcastChannel과 useSyncExternalStore라는 대안도 살펴보았습니다.

모든 탭에서 로그아웃하기와 탭 간 다크 모드 동기화 같은 실제 사용 사례도 확인했습니다.