[React] mouseleave를 useEffect를 활용하여 컨트롤

코드

import React from 'react'
import { useEffect } from 'react';

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

  function handle(e) {
    const {clientY} = e;
    if(clientY <= 0) {
      onBefore();
    }
  }
}

export default function App() {
  function begForLife() {
    console.log('Please');
  }

  useBeforeLeave(begForLife);

  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}

배운점

• clientY를 이용해 위로 나갔을 때만 콘솔을 띄운다.

의문점

• useEffect에 return 안 써도 결과 똑같은데 왜 써주는지 이해가 안 간다...