Compose에서 네비게이션을 통한 데이터 전달 및 savedStateHandle 활용

프로젝트 구축하는 과정에서 문제가 하나 발생했다.

 

✅ 문제 상황

• AScreen에서 BScreen으로 화면 이동 후 BScreen에서 선택한 값을 AScreen으로 돌려주기
• 이 때, ViewModel을 통해 돌려주면 viewModel이 초기화 되는 이슈 발생

✅ 해결 방법

• NavController의 savedStateHandle을 이용하여 화면 간 데이터 전달

ViewModel을 통해 데이터를 전달할 때, 전달된 데이터가 초기화 되는 현상이 발생했다.

당연하다. ViewModel을 새로 만드는 멍청한 짓을 했으니까 ㅋ

 

그래서 찾아낸 다른 방법! NavController 이용하기~

화면을 이동할 때 사용하는 Navigation Component는 데이터를 전달하는 savedStateHandle을 지원한다.

이걸 활용하면 데이터를 쉽게 전달하고, 화면을 이동하거나 돌아왔을 때도 데이터를 유지할 수 있다.

 

1. savedStateHandle이란?

• Jetpack Navigation에서 화면 간 데이터를 주고받을 때 사용하는 ViewModel 내 key-value 저장소
• 기본적으로 Bundle처럼 동작하지만, 화면이 회전되거나 프로세스가 종료되더라도 데이터는 유지됨

2. Navigation을 통한 데이터 전달하기

2-1) 데이터 전달하기 (BScreen → AScreen)

• 선택한 데이터(data)를 savedStateHandle을 통해 저장 후 popBackStack()으로 화면 전환

navController.previousBackStackEntry
    ?.savedStateHandle
    ?.set("data", data) // 데이터 전달 (key-value)
    ?.set("code", code) // 데이터 전달 (key-value)

navController.popBackStack()

2-2) AScreen에서 데이터 가져오기

• savedStateHandle.get<String>(”data”)로 데이터를 가져와서 유지

val backStackEntry = navController.currentBackStackEntryAsState()
val selectedCountry = backStackEntry.value
    ?.savedStateHandle
    ?.get<String>("data") // 저장된 값 가져오기

 

이렇게 이용하면 Compose에서 화면간 데이터를 쉽게 전달하고 받아와 사용할 수 있다.