해당 글에서는 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;
