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

jiny·2022년 8월 12일

React

목록 보기

2/10

🚫 뒤로가기 막기

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);
    };
},[]);