(React Hooks) useEffect - useBeforeLeave

탭을 닫을 때 실행되는 function

 

 

const useBeforeLeave = () => {

  const handle = () => {

    console.log("leaving");

  };

  useEffect(() => {

    document.addEventListener("mouseleave", handle);

    return () => document.removeEventListener("mouseleave", handle);

  }, []);

}

export default function App() {

  return (

    <div className="App">

      <h1>Hi</h1>

    </div>

  );

}

addEventListener로 이벤트를 실행시킨 이후에 component가 mount되지 않았다면 return으로 remove해준다.

인터넷 창에서 브라우저 영역 밖으로 마우스가 이동 시 에 leaving을 출력한다.

 

위와 같이 코드를 작성시에 React Hook "useEffect" is called conditionally. 에러가 발생하였다.

  if(typeof onBefore !== "function") {

    return;

  }

이부분에서 useEffect() 가 선언되기 이전에 return이 발생하여서 생긴 Error

해당부분을 useEffect() 안에 넣으니 해결이 되었다.

 

 

 

 

const useBeforeLeave = (onBefore) => {

  if(typeof onBefore !== "function") {

    return;

  }

}

onBefore로 값을 받아 값이 function이 아니면 바로 return 시킨다.

 

 

 

 

  const handle = () => {

    onBefore();

  };

  const begForLife = () => console.log("Plz don't leave")

  useBeforeLeave(begForLife);

위 코드를 추가하면 leaving 대신에 begForLife() 가 실행된다.

 

 

 

 

  const handle = (event) => {

    console.log(event);

    const {clientY} = event;

    if(clientY <= 0){

    onBefore();

    }

  };

MouseEvent.clientY 값으로 제어하기

log에 찍히는  event( MouseEvent ) 값인 clientY 로 조건을 걸어서 해당할 경우에만 onBefore() 이 실행되도록 작성.

 

 

 

 

 

const useBeforeLeave = (onBefore) => {

  const handle = (event) => {

    console.log(event);

    const {clientY} = event;

    if(clientY <= 0){

    onBefore();

    }

  };

  useEffect(() => {

    if(typeof onBefore !== "function") {

      return;

    }

    document.addEventListener("mouseleave", handle);

    return () => document.removeEventListener("mouseleave", handle);

  }, []);

}

export default function App() {

  const begForLife = () => console.log("Plz don't leave")

  useBeforeLeave(begForLife);

  return (

    <div className="App">

      <h1>Hi</h1>

    </div>

  );

}

useBeforeLeave 전체코드