JavaScript 뒤로가기를 감지 및 방지해보자

React를 이용하여 프로젝트를 진행하면서, 뒤로가기를 클릭하면 페이지를 뒤로가기 페이지가 아닌, 다른 페이지로 바꾸고싶었다.
React-router-dom v6 이전까지는 history 내에서 이전 값을 확인할 수 있었지만, v6부터는 history가 사라졌다.
navigate로 history를 대체하지만, 뒤로가기를 -1로 할 수 있을 뿐, 뒤로가기를 감지할 순 없었다.
그래서 방법을 찾아보았다.

1. history라는 라이브러리 설치

• history의 action이 ‘pop’일 때, 즉 브라우저의 앞, 뒤, 새로고침 버튼을 누를 때 발생하는 action이다.
• history가 pop일 때를 감지하여, 그 때 navigate를 하고싶었지만, 뒤로가기뿐만이 아닌, 모든 동작이 같이 발생하여 이것을 원하는게 아니었다.

1. window로 뒤로가기 감지

window.performance && window.performance.navigation.type == 2

위 코드를 이용하여 뒤로가기를 감지할 수 있다고 한다.
react에서 useEffect안에서, 뒤로가기를 감지하려고 하였다.
하지만, 해당 코드는 뒤로가기 이벤트를 클릭했을 때를 감지하는 것이 아닌, **‘해당 페이지를 뒤로가기로 접근했을 때’**를 뜻하는 것이었다.

3. window.history에 강제로 현재 페이지 삽입하기

window.history.pushState(null, '', '');
    window.onpopstate = () => {
			navigate('/');
	}

위 코드를 useEffect안에 넣어주었다.
위 코드는 내 history에 강제로 삽입해주고, 뒤로가기를 클릭 시에 navigate를 해주었다.
위 코드는 잘 동작이 되었지만, navigate에서의 뒤로가기는 또 동작하지 않았다.
그 이유는 window로 브라우저 자체에서 state를 넣어주었기 때문에 이전에 뒤로가기 할 경로가 없던 것이다.

그래서 즉,
a→b→c→d페이지를 예시로 들면
d페이지에서 b페이지로 window를 이용하여 뒤로가기를 하였어도, a페이지로 갈 수 없는 것이다.
뒤로가기가 완전히 막아진 것으로 보인다.