[React] mouseleave

mouseleave란
마우스가 페이지 밖으로 빠져나갈 때 발생하는 이벤트입니다.

// useBeforeLeave

import { useEffect } from "react";

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

export default useBeforeLeave;

// index.js

import React from "react";
import ReactDOM from "react-dom";
import useBeforeLeave from "./useBeforeLeave";

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

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

event.clientY - 이벤트가 발생했을 때 마우스 y축 위치
if(clientY <= 0) - 마우스가 위로 벗어난 경우에만 조건 충족