[Feature]: useBeforeUnload

[ssi02014]

Package Scope

• 기존 패키지에 기능 추가
• 새로운 패키지
• Package name: @modern-kit/react/hooks

Overview

beforeunload 이벤트는 window, 문서(document) 및 해당 리소스가 언로드(unload) 되려고 할 때 시작됩니다. 문서는 계속 보이고 있으며 이벤트는 이 시점에서도 취소할 수 있습니다.

이 이벤트를 사용하면 웹 페이지에서 사용자에게 실제로 페이지를 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 사용자가 확인 버튼을 누를 경우 브라우저는 새 페이지로 이동하고 그렇지 않으면 탐색을 취소하고 현재 페이지에 머무릅니다.

해당 beforeunload를 리액트로 활용할 수 있게 훅으로 구성합니다.

interface UseBeforeUnloadProps {
  enabled?: boolean;
  beforeUnloadAction?: (event: BeforeUnloadEvent) => void;
}

[ssi02014]

코드 내부 구현은 아래와 같이 생각했습니다.

function useBeforeUnload({
  enabled = true, // true 기본 값 설정
  beforeUnloadAction = noop, // noop 기본 값 설정
}: UseBeforeUnloadProps = {}): void {
  const handleBeforeUnload = usePreservedCallback(
    (event: BeforeUnloadEvent) => {
      event.preventDefault();

      beforeUnloadAction(event);
      return (event.returnValue = ""); // 대부분의 브라우저에서 필수로 설정해야 작동
    }
  );

  useEffect(() => {
    if (!enabled) return;

    window.addEventListener("beforeunload", handleBeforeUnload);

    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [enabled, handleBeforeUnload]);
}