React Hooks_part 3.4_usePageLeave
usePageLeave
기본적으로 탭을 닫을 때 실행되는 function이다.
활용도는 다양하다
마우스가 페이지를 벗어났을 때 console 에 알림을 줘볼까?
import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
const useBeforeLeave = (onBefore) => {
if (typeof onBefore !== "function") {
return;
}
//onbefore은 뭐가 되었던 function이 될 거니까 확인하자
const handle = () => {
console.log("leaving");
};
useEffect(() => {
document.addEventListener("mouseleave", handle);
return () => document.removeEventListener("mouseleave", handle);
}, []);
};
export default function App() {
const begForLife = () => console.log("din't leave");
useBeforeLeave(begForLife);
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}
마우스가 벗어난 위치 횟수가 일정값을 넘었을 때 console.log
import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
const useBeforeLeave = (onBefore) => {
if (typeof onBefore !== "function") {
return;
}
//onbefore은 뭐가 되었던 function이 될 거니까 확인하자
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("don't leave");
useBeforeLeave(begForLife);
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}
이것이 useBeforeLeave였다///
Author And Source
이 문제에 관하여(React Hooks_part 3.4_usePageLeave), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@angel_eugnen/React-Hookspart-3.4usePageLeave저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)