Hook in React - useBeforeLeave

note) const { clientY } = event;와 같이 사용하면 event object 에서 clientY 만을 뽑아낼수 있다. (유용한 기법)

 

note) mouseleave event handler 등록과 해제를 아래 code 와 같이  useEffect 안에서 자체적으로 하고 있다 awesome codes.

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

 

note) 아래는 test 가 가능한 전체 code 이다.

import { useEffect } from "react";

export 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 begForlife = () => console.log("Pls don't leave")
  useBeforeLeave (begForlife)
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

 

note) 위는 아래의 교육과장을 이수하면서 정리한 것이다.

https://nomadcoders.co/react-hooks-introduction/lobby?utm_source=free_course&utm_campaign=react-hooks-introduction&utm_medium=site