BackHandler 에 대한 정리 # 유저가 Back 버튼 누를 때 Jetpack Compose

오늘은 Jetpack Compose 에서 유저가 백버튼을 누를 때, 

구현해야 하는 코드를 넣는 부분인 BackHandler 에 대해서 정리해 보겠습니다.

 

1. BackHandler

BackHandler는 Compose의 탑레벨 Composable 함수인데요.

유저가 시스템의 back button을 눌렀을 때,

이벤트를 핸들링 할 수 있는 곳 입니다.

 

 

코드로 보도록 하겠습니다.

보다시피 람다블록에 코드만 넣어주기만 하면 되기 때문에 정말 쉬워보입니다.

 

@Composable
fun MyScreen() {
    BackHandler(onBack = {
        println("Back button pressed")
    })
}

 

 

2. BackButton 라우트 처리

BackHandler 처리시 주의할 점이 있는데요.

여기에서 route 관련 처리를 해주지 않는다면 뒤로가기가 동작하지 않게 된다는 점 입니다.

 

라우팅을 직접할수도 있구요.

아니면, 디폴트 back버튼 행동을 실행시키기 위해서,

navigateUp() 함수를 실행시킬 수도 있습니다.

 

어느 경우라도, navController 는 필요한데요.

그래서 아래와 같이, navController 를 인자로 전달받은 다음 실행하도록 해 주어야합니다.

여기서는 navigateUp 함수를 실행시켜서, 뒤로가기가 실행되도록 하였습니다.

 

@Composable
fun MyApp(navController: NavHostController) {
    MyScreen(onBackButtonPressed = {
        println("Back button pressed")
        navController.navigateUp()
    })
}

 

 

위와 같이 구현해 주면 되는데요.

또 다른 구현 방법으로,

아래와 같이 람다식을 인자로 전달해서,

해당 Composable이 실행될 때,

실행코드를 전달받아 아래와 같이 해주는 방법을 사용할 수도 있습니다.

 

라우팅을 해서 Composable 을 실행할 때는 navigationController를 가지고 있기 때문입니다.

참고로, navigateUp() 함수는 결과를 Boolean 값으로 전달해주기 때문에, return 타입은 Boolean 이어야 합니다.

 

@Composable
fun MyScreen(onBackButtonPressed: () -> Boolean) {
    BackHandler(onBack = {
        println("Back button pressed")
        onBackButtonPressed()
        
    })
}