브라우저 뒤로가기 커스텀 동작 hook 만들기

브라우저에서 뒤로가기 버튼을 누르거나 가로로 스와이프 해서 뒤로가기 동작이 일어날때,
자동적으로 전 페이지로 이동하게 된다.

나는 이 기본 뒤로가기 동작을 커스텀 하여, 내가 원하는 동작을 수행하게 하고 싶었다.

브라우저 뒤로가기 동작 커스텀 훅 생성하기

브라우저 뒤로가기 동작을 쉽게 커스텀 하기 위해 custom hook으로 생성하였다.
parameter로 뒤로가기 동작 시 동작할 함수를 콜백으로 넘겨주었다.

useCustomBack.ts

import { useEffect } from 'react';

function useCustomBack(customBack: () => void) {
  useEffect(() => {
    // 뒤로가기 제어
    (() => {
				history.pushState(null, '', location.href);
       window.addEventListener('popstate', customBack);
    })();

    return () => {
      window.removeEventListener('popstate', customBack);
    };
  }, [customBack]);
}

export default useCustomBack;

동작 방식

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

사용 방법

const handleBack = () => {
	// 커스텀 동작 함수
};

useCustomBack(handleBack);