React에서 브라우저의 뒤로가기 기본 동작 커스텀 하기

Preat은 사용자의 취향을 수집해,
사용자의 취향에 따라 식당을 추천해주는 서비스예요.

그러다보니 회원가입 플로우가 길어지는데,
이 플로우에서 사용자의 예기치 못한 동작을 막기 위해 하나의 페이지에서 step을 상태로 관리해 다음 페이지로 넘어가는 것 처럼 보이도록 구현하였어요.

이런 방법에 문제가 있었는데, 바로 뒤로가기를 했을 경우 사용자가 원하는 동작을 하지 않았어요.
사용자는 여러 페이지로 보이고, 한 페이지 씩 넘어간다고 인식해
뒤로가기를 누르면 그 전 플로우가 나오겠지? 했겠지만 엉뚱한 페이지로 이동해버리는 거죠.

그래서 이를 막아야겠다고 생각해
브라우저의 기본 동작인 뒤로가기 기능을 커스텀 하기로 결정했습니다!

브라우저 뒤로가기 동작을 커스텀 하기

결론적으로, 밑과 같은 코드를 작성하면 원하는 커스텀 동작을 수행할 수 있습니다.
여기서 customBack을 props로 받는데, 이것이 원하는 동작을 수행하는 콜백을 나타내요.

이러한 브라우저 뒤로가기를 커스텀 하는 것을 일반적이고 자주 사용하게 될 것 같아.
custom hook으로 만들었습니다.

useCustomBack.ts

import { useEffect } from 'react';

function useCustomBack(customBack: () => void) {
  const browserPreventEvent = (event: () => void) => {
    history.pushState(null, '', location.href);
    event();
  };

  useEffect(() => {
    history.pushState(null, '', location.href);
    window.addEventListener('popstate', () => {
      browserPreventEvent(customBack);
    });
    return () => {
      window.removeEventListener('popstate', () => {
        browserPreventEvent(customBack);
      });
    };
  }, []);
}


export default useCustomBack;

동작 과정

• 브라우저의 기본적인 뒤로가기가 발생하면 popstate 이벤트가 발생한다.
• 이 이벤트에 커스텀 이벤트를 걸어줘, 기본 동작을 막고 원하는 함수를 실행시킨다.
• 컴포넌트를 언마운트할 때, 이벤트를 지워 연속적으로 이벤트가 중첩되는 것을 막는다.

사용 방법

const handleBack = () => {
	// 커스텀
};

useCustomBack(handleBack);

---

여기까지 React, Next.js 환경에서 브라우저의 뒤로가기 기본 동작을 막고, 다른 함수를 실행시키는 방법이였습니다!