[React Native] BackHandler, 뒤로가기 시 앱 종료 여부 묻기

안드로이드에는 하드웨어에 홈, 뒤로가기 버튼이 존재하거나 설정으로 변경하면 뒤로가기 버튼이 포함된 소프트 키를 사용할 수 있습니다.

앱을 제작하던 중 메인 화면에서 뒤로 가기 버튼을 누르면 즉시 앱이 종료되어 사용자가 불편함을 느낄 것같다고 생각하였습니다.

타 회사 어플들은 어떻게 동작하는지 확인해보니 Toast 팝업으로 종료 하시겠습니까? 하고 한 번 더 여부를 확인하는 것을 보고 적용해보면 좋겠다고 생각했습니다.

import { BackHandler } from 'react-native';

...

useEffect(()=>{
  const backAction = () => {
    // 작업을 수행한 후에는 true 또는 false를 반환합니다.
    // true를 반환하면 기본적인 뒤로 가기 동작을 막습니다.
    // false를 반환하면 기본 동작인 앱을 종료하지 않고 뒤로 갑니다.
    return true;
  };

  // 리스너 등록
  const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);

  return () => {
    // 이벤트 리스너 해제
    backHandler.remove();
  }
},[])

💡 BackHandler.addEventListener
: 뒤로가기 이벤트 리스너를 등록할 수 있습니다. 뒤로가기 버튼을 동작할 때마다 호출됩니다.

💡 BackHandler.exitApp
: 메서드 호출 시 앱이 종료됩니다.

  const navigation = useNavigation();

  useEffect(() => {
    let lastBackPressed = 0;

    const backAction = () => {
      const now = new Date().getTime();

      if (navigation.isFocused()) {
        if (now - lastBackPressed < 2000) {
          BackHandler.exitApp();
          return true;
        }

        lastBackPressed = now;
        ToastAndroid.show(
          '한 번 더 누르면 앱이 종료됩니다.',
          ToastAndroid.SHORT,
        );
        return true;
      }

      return false;
    };

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );

    return () => backHandler.remove();
  }, []);

로직은 굉장히 간단합니다.
navigation은 스크린이 이동하는 게 아닌 스택에 push하고 pop을 하는 구조입니다.
때문에 isFocused로 본인이 원하는 스크린에서만 backAction 함수가 동작하도록 구현해야합니다. (안그럼 모든 화면에서 나옴)

본인이 원하는 스크린에서 하드웨어 버튼 또는 소프트 키의 뒤로가기 버튼을 클릭했다면 backAction 함수가 동작합니다.

현재 시간과 마지막으로 누른 시간의 차가 2초(2000ms)보다 작다면 exitApp으로 앱을 종료시키도록 구현하였습니다.

BackHandler에 대해 더욱 궁금하신 분들은 공식문서를 참고하셔도 좋을 것 같습니다.

⚙️ BackHandler?

https://reactnative.dev/docs/backhandler