React Router의 useBlocker 훅을 통한 웹뷰 환경의 안드로이드 물리 버튼 뒤로 가기 처리

override fun onBackPressed() {
        if (webView.canGoBack()) {
            // 웹뷰 히스토리가 있으면 뒤로 가기
            webView.goBack()
        } else {
            // 히스토리가 없으면 기본 뒤로 가기 동작
            super.onBackPressed()
        }
    }

// 뒤로 가기 방지를 위한 기존 접근법 (불안정한 방식)
useEffect(() => {
  const preventGoBack = () => {
    // 사용자 정의 로직 실행
    history.pushState(null, '', location.href);
    alert('뒤로 가기가 비활성화되어 있습니다.');
  };

  history.pushState(null, '', location.href);
  window.addEventListener('popstate', preventGoBack);

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

import { useBlocker } from 'react-router-dom';

// 기본 사용법 - 라우트 변경 시 차단
const blocker = useBlocker(
  ({ currentLocation, nextLocation }) =>
    currentLocation.pathname !== nextLocation.pathname
);

// 위치와 액션 모두 활용하는 예시
const blocker = useBlocker(
  ({ currentLocation, nextLocation, historyAction }) => {
    // 뒤로 가기(POP) 액션일 때만 차단하는 조건
    if (historyAction === 'POP') {
      return true; // 뒤로 가기 막기
    }

    // 또는 특정 경로에서 특정 액션만 차단
    if (
      currentLocation.pathname === '/important-form' &&
      historyAction === 'POP'
    ) {
      return true; // 중요한 폼 페이지에서 뒤로 가기만 차단
    }

    // 그 외의 경우는 차단하지 않음
    return false;
  }
);

import { useBlocker, useLocation, useNavigate } from 'react-router-dom';
import { useState } from 'react';

function FormPage() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [isFormDirty, setIsFormDirty] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();

  // 폼이 변경되었을 때만 내비게이션 차단
  const blocker = useBlocker(
    ({ currentLocation, nextLocation, historyAction }) => {
      // POP 액션(뒤로 가기)일 때만 차단
      return isFormDirty && historyAction === 'POP';
    }
  );

  // 사용자 선택에 따른 처리
  useEffect(() => {
    if (blocker.state === 'blocked') {
      const confirmed = window.confirm(
        '작성 중인 내용이 있습니다. 정말 페이지를 떠나시겠습니까?'
      );

      if (confirmed) {
        blocker.proceed();
      } else {
        blocker.reset();
      }
    }
  }, [blocker]);

  const handleChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
    setIsFormDirty(true);
  };

  const handleSubmit = e => {
    e.preventDefault();
    // 폼 제출 처리
    setIsFormDirty(false);
    navigate('/success');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">제출</button>
    </form>
  );
}

import { useBlocker, useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function SpecialPage() {
  const navigate = useNavigate();
  const location = useLocation();

  // 뒤로 가기(POP) 액션만 차단
  const blocker = useBlocker(({ historyAction }) => historyAction === 'POP');

  // 뒤로 가기 차단 시 홈으로 리다이렉트
  useEffect(() => {
    if (blocker.state === 'blocked') {
      // 차단 리셋 후 홈으로 이동
      blocker.reset();
      navigate('/', { replace: true });
    }
  }, [blocker, navigate]);

  return (
    <div>
      <h1>특별 페이지</h1>
      <p>이 페이지에서 뒤로 가기를 누르면 홈으로 이동합니다.</p>
    </div>
  );
}

import { useBlocker } from 'react-router-dom';
import { useState, useEffect } from 'react';

function PageWithModal() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 모달이 열려있을 때만 내비게이션 차단
  const blocker = useBlocker(
    ({ historyAction }) => isModalOpen && historyAction === 'POP'
  );

  // 뒤로 가기 시 모달 닫기
  useEffect(() => {
    if (blocker.state === 'blocked') {
      setIsModalOpen(false);
      blocker.reset();
    }
  }, [blocker]);

  return (
    <div>
      <h1>메인 페이지</h1>
      <button onClick={() => setIsModalOpen(true)}>모달 열기</button>

      {isModalOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>모달 제목</h2>
            <p>모달 내용...</p>
            <button onClick={() => setIsModalOpen(false)}>닫기</button>
          </div>
        </div>
      )}
    </div>
  );
}

import { useBlocker, useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';

function PaymentPage() {
  const [paymentStatus, setPaymentStatus] = useState('preparing'); // preparing, processing, completed, failed
  const navigate = useNavigate();

  // 결제 중일 때만 내비게이션 차단
  const blocker = useBlocker(({ historyAction }) => {
    return paymentStatus === 'processing' && historyAction === 'POP';
  });

  // 결제 중 뒤로 가기 처리
  useEffect(() => {
    if (blocker.state === 'blocked') {
      alert('결제가 진행 중입니다. 페이지를 떠날 수 없습니다.');
      blocker.reset();
    }
  }, [blocker]);

  const startPayment = () => {
    setPaymentStatus('processing');

    // 결제 프로세스 시뮬레이션
    setTimeout(() => {
      setPaymentStatus('completed');
      // 결제 완료 후 자동으로 결과 페이지로 이동
      navigate('/payment-success');
    }, 3000);
  };

  return (
    <div>
      <h1>결제 페이지</h1>
      {paymentStatus === 'preparing' && (
        <button onClick={startPayment}>결제 시작</button>
      )}

      {paymentStatus === 'processing' && (
        <div>
          <p>결제가 진행 중입니다. 잠시만 기다려주세요...</p>
          <div className="loading-spinner"></div>
        </div>
      )}
    </div>
  );
}