🪵 7. React 환경에서의 새로고침 방지와 리다이렉트 구현: 게임 이탈 방지 전략

게임 애플리케이션에서 사용자의 의도치 않은 페이지 이탈을 방지하고, 새로고침 시 적절한 리다이렉트를 구현한 경험을 공유하고자 합니다.

1. 구현 배경과 요구사항

게임 진행 중 사용자가 실수로 브라우저 뒤로 가기를 누르거나 새로고침을 하는 경우, 게임 상태가 손실되는 문제가 있었습니다. 이는 UX를 저해하는 중요한 요소였습니다.

또한, 서버에서도 reconnected 시 드로잉 및 채팅 로그를 유지하기 어려운 상황이었습니다. 그래서 히스토리 및 새로고침 조작 시 리다이렉트 해야하는 요구사항이 생겼습니다.

해결해야 할 문제들

• 브라우저 히스토리 조작 방지
  • 뒤로 가기/앞으로 가기 시도 시 사용자 확인
  • 현재 URL 유지를 위한 history stack 관리
  • popstate 이벤트 핸들링
• 새로고침 시나리오 처리
  • 새로고침 시도 시 사용자 확인
  • Storage를 활용한 리다이렉트 플래그 관리
  • 메인 페이지로의 자동 리다이렉션
• 게임 이탈 방지 UX
  • 모달을 통한 명확한 사용자 의사 확인
  • 실수로 인한 게임 종료 방지

2. 구현 과정에서의 시행착오

2.1. React Router의 빌트인 솔루션 시도

처음에는 React Router에서 제공하는 useBeforeUnload와 같은 내장 훅을 사용해 구현을 시도했습니다.

// ❌ React Router 훅 사용의 한계
useBeforeUnload({
  when: true,
  message: "게임을 종료하시겠습니까?"
});

하지만 이 방식은 몇 가지 문제점이 있었습니다.

• 브라우저별로 동작이 일관되지 않음
• 커스텀 모달 대신 브라우저 기본 팝업만 사용 가능
• history stack 조작이 제한적

가장 큰 문제는 뒤로가기 및 새로고침 시 리다이렉트 되는 로직을 추가할 수 없어 핵심적인 문제였습니다.

2.2. 커스텀 훅 접근 방식

다음으로 직접 커스텀 훅을 만들어 문제를 해결하려 했습니다.

// ❌ 커스텀 훅 방식의 한계
const useNavigationGuard = () => {
  useEffect(() => {
    // 이벤트 핸들러 등록
    // 상태 관리 로직
  }, []);
};

더 함수적인 접근 가능해지고, 로직 재사용이 직관적으로 할 수 있었습니다.

하지만 이 방식의 문제점은 아래와 같았습니다.

• 여러 컴포넌트에서 사용시 이벤트 리스너 중복 등록 가능성
• 전역적인 네비게이션 제어가 어려움
• 컴포넌트 트리의 특정 위치에서만 동작하도록 제한하기 어려움

2.3. 컴포넌트 기반 해결책 채택

최종적으로 독립된 컴포넌트로 구현하여 문제를 해결했습니다.

const BrowserNavigationGuard = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const modalActions = useNavigationModalStore((state) => state.actions);

  useEffect(() => {
    // 새로고침 처리를 위한 핸들러
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = '';

      // 새로고침 시 메인으로 리다이렉트하기 위한 플래그 저장
      sessionStorage.setItem('shouldRedirect', 'true');

      return '게임을 종료하시겠습니까?';
    };

    // 브라우저 navigation 처리를 위한 핸들러
    const handlePopState = (e: PopStateEvent) => {
      e.preventDefault();
      modalActions.openModal();

      // 현재 URL 유지를 위한 history stack 조작
      window.history.pushState(null, '', location.pathname);
    };

    window.history.pushState(null, '', location.pathname);
    window.addEventListener('beforeunload', handleBeforeUnload);
    window.addEventListener('popstate', handlePopState);

    // 새로고침 후 리다이렉트 처리
    const shouldRedirect = sessionStorage.getItem('shouldRedirect');
    if (shouldRedirect === 'true' && location.pathname !== '/') {
      navigate('/', { replace: true });
      sessionStorage.removeItem('shouldRedirect');
    }

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      window.removeEventListener('popstate', handlePopState);
    };
  }, [navigate, location.pathname]);

  return null;
};

