안드로이드 백버튼

리액트 네이티브에서 안드로이드 백 버튼 처리는 네이티브 앱에서 중요한 사용자 경험 중 하나입니다. 안드로이드 기기에서는 기본적으로 뒤로가기 버튼을 누르면 이전 화면으로 이동하거나 앱을 종료합니다. 하지만, React Native에서는 이 버튼을 커스터마이즈하여 앱의 특정 로직을 실행하거나 기본 동작을 무시할 수 있습니다.

mobile에서 백버튼 처리

// class-mobile/apis 폴더 내에 파일을 만들어 작성해주세요.
import { useEffect } from "react";
import { BackHandler } from "react-native";

export const useDeviceRouting = (onResponse) => {
  useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", () => {
      onResponse({ back: true }); // 웹에 뒤로가기 눌렸다고 알려주기
      return true; // 안드로이드 백버튼 기본기능 무시하기
    });
  }, []);

  return {
    // 리턴하지 않고, 백버튼 감지 대기만 하면 됨
  };
};

1. React Native의 BackHandler
   • BackHandler는 React Native에서 안드로이드의 하드웨어 백 버튼 이벤트를 감지하고 처리할 수 있도록 제공합니다.
   • addEventListener("hardwareBackPress", callback)를 사용하여 백 버튼이 눌렸을 때의 동작을 정의할 수 있습니다.
2. 백 버튼 동작 커스터마이즈
   • return true를 하면 안드로이드의 기본 동작(이전 화면으로 이동)을 무시할 수 있습니다.
   • 이 코드는 onResponse({ back: true })를 호출해 앱 내에서 웹에 뒤로가기가 눌렸다고 알려주게 됩니다.

Next.js와 연동

React Native 앱에서 웹뷰를 사용해 Next.js와 통신하려면, 네이티브에서 발생한 이벤트를 웹으로 전달하고, 이를 처리하는 로직을 추가해야 합니다.

"use client";

import { useRouter } from "next/navigation";
import { useEffect } from "react";

export const FETCH_DEVICE_KEY: any = {
  // fetchDeviceSystemForAppSet: resolve
  // ...
  // ...
};

export default function DeviceSettingRedirectAndBack({ children }) {
  const router = useRouter();

  useEffect(() => {
    // 1. 안드로이드에서 수신 대기
    document.addEventListener("message", (message: any) => {
      if (!message.data) return;
      const response = JSON.parse(message.data);
      **if (response.redirect) return router.push(response.redirect);
      if (response.back) return router.back();**

      const query = Object.keys(response)[0];
      const resolve = FETCH_DEVICE_KEY[query];
      resolve({ data: response });
      delete FETCH_DEVICE_KEY[query];
    });

    // 2. IOS에서 수신 대기
    window.addEventListener("message", (message: any) => {
      if (!message.data) return;
      const response = JSON.parse(message.data);
      **if (response.redirect) return router.push(response.redirect);
      if (response.back) return router.back();**

      const query = Object.keys(response)[0];
      const resolve = FETCH_DEVICE_KEY[query];
      resolve({ data: response });
      delete FETCH_DEVICE_KEY[query];
    });
  }, []);

  return <>{children}</>;
}

위 처럼 이전까지 우리가 작성한 settings 파일에 아래 코드를 안드로이드와 IOS 각각 코드를 추가해줍니다.

**if (response.redirect) return router.push(response.redirect);
if (response.back) return router.back();**