useDocumentVisibility

문서의 가시성 상태 변경을 감지하는 Hook입니다. 사용자가 브라우저 탭이나 창을 전환할 때 발생하는 상태 변경을 감지하여 처리할 수 있습니다.

Return

Props

이름	타입	설명
onVisibilityChange	`(visibility: DocumentVisibilityState) => void`	문서 가시성 상태가 변경될 때 호출되는 콜백 함수

Usage

import { useDocumentVisibility } from '@teamsparta/react';
 
function Example() {
  useDocumentVisibility({
    onVisibilityChange: (visibility) => {
      if (visibility === 'hidden') {
        console.log('문서가 숨겨짐');
      } else {
        console.log('문서가 보여짐');
      }
    },
  });
 
  return <div>문서 가시성 감지 예제</div>;
}

Example

비디오 자동 일시정지

function VideoPlayer() {
  const videoRef = useRef<HTMLVideoElement>(null);
 
  useDocumentVisibility({
    onVisibilityChange: (visibility) => {
      if (visibility === 'hidden') {
        videoRef.current?.pause();
      } else {
        videoRef.current?.play();
      }
    },
  });
 
  return <video ref={videoRef} src="video-url.mp4" />;
}

실시간 연결 관리

function LiveConnection() {
  const [isConnected, setIsConnected] = useState(true);
 
  useDocumentVisibility({
    onVisibilityChange: (visibility) => {
      if (visibility === 'hidden') {
        setIsConnected(false);
        disconnect(); // 연결 해제
      } else {
        setIsConnected(true);
        connect(); // 재연결
      }
    },
  });
 
  return <div>연결 상태: {isConnected ? '연결됨' : '연결 해제됨'}</div>;
}

useDebounce useHover