#6. useBeforeLeave hook

useBeforeLeave 

---

기본적으로 탭을 닫을 때 실행되는 function 

ex) 마우스가 페이지를 벗어날 때 function을 실행한다.

import React, { useEffect, useState, useRef } from "react";

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>
  );
};

export default App;

 

 

작동 원리

1. useBeforeLeave의 파라미터에 begForLife를 넣는다.
   • begForLife는 콘솔에 "Pls don't leave"를 출력한다.
2. useBeforeLeave는 useEffect를 이용해 컴포넌트가 mount 될 때 document에 이벤트리스너를 바인딩한다.
   • 여기서는 mouseleave 이벤트 즉, 마우스 커서가 document 밖으로 떠나면 handle 함수를 실행하는 이벤트리스너를 바인딩했다.
   • handle 함수는 이벤트를 객체로 받아 event의 프로퍼티 중 하나인 clientY가 0보다 작으면 prop으로 받은 onBefore함수를 실행하도록 하였다. 여기서 onBefore는 begForLife 즉, Pls don't leave 를 콘솔에 출력하는 함수이다.
     • clientY가 0보다 작다는 말은 마우스가 위로 벗어날 때를 의미한다. 마우스가 아래로 벗어나면 함수가 실행되지 않는다. 
3. useEffect에서는 return 문을 이용해 컴포넌트가 unmount 되었을 때는 document에 바인딩 한 이벤트리스너를 제거하도록 하였다.