브라우저 API 구독

브라우저의 미디어 쿼리는 외부 저장소로 사용하기에 매우 적합합니다. 다크 모드나 중단점을 위한 matchMedia 쿼리를 구독하고 일치 여부가 바뀔 때마다 다시 렌더링할 수 있습니다.

구독 함수는 MediaQueryList에 변경 리스너를 추가하고, getSnapshot은 현재 일치 여부를 나타내는 불리언 값을 반환하므로 반응형 조건에 접근할 수 있습니다.

이 로직을 useMediaQuery 훅으로 감싸면 컴포넌트가 한 번의 호출만으로 쿼리의 일치 여부를 확인할 수 있습니다. 이 훅은 주어진 쿼리 문자열을 바탕으로 안정적인 구독 함수와 getSnapshot을 구성합니다.

이를 통해 동시 렌더링에서도 useSyncExternalStore 덕분에 일관성을 유지하는 깔끔하고 재사용 가능한 반응형 동작의 기본 도구를 만들 수 있습니다.

브라우저는 온라인 및 오프라인 이벤트와 navigator.onLine을 제공합니다. 이러한 이벤트를 구독하고 속성을 읽으면 React 내부에서 실시간 연결 상태를 확인할 수 있습니다.

getSnapshot은 navigator.onLine을 반환하고, 구독 함수는 온라인 및 오프라인 이벤트에 리스너를 연결하여 연결 상태가 바뀔 때 컴포넌트가 업데이트되도록 합니다.

이를 useOnlineStatus 훅으로 묶으면 어떤 컴포넌트에서든 오프라인 배너를 표시하거나 네트워크 연결이 끊겼을 때 작업을 비활성화할 수 있습니다. 공식 React 문서에서도 이 훅을 설명하기 위해 바로 이 예제를 사용합니다.

외부 브라우저 신호를 반응형 상태 값으로 자연스럽게 연결할 수 있는 작지만 유용한 사례입니다.

탐색 상태 변경 이벤트를 수신하고 getSnapshot에서 window.location을 읽어 내비게이션 변경을 구독할 수 있습니다. 이는 History API를 기반으로 만든 간단한 사용자 지정 라우터의 기반이 됩니다.

pushState는 뒤로 가기나 앞으로 가기 이벤트를 발생시키지 않으므로, 사용자 지정 라우터는 프로그래밍 방식으로 탐색할 때도 스냅샷이 업데이트되도록 자체 이벤트를 발생시키는 경우가 많습니다.

localStorage가 변경되면 다른 탭에서 저장소 이벤트가 발생하므로, 이를 구독할 수 있는 외부 저장소로 사용할 수 있습니다. getSnapshot은 현재 값을 읽고 구독 함수는 저장소 이벤트를 수신합니다.

이를 통해 탭 간 동기화가 가능해지며, 한 탭에서 값을 업데이트하면 다른 탭의 컴포넌트도 반응형으로 업데이트됩니다.

기기 방향 이벤트는 기기의 물리적인 기울기를 보고합니다. 이 이벤트를 구독하고 getSnapshot에서 최신 각도를 읽으면 움직임 데이터를 반응형 상태로 바꿀 수 있습니다.

이는 휴대전화를 어떻게 들고 있는지에 반응하는 시차 효과나 대화형 시각화를 구현할 때 유용합니다.

IntersectionObserver는 요소가 뷰포트에 들어오거나 나갈 때 알려 줍니다. 이를 감싸서 구독 함수가 관찰자를 생성하고 getSnapshot이 최신 isIntersecting 값을 반환하게 할 수 있습니다.

이를 통해 이미지를 지연 로드하거나 애니메이션을 시작하거나 무한 스크롤 감지 지점을 구현할 때 사용할 수 있는 반응형 isVisible 플래그를 얻을 수 있습니다.

ResizeObserver는 요소 크기의 변화를 보고합니다. 이를 감싸면 구독 함수가 요소를 관찰하고 getSnapshot이 현재 크기를 반환하므로 컴포넌트가 레이아웃 변화에 정확하게 반응할 수 있습니다.

전체 뷰포트가 아니라 특정 요소에 관심이 있을 때는 window의 크기 변경을 수신하는 것보다 효율적이고 정확합니다.

크기 변경 이벤트와 이 훅을 결합하여 현재 너비와 높이를 반환하는 useWindowSize를 만들 수 있습니다. 구독 함수는 크기 변경 리스너를 연결하고 getSnapshot은 창의 크기를 읽습니다.

안정적인 스냅샷을 반환하도록 주의하세요. 크기 객체를 캐시하여 크기가 변하지 않았을 때 재렌더링이 발생하지 않게 해야 구성이 효율적으로 유지됩니다.

useMediaQuery 훅이 저장소 훅을 어떻게 사용하는지 생각해 봅니다.

많은 브라우저 API는 useSyncExternalStore로 연결할 수 있는 외부 저장소입니다. 중단점에는 matchMedia를, 연결 상태에는 navigator.onLine을, 탐색과 탭 간 동기화에는 위치와 저장소를 사용할 수 있으며 방향·교차·크기 변경 관찰자도 활용할 수 있습니다.

각 방식은 리스너를 연결하고 제거하는 구독 함수와 안정적인 getSnapshot이라는 동일한 형태를 따릅니다. 이를 useMediaQuery, useOnlineStatus, useWindowSize 같은 훅으로 구성할 수 있습니다.