BackHandler

Backhandler API는 안드로이드 기기에서 뒤로 가기 버튼을 감지하고, 시스템의 뒤로 가기 동작에 대한 이벤트 리스너를 등록하며, 애플리케이션의 응답 방식을 제어할 수 있게 해준다. 이 API는 안드로이드 전용이다.

이벤트 구독은 역순으로 호출된다. 즉, 가장 마지막에 등록된 구독이 가장 먼저 호출된다.

• 하나의 구독이 true를 반환하면, 이전에 등록된 구독은 호출되지 않는다.
• 어떤 구독도 true를 반환하지 않거나 구독이 등록되지 않으면, 기본 뒤로 가기 버튼 기능을 프로그래밍 방식으로 호출해 앱을 종료한다.

모달 사용자 주의: 앱에서 Modal을 열어둔 상태라면, BackHandler는 이벤트를 발생시키지 않는다 (Modal 문서 참조).

패턴

tsx

BackHandler.addEventListener('hardwareBackPress', function () {
  /**
   * this.onMainScreen과 this.goBack은 예시일 뿐,
   * 여기서는 여러분의 구현 방식을 사용해야 한다.
   *
   * 일반적으로 네비게이터를 사용해 이전 상태로 돌아간다.
   */

  if (!this.onMainScreen()) {
    this.goBack();
    /**
     * true를 반환하면 이벤트가 상위로 전파되지 않고
     * 다른 뒤로가기 동작이 실행되지 않는다.
     */
    return true;
  }
  /**
   * false를 반환하면 이벤트가 상위로 전파되고, 다른 이벤트 리스너나
   * 시스템의 기본 뒤로가기 동작이 실행된다.
   */
  return false;
});

예제

다음 예제는 사용자가 앱을 종료하려고 할 때 확인하는 시나리오를 구현한다:

BackHandler.addEventListener는 이벤트 리스너를 생성하고 NativeEventSubscription 객체를 반환한다. 이 객체는 NativeEventSubscription.remove 메서드를 사용해 해제해야 한다.

React Navigation과 함께 사용하기

React Navigation을 사용해 여러 화면을 이동할 때, 커스텀 안드로이드 뒤로가기 버튼 동작에 관한 공식 가이드를 참고하면 된다.

Backhandler 훅

React Native Hooks는 이벤트 리스너를 설정하는 과정을 단순화해주는 유용한 useBackHandler 훅을 제공한다.

참고 자료

메서드

addEventListener()

tsx

static addEventListener(
  eventName: BackPressEventName,
  handler: () => boolean | null | undefined,
): NativeEventSubscription;

exitApp()

tsx

static exitApp();

removeEventListener()

tsx

static removeEventListener(
  eventName: BackPressEventName,
  handler: () => boolean | null | undefined,
);