리액트 - 페이지 가시성 확인하기 (useEffect with Visibility Change Event)

리액트 전체 링크

 

참고

- 마우스가 일정 시간 움직이지 않는 경우 새로고침하기

 

페이지가 가려졌거나, 보이지 않는 경우에 이벤트를 감지해 보자.

---

구현

 

페이지 가시성은 document의 visibilityState로 확인할 수 있다.

const [visibility, setVisibility] = useState(document.visibilityState);

 

그리고 visibilitychange 이벤트로 가시성 상태 변경을 감지한다.

useEffect에 이벤트를 등록해서 이벤트를 처리하면 된다. (clean-up 함수에서는 이벤트를 제거한다.)

  useEffect(() => {
    const handleVisibilityChange = () => {
      setVisibility(document.visibilityState); // visible, hidden, prerender, unloaded
    };

    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);

 

하지만 visibility 변경이 매우 빠르게 일어나므로, hidden으로 변경되는 것을 확인하기 어렵다.

따라서 setTimeout을 이용해 3초 뒤에 변경되도록 보완한다.

  const handleVisibilityChange = () => {
    setTimeout(() => {
      setVisibility(document.visibilityState); // visible, hidden, prerender, unloaded
    }, [3000]);
  };

 

전체 코드는 다음과 같다.

import React, { useEffect, useState } from "react";

const PageCheck = () => {
  const [visibility, setVisibility] = useState(document.visibilityState);

  useEffect(() => {
    const handleVisibilityChange = () => {
      setTimeout(() => {
        setVisibility(document.visibilityState); // visible, hidden, prerender, unloaded
      }, [3000]);
    };

    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);

  return (
    <div>
      <h1>페이지를 보고 있는지 확인</h1>
      <p>현재 페이지 상태: {visibility}</p>
    </div>
  );
}

export default PageCheck;