[React] React Hooks (6) - useBeforeLeave

useBeforeLeave

탭을 닫을 때 실행되는 function 생성하기

구체적으로는 마우스의 위치를 확인해서 마우스가 탭쪽으로 갔을때 실행되는 함수임

 

useBeforeLeave 예시

마우스를 상단 탭 위로 가져가면 사진의 콘솔 메시지가 뜸

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);
  }, []);
};

const App = () => {
  const begForLife = () => console.log("Pls don't leave");
  useBeforeLeave(begForLife);

  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
};