React - 뒤로가기 막기 및 새로고침 알림 띄우기 구현(popstate, beforeunload 이벤트)

jiny·2022년 8월 12일
5

React

목록 보기
2/11
post-thumbnail
post-custom-banner

🚫 뒤로가기 막기

History.pushState()

  • 브라우저의 세션 기록 스택에 상태를 추가
history.pushstate(state, title[, url]);

매개변수

state

  • 새로운 세션 기록 항목에 연결할 상태 객체, 사용자가 새로운 상태로 이동할 때마다 popstate 이벤트 발생

title

  • 지금은 대부분의 브라우저가 title 매개변수를 무시함, 빈 문자열을 지정하면 나중의 변경사항에 안전하며, 상태에 대한 짧은 제목을 제공

** url (Optional)

  • 새로운 세션 기록 항목의 URL. pushState 호출 이후 브라우저는 주어진 URL로 탐색하지 않음
  • 이후 브라우저를 재시작할 경우 탐색을 시도할 수도 있음

popstate 이벤트

  • 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생
  • 활성화 된 엔트리가 pushState, replaceState 메서드에 의해 생성되면 popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 됨

💡 코드 살펴보기

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

  • 브라우저에 mount될 경우 브라우저의 세션 기록 스택에 상태를 추가
  • window 객체에 popstate 이벤트 리스너를 추가
  • 그 때에도 history.pushState()를 불러와 복사본을 저장
  • []를 통해 mount될 때 한 번만 실행

⭐️ 즉, 뒤로 가기 버튼을 누르면 기록 항목에 바뀌게 되는데 그 때, popstate 이벤트가 실행되면서 preventGoBack이 실행되게 되고 현재 위치를 반환하며 알림을 출력하는 형태 인 것!

실행 결과

  • 잘 실행 되는 것을 확인할 수 있음

🚫 새로고침 막기

beforeUnload 이벤트

  • 문서와 리소스가 언로드 되기 직전에 window에서 발생
  • 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
  1. beforeunload
    https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event

  2. popstate
    https://developer.mozilla.org/ko/docs/Web/API/Window/popstate_event

  1. pushState
    https://developer.mozilla.org/ko/docs/Web/API/History/pushState
post-custom-banner

0개의 댓글