[React-Hooks] React Hooks - useBeforeLeave

* useBeforeLeave

• 페이지를 벗어날 때 사용자에게 팝업이나 알림을 띄워 줄 수 있는 hook이다

---

* useBeforeLeave 예시코드

import { useEffect } from "react";

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

const App = () => {
  const begForLife = () => console.log("Plz don't leave");
  useBeforeLeave(begForLife);
  return (
    <div>
      <div>Ho</div>
    </div>
  );
};

export default App;

---

* useBeforeLeave 예시코드 (특정 조건을 포함 시킨 예시 코드)

import { useEffect } from "react";

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

const App = () => {
  const begForLife = () => console.log("Plz don't leave");
  useBeforeLeave(begForLife);
  return (
    <div>
      <div>Ho</div>
    </div>
  );
};

export default App;

• handle함수의 인자로 event를 받아주고 clientY의 값이 0이하로 내려갈경우 알림이 나오게 셋팅을 해주었다.
• 페이지의 위로 벗어날 때 만 코드가 실행되게 구성하였다.