[React Hooks - 8] useBeforeLeave 만들기

오늘 스터디한 내용은 useBeforeLeave입니다. 탭에서 마우스 커서가 떠나면 정해진 이벤트가 발생하는 구조입니다.
자주 쓸 일이 있는 것은 아니지만, 재미난 기능들을 넣을 때 사용이 가능 할 것 같다는 생각이 드네요.

---

useBeforeLeave 설명

• onBefore 이름으로 callback 함수를 넘겨 받는다.
• 함수인지 체크하는 것은 이젠 센스!!
• Tab에서 Y 좌표가 0보다 작아지면 callback 함수를 실행합니다

전체 소스

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

const BeforeLeaveApp = () => {
  const begForLife = () => console.log("Do not leave");
  useBeforeLeave(begForLife);

  return (
    <div className="App">
      {content.map((section, idx) => (
        <button onClick={() => changeItem(idx)}>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
};

---

간단함 함수이지만 평소에 자주 쓰는 이벤트는 아니어서, 이렇게 작성해 놓으면 나중에 필요 할 때에 다른 곳에 찾으러 다니는 시간을 단축 시킬 수 있을 것 같다는 생각이 드네요..

니꼴라스 선생님 정말 짱입니다!!

감사합니다.