History.pushState()
history.pushstate(state, title[, url]);
매개변수
state
popstate
이벤트 발생title
** url (Optional)
popstate 이벤트
const preventGoBack = () => {
history.pushState(null, "", location.href);
alert("종료하기를 눌러주세요 :D");
};
// 브라우저에 렌더링 시 한 번만 실행하는 코드
useEffect(() => {
(() => {
history.pushState(null, "", location.href);
window.addEventListener("popstate", preventGoBack);
})();
return () => {
window.removeEventListener("popstate", preventGoBack);
};
},[]);
preventGoBack
useEffect
⭐️ 즉, 뒤로 가기 버튼을 누르면 기록 항목에 바뀌게 되는데 그 때, popstate 이벤트가 실행되면서 preventGoBack이 실행되게 되고 현재 위치를 반환하며 알림을 출력하는 형태 인 것!
beforeUnload 이벤트
사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시
할 수 있음확인
을 누를 경우 브라우저는 새로운 페이지로 탐색
취소
할 경우 탐색을 취소하고 현재 페이지에 머무름
e.preventDefault() 사용
해야 함// 새로고침 막기 변수
const preventClose = (e:BeforeUnloadEvent) => {
e.preventDefault();
e.returnValue = ""; // chrome에서는 설정이 필요해서 넣은 코드
}
// 브라우저에 렌더링 시 한 번만 실행하는 코드
useEffect(() => {
(() => {
window.addEventListener("beforeunload", preventClose);
})();
return () => {
window.removeEventListener("beforeunload", preventClose);
};
},[]);
참고한 사이트
https://snupi.tistory.com/195