뒤로가기 행동시 이벤트 발생 기능

const browserPreventEvent = (event: () => void) => {
  history.pushState(null, "", location.href);
  event();
};

 useEffect(() => {
    history.pushState(null, "", location.href);
    
      window.addEventListener("popstate", () => {
        browserPreventEvent( '이벤트 함수');
      });
      return () => {
        window.removeEventListener("popstate", () => {
          browserPreventEvent('이벤트 함수');
        });
      };
  }, []);

1. 함수 선언: export const browserPreventEvent = (event: () => void) => {...};
   • browserPreventEvent라는 함수를 선언하고, 이 함수는 하나의 매개변수 event를 받습니다. event는 함수 타입입니다.
   • 이 함수는 브라우저의 현재 URL로 history 상태를 강제로 푸시하고, 제공된 event 함수를 실행합니다. 이는 뒤로 가기 이벤트가 발생했을 때 사용자 정의 동작을 수행하게 합니다.
2. useEffect 훅 사용:
   • useEffect는 컴포넌트가 마운트될 때와 업데이트될 때 부수 효과를 실행하기 위해 사용됩니다. 여기서는 의존성 배열이 비어 있기 때문에 컴포넌트가 마운트될 때만 실행됩니다.
3. 내부에서 history.pushState 호출:
   • 컴포넌트가 마운트되자마자, 현재의 URL 상태를 다시 history 객체에 푸시하여 브라우저의 세션 기록에 현재 위치를 추가합니다.
4. window.addEventListener("popstate", () => {...}):
   • 브라우저의 뒤로 가기 이벤트(popstate)에 대한 리스너를 추가합니다. 이 리스너는 뒤로 가기 버튼이 클릭될 때 browserPreventEvent 함수를 호출하여 onOpenStopBack 함수를 실행합니다.
5. 정리 함수: return () => {...};
   • useEffect 훅은 정리(clean-up) 함수를 제공할 수 있습니다. 이 예제에서 정리 함수는 컴포넌트가 언마운트될 때 실행됩니다.
   • window.removeEventListener("popstate", () => {...})를 호출하여, 더 이상 필요 없는 이벤트 리스너를 제거합니다. 이는 메모리 누수를 방지하고, 불필요한 리스너가 계속해서 활성화되는 것을 막습니다.