웹뷰 데이터 동기화, Broadcast Channel로 해결!
by DD
3년 전
조회수 10
웹뷰 액티비티 간 데이터 동기화 필요성을 제기하며, Broadcast Channel API 소개
Broadcast Channel API를 사용하여 탭, 윈도우 간 양방향 통신 구현
React Hook을 활용하여 broadcast-channel 라이브러리를 리액트 앱에 적용
Broadcast Channel API의 동작 원리
Broadcast Channel API는 동일 출처의 브라우징 컨텍스트 간 통신을 가능하게 한다. 구체적으로 채널을 생성하고, postMessage를 통해 메시지를 전달한다. 따라서 웹뷰 간 데이터 동기화를 구현하여 사용자 경험을 향상시킨다.
Broadcast Channel vs LocalStorage
네이티브 API는 브라우저 호환성 문제가 있을 수 있다. pubkey/broadcast-channel 라이브러리는 LocalStorage, IndexedDB 등 다양한 방식으로 fallback을 지원한다. 반면, 성능 저하를 고려하여 적절한 방식을 선택해야 한다.
React Hook 적용 및 활용
리액트 환경에서 useBroadcastChannel Hook을 활용하여 간편하게 구현한다. onMessage 콜백 함수를 통해 메시지를 수신하고, postMessage로 데이터를 전달한다. 따라서 데이터 동기화를 위한 로직을 컴포넌트에서 분리하여 재사용성을 높인다.
