[React] React Hook-2.4 useEffect를 활용한 useBeforeLeave

- 마우스가 창 상단의 바깥쪽으로 나가면 console 창에 "will you leave?"를 표시한다.

 

import React, { useRef, useEffect, useState } 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);
  }, []);
};
export default function App() {
  const askMention = () => console.log("will you leave?");
  useBeforeLeave(askMention);
  return (
    <div className="App">
      <h1>hello</h1>
    </div>
  );
}