[TIL] useBeforeLeave

useBeforeLeave

마우스 커서가 밖으로 벗어났을 때 실행되는 Hook

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

const useBeforeLeave = onBefore => {
  if (typeof onBefore !== 'function') {
    return
  }
  const handle = event => {
    const { clientY } = event
    if (clientY <= 0) {
      onBefore()
    }
  }
  useEffect(() => {
    document.addEventListener('mouseleave', handle)
    return () => document.removeEventListener('mouseleave', handle)
  }, [])
}

const App = () => {
  const beg = () => console.log('Pls dont leave')
  useBeforeLeave(beg)
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(
  <App />,

  rootElement
)

여기서 handle 함수에 clientY는 마우스 커서가 위쪽 방향으로 나갔을 경우 clientY의 값이 0이 되므로 if 함수를 통해 0보다 아래거나 같으면 onBefore() 함수가 실행된다

const handle = event => {
  console.log(event)
  onBefore()
}

콘솔을 찍어 확인해보면 아래와 같은 값이 나온다.