• 특정 라우트(게임 진행 중)에서만 동작해야 하는 명확한 범위 존재
• React의 컴포넌트 트리 구조를 활용한 history stack을 명확한 제어 가능
• 커스텀 UI와의 자연스러운 통합
• 재사용성과 유지보수성 향상

3. 구현 전략 설명

3.1. History Stack 관리

window.history.pushState(null, '', location.pathname);

초기 진입 시 현재 상태를 history stack에 추가해 navigation 이벤트를 감지할 수 있는 기반을 마련했습니다.

3.2. 새로고침 처리 전략

Storage API 선택에 대한 고찰

새로고침 처리를 위한 플래그 저장 방식을 결정할 때, localStorage와 sessionStorage 두 가지 옵션을 검토했습니다.

LocalStorage를 사용했을 때의 문제점

처음에는 LocalStorage를 사용했지만, 아래와 같은 문제가 발생했습니다.

// ❌ localStorage 사용 시의 문제
localStorage.setItem('shouldRedirect', 'true');

• 브라우저/탭이 닫혀도 플래그가 계속 유지됨
• 다음 세션에서 의도치 않은 리다이렉트 발생 가능
• 플래그 삭제 로직이 명시적으로 필요

SessionStorage 채택 이유

// ✅ sessionStorage 사용의 장점
sessionStorage.setItem('shouldRedirect', 'true');

1. 자동 정리 (Auto Cleanup)
   • 브라우저/탭이 닫힐 때 데이터가 자동으로 삭제됨
   • 다음 세션에 영향을 주지 않음
2. 세션 범위 제한
   • 같은 탭 내에서만 데이터 유지
   • 다른 탭의 게임 세션과 충돌 방지
3. 명시적인 수명 주기
   • 게임 세션과 데이터의 수명 주기가 자연스럽게 일치
   • 추가적인 cleanup 로직이 불필요

이러한 이유로 sessionStorage가 새로고침 처리를 위한 플래그 관리에 더 적합한 선택이었습니다.

3.3. Navigation 이벤트 처리

const handlePopState = (e: PopStateEvent) => {
  e.preventDefault();
  modalActions.openModal();
  window.history.pushState(null, '', location.pathname);
};

뒤로 가기/앞으로 가기 시도 시 이를 중단하고 사용자 확인 모달을 표시합니다.

3.4. 리다이렉트 처리

if (shouldRedirect === 'true' && location.pathname !== '/') {
  navigate('/', { replace: true });
  sessionStorage.removeItem('shouldRedirect');
}

새로고침 후 세션스토리지에 shouldRedirect가 있다면 메인 페이지로의 리다이렉트를 처리합니다.

4. NavigationModal 연동

export const NavigationModal = () => {
  const navigate = useNavigate();
  const isOpen = useNavigationModalStore((state) => state.isOpen);
  const actions = useNavigationModalStore((state) => state.actions);

  const handleConfirmExit = () => {
    actions.closeModal();
    navigate('/', { replace: true });
  };

  return (
    <Modal
      title="게임 나가기"
      isModalOpened={isOpen}
      closeModal={actions.closeModal}
    >
      <p>정말 게임을 나가실거에요...??</p>
      <Button onClick={handleConfirmExit}>나갈래요..</Button>
      <Button onClick={actions.closeModal}>안나갈래요!</Button>
    </Modal>
  );
};

5. 결과 및 이점

이러한 구현을 통해 아래와 같은 이점을 얻을 수 있었습니다.

1. 의도치 않은 게임 이탈 방지
2. 사용자에게 명확한 피드백 제공
3. 게임 상태 보존을 위한 적절한 리다이렉트 처리
4. React Router와의 자연스러운 통합

이 구현은 게임의 안정성을 높이고 사용자 경험을 개선하는 데 큰 도움이 되었습니다.