mouseleave란
마우스가 페이지 밖으로 빠져나갈 때 발생하는 이벤트입니다.
// useBeforeLeave
import { useEffect } from "react";
const useBeforeLeave = (onBefore) => {
const handle = (event) => {
const { clientY } = event;
if (clientY <= 0) {
onBefore();
}
};
useEffect(() => {
document.addEventListener("mouseleave", handle);
return () => {
document.removeEventListener("mouseleave", handle);
};
}, []);
};
export default useBeforeLeave;
// index.js
import React from "react";
import ReactDOM from "react-dom";
import useBeforeLeave from "./useBeforeLeave";
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);
event.clientY - 이벤트가 발생했을 때 마우스 y축 위치
if(clientY <= 0) - 마우스가 위로 벗어난 경우에만 조건 충족
'React' 카테고리의 다른 글
[React] 현재 네트워크 상태 확인 (4) | 2021.01.08 |
---|---|
[React] 동적 스타일 적용 (2) | 2021.01.08 |
[React] beforeunload (0) | 2021.01.08 |
[React] window.confirm() (0) | 2021.01.08 |
[React] click 이벤트 (0) | 2021.01.08 |