[React] 뒤로 가기 막기

안녕하세요. J4J입니다.

 

이번 포스팅은 뒤로 가기 막는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

뒤로 가기 막는 방법

 

리액트를 이용해 여러 UI/UX를 제공하다 보면 상황에 따라 뒤로 가기를 눌렀을 때 기존에 우리가 알던 방식처럼 이전 URL로 넘어가는 것이 아니라 특정 액션이 취해지는 결과를 만드실 필요가 있을 수도 있습니다.

 

흔히 사용되는 케이스는 아닐 것으로 생각되지만, 혹시나 필요하신 분들을 위해 제가 알고 있는 방법에 대해 간단히 적어보도록 하겠습니다.

 

 

 

먼저 다음과 같은 코드를 보겠습니다.

 

 

반응형

 

 

import React, { useEffect, useState } from 'react';

const App = () => {
    const [toggle, setToggle] = useState<boolean>(false);

    useEffect(() => {
        if (toggle) {
            history.pushState(null, '', ''); // 현재 페이지 history stack 한개 더 쌓기
            window.onpopstate = () => {
                // 뒤로가기가 실행될 경우 추가 action 등록
                alert('뒤로가기를 막고 alert를 띄워봅니다.');
            };
        } else {
            window.onpopstate = () => {
                // 초기화
            };
        }
    }, [toggle]);

    const clickButton = () => {
        setToggle(!toggle);
    };

    return (
        <div>
            <h2>Toggle: {String(toggle)}</h2>
            <button onClick={clickButton}>Prevent Toggle</button>
        </div>
    );
};

export default App;

 

 

 

위의 코드는 버튼을 클릭할 때마다 페이지 뒤로가기가 막히도록 설정해둔 코드입니다.

 

toggle이 true가 되었을 때 발생되는 상황은 다음과 같습니다.

 

• pushState를 통해 현재 페이지 history stack 한 개 더 쌓기
• 뒤로 가기 이벤트에 원하는 action 실행되도록 설정

 

 

 

위와 같은 설정들이 이루어지기 때문에 뒤로 가기를 누르면 다음과 같은 상황이 발생됩니다.

 

• 한 개 더 쌓인 history stack이 사라지며 현재 페이지 그대로 유지
• 뒤로 가기 이벤트에 등록된 action 동작

 

 

728x90

 

 

여기서 한 가지 알아야 될 점은 위의 방법은 뒤로 가기를 영원히 막을 수 없습니다.

 

왜냐하면 pushState를 통해 history stack을 한 개만 쌓았기 때문에 뒤로 가기를 한번 더 누르게 되면 이전 페이지로 넘어가게 됩니다.

 

상황에 맞게 위의 코드를 활용하면 뒤로가기 이벤트가 수행될 때 특정 기능을 동작시킬 수 있습니다.

 

 

 

 

 

 

 

이상으로 뒤로가기 막는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.