리액트에서 마우스가 브라우저 창 밖에 있는지 감지하기

리액트에서 마우스가 브라우저 창 밖에 있는지 감지하고 싶다면

mouseenter, mouseleave 이벤트를 등록하여 hover 상태롤 확인하는 hook을 추가하면 간단하게 감지할 수 있다.

 

참고로 document.body 의 이벤트로 등록하여, html 의 body를 기준으로 마우스가 enter 인지 leave 인지로 판단해야 하는데

이것을 body가 아니라 현재 컴포넌트를 기준으로도 할 수는 있지만,

현재 컴포넌트가 자주 리렌더링이 되는 컴포넌트라면 예상했던 모습과 많이 다르게 동작할 수 있다.

계속 깜빡깜빡 거리는 식으로 동작할 수 있기 때문에, 어차피 창 전체를 기준으로 동작하는 기능이라면 body를 기준으로 하는게 편하다... 

 

// useHoverWindow.ts

import { useEffect, useState } from 'react'

export const useHoverWindow = (): [boolean] => {
    const [isHover, setIsHover] = useState<boolean>(false)

    const handleMouseOver = () => {
        setIsHover(true)
    }
    const handleMouseOut = () => {
        setIsHover(false)
    }

    useEffect(() => {
        document.body.addEventListener('mouseenter', handleMouseOver)
        document.body.addEventListener('mouseleave', handleMouseOut)
        return () => {
            document.body.removeEventListener('mouseenter', handleMouseOver)
            document.body.removeEventListener('mouseleave', handleMouseOut)
        }
    }, [])
    return [isHover]
}

 

사용시

const [isHover] = useHoverWindow()

if(isHover){
  // 마우스가 브라우저 창 안에 있음
}