웹 페이지 복귀 탐지 이벤트 처리(visibilitychange)

비디오 공통 컴포넌트를 작업하다 다른 탭을 클릭해도 이전 탭에 영상 소리가 노출된다는 사실을 알게 됐습니다.
이럴 때 사용할 수 있는 웹 페이지 복귀 탐지 이벤트 처리로 이전 탭 영상을 일시 중지 할 수 있습니다.

addEventListener("visibilitychange", (event) => {});

해당 이벤트는 브라우저 탭의 콘텐츠가 보여지거나 숨겨질 때 발생합니다.

// 1번째 방법
useEffect(() => {
	const video = document.querySelector('video');
    document.addEventListener('visibilitychange', () => {
    	if (document.visibilityState === "visible") {
        	// 해당 페이지가 보이면 영상 재생
        	video.play();
        } else {
        	// 해당 페이지가 노출되지 않으면 영상 멈춤
        	video.pause();
        }
    });
  }, []);

// 2번째 방법
useEffect(() => {
	const video = document.querySelector('video');
    document.addEventListener('visibilitychange', () => {
    	if (document.hidden) {
        	// 해당 페이지가 노출되지 않으면 영상 멈춤
        	video.pause();
        } else {
        	// 해당 페이지가 노출되면 영상 재생
            video.play();
        }
    });
  }, []);

듀얼 모니터인 경우 해당 코드가 적용되지 않을 수 있습니다.

틀린 부분이 있으시면 말씀해주세요~~!!