[RN] react-native 안드로이드 뒤로가기 버튼 방지 : BackHandler

해당 글에서는 React-native 개발 환경 중 안드로이드 디바이스에 대해 뒤로 가기 버튼에 대해서 방지하는 방법에 대해 공유합니다.

1) BackHandler

---

💡 BackHandler

- Android 기기의 하드웨어 백 버튼을 처리하는 인터페이스를 제공하는 모듈입니다. 이 모듈을 사용하면 백 버튼 누름 이벤트를 감지하고 버튼이 눌렸을 때 사용자 정의 로직을 구현할 수 있습니다.

- react-native 설치 시 해당 모듈이 포함되어 있습니다.

 

💡 [참고] 해당 디바이스 화면에서 뒤로가기 버튼을 의미합니다.

 
 

2) BackHandler 활용

---

 

1. 라이브러리 가져오기

---

 

import { BackHandler } from 'react-native';

 
 
 

2. 이벤트 리스너 등록

---

💡 화면이 렌더링 된 이후 useEffect() 내에서 이벤트 리스너를 등록합니다.

import { useEffect, useInsertionEffect } from "react";
import { BackHandler, View } from "react-native";

const TestScreen = () => {

    useEffect(() => {

        BackHandler.addEventListener('hardwareBackPress', () => {
            // 백 버튼 누름을 처리하는 사용자 정의 로직
            // 기본 동작(예: 앱 종료)을 방지하려면 true를 반환
            // 기본 동작을 허용하려면 false를 반환
            return true;
        });

    }, []);

    return (
        <View>
            <Text>테스트 화면입니다.</Text>
        </View >

    )

}
export default TestScreen;

 
 
 
 

3. 이벤트 리스너 제거

---

💡 메모리 누수를 방지하기 위해 등록한 이벤트 리스너를 제거하는 단계입니다.

import { useEffect, useInsertionEffect } from "react";
import { BackHandler, Text, View } from "react-native";

const TestScreen = () => {

    useEffect(() => {

        BackHandler.addEventListener('hardwareBackPress', () => {
            // 백 버튼 누름을 처리하는 사용자 정의 로직
            // 기본 동작(예: 앱 종료)을 방지하려면 true를 반환
            // 기본 동작을 허용하려면 false를 반환
            return true;
        });
        return () => {
              // 이벤트 리스너 제거됨
            BackHandler.removeEventListener('hardwareBackPress', () => true);
        }

    }, []);

    return (
        <View>
            <Text>테스트 화면입니다.</Text>
        </View >

    )

}
export default TestScreen;

 
 
 

3) 공통 기능으로 구현하기

---

💡 [기능 설명]

- 공통 Util로 분리하여서 각각 뒤로가기 버튼을 방지해야 하는 페이지에 응용하면 도움이 될 것 같습니다.


1. useEffect()

- 화면이 렌더링된 이후 시점에 onPressBackBtn 함수를 호출합니다.
- true 인 경우 뒤로 가기 버튼을 방지합니다
- false 인 경우 뒤로 가기 버튼을 허용하여 뒤로 가기를 수행합니다.


2. onPressBackBtn()backAction() 함수를 구성합니다.

- true : 응답 값을 true로 반환합니다.
- false: 페이지를 이전 페이지로 이동시킵니다.


3. BackHandler.addEventListener()
- 뒤로가기 버튼 액션에 대해 이벤트 리스너를 등록합니다.
- 등록과 동시에 뒤로 가기 버튼을 누르면 onPressBackBtn() 함수를 호출합니다.


4. BackHandler.removeEventListener()

- 뒤로가기 버튼 액션 처리에 대해 이벤트 리스너를 제거합니다.

import { useNavigation } from "@react-navigation/native";
import { useEffect, useInsertionEffect } from "react";
import { BackHandler, View } from "react-native";

const TestScreen = () => {

    const navigation = useNavigation();

    useEffect(() => {

        onPressBackBtn(true);       // 뒤로가기 버튼을 방지합니다.
        // or
        onPressBackBtn(false);      // 뒤로가기 버튼 클릭 시 goBack() 함수로 이전 페이지로 이동합니다. 

    }, []);

    /**
     * 뒤로가기 버튼을 눌렀을때 처리되는 함수 
     * @param {boolean} action : true 일 경우 
     * @returns 
     */
    const onPressBackBtn = (action: boolean) => {

        const backAction = (): boolean => {
            // 파라미터가 true이면 뒤로가기 버튼을 방지합니다.
            if (action) {
                return action;
            }
            // 파라미터가 false이면 뒤로가기 버튼 시 실제 뒤로가기를 수행합니다. 
            else {
                navigation.goBack();
                return action;
            }
        }

        // BackHandler에 대해 이벤트 리스너를 등록합니다.
        BackHandler.addEventListener(
            'hardwareBackPress',
            backAction,
        );

        // BackHandler에 대해 이벤트 리스너를 제거합니다.
        return () => {
            BackHandler.removeEventListener('hardwareBackPress', backAction);
        }
    }

    return (
        <View>
            <Text>테스트 화면입니다.</Text>
        </View >

    )

}
export default TestScreen;

 
 
 
 
오늘도 감사합니다. 😀