리액트 - 마우스가 일정 시간 움직이지 않는 경우 새로고침하기 (useEffect with Mouse Move Event)

리액트 전체 링크

 

참고

- 페이지 가시성 확인하기

 

다음과 같이 마우스가 5초 이상 움직이지 않는 경우, 새로고침을 하도록 해보자.

또한 페이지 내에서 마우스가 움직이는 것이 아니라면 여전히 타이머는 증가한다.

---

구현

 

타이머를 표시할 변수를 useState로 선언한다.

  const [seconds, setSeconds] = useState(0);

 

최초 렌더링시 useEffect에서 mousemove 이벤트를 등록한다.

5초 이상 시간이 지나는 경우 window.location.reload()로 새로고침을 실행하였다.

  useEffect(() => {
    let timer;

    const handleMouseMove = () => {
      setSeconds(0);
    };

    document.addEventListener("mousemove", handleMouseMove);

    const incrementTimer = () => {
      setSeconds((prevSeconds) => {
      
        if (prevSeconds + 1 >= 5) window.location.reload();
        
        return prevSeconds + 1;
      });
    };
    
    timer = setInterval(incrementTimer, 1000);

    ...
  }, []);

 

마지막으로 clean-up 함수에서 interval를 제거하고, 이벤트를 해제한다.

    return () => {
      clearInterval(timer);
      document.removeEventListener("mousemove", handleMouseMove);
    };

 

전체 코드는 다음과 같다.

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

const RefreshTimer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    let timer;

    const handleMouseMove = () => {
      setSeconds(0);
    };

    document.addEventListener("mousemove", handleMouseMove);

    const incrementTimer = () => {
      setSeconds((prevSeconds) => {
        console.log(prevSeconds);
        if (prevSeconds + 1 >= 5) window.location.reload();
        return prevSeconds + 1;
      });
    };
    
    timer = setInterval(incrementTimer, 1000);

    return () => {
      clearInterval(timer);
      document.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return (
    <div>
      <h1>타이머: {seconds}초</h1>
    </div>
  );
}

export default RefreshTimer;