[react-native] Android 뒤로가기 처리

안녕하세요. 김용성입니다.
여러분들은 어떤 핸드폰을 사용하고 계시나요? 저 같은 경우는 아이폰을 사용하고 있는데요. 그러다보니 종종 애플리케이션을 만들다가 실수로 안드로이드 유저들의 입장에서 생각해보지 않고 특정 UI를 추가하는 경우가 종종 있었어요. 이런 실수를 하지 않기 위해서는 다른 os 관점에서도 생각해보고 모든 것을 설계해야겠죠?
오늘 저는 android에서 애플리케이션을 구동시킬 때 뒤로가기 버튼을 어떻게 처리해야하는지에 대해 간단하게 포스팅하도록 하겠습니다.

Android 뒤로가기

아이폰의 경우에는 X시리즈 이후에 나온 노치 디자인 형태를 사용하는 유저들이 있고, 그 이전의 홈버튼이 존재하는 형태를 사용하는 분들로 나뉠거예요. ios에서 앱을 종료할 때 별도 처리를 해줄 필요가 없는 이유가 앱을 background로 넘기는 방법이 상당히 간단해요. 또한 뒤로가기 같은 경우에도 react-navigation 내부에 정의되어 있는 gestureEnabled 메소드를 사용하면 쉽게 구현할 수가 있어요.
그렇지만 안드로이드의 경우 메커니즘이 살짝 다른데요. 기본적인 navigation-stack이 우측에서 좌측으로 쌓이는 것이 아닌, 아래에서 위로 쌓이기 때문에 gesture이 아이폰처럼 매끄럽게 작용하지 못합니다.
그렇기 때문에 안드로이드 폰 유저들은 핸드폰 하단에 있는 뒤로가기 버튼을 주로 사용하여 앱화면을 뒤로 이동시키죠. 아래 gif를 보시면 제가 어떤 이야기를 하는지 아실 수 있을 겁니다.

안드로이드의 경우 앱을 뒤로가게 하기 위해서는 하단 좌측에 있는 뒤로가기 버튼을 사용하게 되는데요.
그렇다면 앱을 종료하고 싶을때는 어떻게 할까요? 가운데 버튼을 누르면 앱화면을 종료시킬 수 있어요. 그렇지만 안드로이드 유저들이 무의식 중에 그것보다 더 많이 사용하는 방법은 뒤로가기 버튼을 눌러 종료하는 방식입니다. 만약 우리가 이 뒤로가기 버튼에 별도의 이벤트를 걸어놓지 않고, 바로 종료되게끔 해놓았다면 유저들이 사용하다가 실수로 뒤로가기를 눌러 앱이 종료되는 불편함이 생기겠죠? 이러한 불편함을 없애기 위해 홈화면에서 뒤로가기 버튼을 누를 경우 '앱을 종료하시겠습니까?' 라는 toast 메시지를 보여주는 경우가 많습니다. 또한 이는 안드로이드 앱을 만들 때의 권장사항이기도 합니다. 이것을 적용하는 방법은 상당히 간단해요.

적용방법

방법은 정말 간단합니다. App의 최상단으로 가서 backhandler 이벤트를 걸어주면 되는데요.
react-navigation 공식문서에도 나와있습니다.

import React, { useEffect } from "react";
import { Text, View, StyleSheet, BackHandler, Alert } from "react-native";

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "앱을 종료하시겠습니까?", [
        {
          text: "취소",
          onPress: () => null,
        },
        { text: "확인", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

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

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

  return (
    <View style={styles.container}>
      <Text style={styles.text}>MY App</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    fontSize: 18,
    fontWeight: "bold"
  }
});

export default App;

이렇게 코드를 작성하면 됩니다. react-native에는 BackHandler라는 기능이 들어있는데요. 해당 기능을 사용해서 Alert 이벤트를 걸어주면 작동해요.
그렇지만 이 방식에는 문제가 있답니다. 바로 홈화면 혹은 제 1스택이 아닌 상태에서도 뒤로가기 버튼을 누를 시에 앱 종료 Alert가 작동한다는 점인데요!

이런식으로 말이죠.
이 부분을 쉽게 해결하기 위해서는 해당 Backevent를 App의 가장 최상단 Stack에만 적용해주면 됩니다.

마무리

간과할 수 있는 부분이지만 이런 디테일도 알아두시면 좋을 거라고 생각합니다.
읽어주셔서 감사합니다 :)