usePageLeave

기본적으로 탭을 닫을 때 실행되는 function이다.
활용도는 다양하다

마우스가 페이지를 벗어났을 때 console 에 알림을 줘볼까?

import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
const useBeforeLeave = (onBefore) => {
  if (typeof onBefore !== "function") {
    return;
  }
  //onbefore은 뭐가 되었던 function이 될 거니까 확인하자
  const handle = () => {
    console.log("leaving");
  };

  useEffect(() => {
    document.addEventListener("mouseleave", handle);
    return () => document.removeEventListener("mouseleave", handle);
  }, []);
};

export default function App() {
  const begForLife = () => console.log("din't leave");
  useBeforeLeave(begForLife);
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

마우스가 벗어난 위치 횟수가 일정값을 넘었을 때 console.log

import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
const useBeforeLeave = (onBefore) => {
  if (typeof onBefore !== "function") {
    return;
  }
  //onbefore은 뭐가 되었던 function이 될 거니까 확인하자
  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 begForLife = () => console.log("don't leave");
  useBeforeLeave(begForLife);
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

이것이 useBeforeLeave였다///