React Native Android 하드웨어 뒤로가기 제어

거의 10년 이상을 IOS 유저로 살아온 나는 android의 뒤로가기 버튼(하드웨어)을 그렇게 사람들이 많이 사용하는지 몰랐다. 하지만 이번 프로젝트를 진행하면서 android 의 뒤로가기 버튼을 신경쓰지 않고 프로젝트 로직 플로우를 구현했고 실제 테스트를 하면서 대부분의 android 유저들이 화면 자체(어플)의 뒤로가기 보다 습관적으로 하드웨어적 뒤로가기 버튼을 클릭한다는 사실을 알게 되었고 이 부분들이 QA 리스트로 들어오게 되었다.

원래 프로젝트 화면에서 어플상의 뒤로가기를 누르면 안내 모달이 뜨고 다시 확인을 눌렀을 때만 실제로 뒤로 가는 로직을 구현해 두었고 이 부분에서 문제가 되었다.

...
import { BackHandler } from 'react-native';
...
 useEffect(() => {
    const backAction = () => {
      setBackModal(true);
      return true;
    };
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );

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

해당 로직을 화면(어플)의 뒤로가기 로직에 setBackModal(true) 해당 부분이 있었고 react-native 자체 함수인 BackHandler 로 같은 로직이 구현되게 만들어 두었다.

만약 뒤로가기 터치시 아무 동작도 일어나지 않게 하려면

...
import { BackHandler } from 'react-native';
...
 useEffect(() => {
    const backAction = () => {
      return true;
    };
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );

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

이렇게 해주면 된다!