[React] 뒤로가기 버튼 감지

react에서 뒤로가기 버튼을 감지하는 작업을 해야할 때가 있다. 

과연 어떤 방법을 사용해야 할까? 

 

세팅

본인은 react-router-dom v6 을 사용하고 있다. 

v6에는 history를 제공해주는 useHistory가 사라져서 따로 패키지를 받아야 한다. 

yarn add history

 

작업 시작

// common/history.ts

import { createBrowserHistory } from "history";

const history = createBrowserHistory();
export default history;

필요할 때마다 createBrowserHistory를 사용해서 history를 만들어도 되지만 그렇게되면 

두번 일을 한다는 느낌이 있어서 따로 만들었다. 

 

history는 액션이 2개가 있는데, push와 pop이다.

 

push

react-router-dom의 link 등을 이용해서 페이지를 이동할 때 발생하는 action이다. 

 

pop 

브라우저에서 앞으로가기, 뒤로가기, 새로고침 버튼을 누를 때 발생하는 action이다. 

 

이것을 사용하면 필요한 경우에 이벤트를 발생할 수 있을 것이다. 

 

const [locationKeys, setLocationKeys] = useState([]);

useEffect(() => {
  return history.listen((location) => {
    if (history.action === "PUSH") {
      setLocationKeys([location.key]);
    }

    if (history.action === "POP") {
      if (locationKeys[1] === location.key) {
        setLocationKeys(([_, ...keys]) => keys);

        // 앞으로 가기
      } else {
        setLocationKeys((keys) => [location.key, ...keys]);

        // 뒤로 가기
        history.push("/detail");
      }
    }
  });
}, [locationKeys, history]);

이것을 필요한 곳에서 useEffect와 함께 사용해서 

뒤로가는 경우, 앞으로 가는 경우 등 필요한 경우와 함께 사용하면 된다. 

 

참고

https://velog.io/@tunakim/React%EC%97%90%EC%84%9C-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0-%EB%B2%84%ED%8A%BC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EA%B0%90%EC%A7%80

React에서 브라우저의 뒤로가기 버튼 이벤트 감지