[리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useBeforeLeave

노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다.

nomadcoders.co/

 

[예제 코드]

import { StrictMode, useEffect } from "react";
import ReactDOM from "react-dom";

const useBeforeLeave = (onBefore) => {
  if (typeof onBefore !== "function") {
    return;
  }

  const handle = (event) => {
    //console.log(event);
    const { clientY } = event;
    if (clientY <= 0) {
      onBefore();
    }
  };
  useEffect(() => {
    document.addEventListener("mouseleave", handle);
    return () => document.removeEventListener("mousleave", handle);
  }, []);
};

const App = () => {
  const begForLife = () => console.log("Pls dont leave");
  useBeforeLeave(begForLife);
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

728x90

 

[강의 설명]

 

useBeforeLeave는 마우스가 페이지에서 벗어났을 때 function이 실행되는 훅이다.

팝업과 같은 기능을 실현하고 싶을 때 굉장히 유용하다.

 

마우스가 document를 벗어났을때 실행시킬 할수 이름을 handle이라고 지정해주고, 

component가 마운트 되었을 때, document.addEventListener("mouseleave")를 실행한다.

반대로, componentWillUnMount 할 때에는 해당 이벤트를 삭제할 수 있게 removeEventListener를 return해준다.

그리고 해당 이벤트가 계속해서 추가되지 않고 한번만 실행되도록 하기위해 []를 마지막 dependency에 추가해준다.

=> 지금보면 addEventListener와 removeEventListener를 한번만 실행되게 해주는데 이렇게 해주는 이유는 한번이 아닌 여러번 실행이 되게 하면 document.addEventListener("mouseleave", handle); 와

document.removeEventListener("mouseleave", handle); 가 컴포넌트가 마운트 될때마다 생성이 된다.

이말인 즉슨, 아래와 같이 코드를 쓰게 되는 것과 같다는 의미이다.

document.addEventListener("mouseleave", handle);
document.removeEventListener("mouseleave", handle);
document.addEventListener("mouseleave", handle);
document.removeEventListener("mouseleave", handle);
document.addEventListener("mouseleave", handle);
document.removeEventListener("mouseleave", handle);
document.addEventListener("mouseleave", handle);
document.removeEventListener("mouseleave", handle);
document.addEventListener("mouseleave", handle);
document.removeEventListener("mouseleave", handle);
document.addEventListener("mouseleave", handle);
document.removeEventListener("mouseleave", handle);
document.addEventListener("mouseleave", handle);
document.removeEventListener("mouseleave", handle);

이 이벤트 리스너로 인해 화면에서 mouseleave이벤트가 발생할때 handle 함수가 호출되고 이 함수는 clientY값이 0보다 작을 때, onBefore를 실행하게 된다. onBefore는 바로 useBeforeLeave(begForLife)에서 볼 수 있듯이 begForeLife인 것이므로, clientY값이 0보다 작을 때마다 begForLife가 실행되어 콘솔 창에 Pls dont leave가 찍히는 것이다.

 

*참고*

주석처리 된 console.log(event); 부분에서는 콘솔창에 다음과 같이 찍힌다.

MouseEvent {isTrusted: true, screenX: 1562, screenY: 193, clientX: 436, clientY: -28…}

우리는 여기서 clientY를 이용해서 clientY가 0보다 작을 때에만 onBefore이 실행되도록 해당 기능을 최적화했다.