[Android, Kotlin] compose navigation에서 data class tpye 넘기기

compose에서 navigation을 사용할 때, 화면 전환 시 변환될 화면에 기존의 화면의 데이터를 이용하고 싶은 경우가 있을 것이다.

그럴 때에는 Navcontroller.navigate()에다가 넘길 데이터를 param으로 넣은 다음에 NavHost에서 composable()로 navigate logic을 작성하면 됐었다.

 

navigation 중 데이터 전달에 관한 자세한 설명은 아래 포스팅을 참고하면 좋을 듯하다.

https://rkdrkd-history.tistory.com/51

[Android, Kotlin] Compose UI 정리(7)

하지만 지난 포스팅에서 설명한 것은 기본 자료형인 경우(string, int 등등...)의 argument를 전달하는 방법만 알아봤었다.

이번에 토이 프로젝트를 하면서 data class type으로 데이터를 넘겨야 하는 경우가 생겨서 나중에도 까먹지 않게 포스팅을 작성해 보았다.

 

잡담은 여기까지 하고 바로 방법에 대해 알아보자

---

1. naivgate 연결하기

일단 먼저 데이터를 보낼 screen과 받을 screen 간의 navigation을 연결해 줘야 한다.

데이터를 받을 screen을 만들어 보자

@Composable
fun ProfileScreen(
	navigateToMain: () -> Unit
) {
	. . .
}

나중에 profileScreen의 parameter에 받아온 데이터를 받아올 예정이다.

 

그다음 profileScreen의 route를 생성하고, navigate 로직을 생성한다.

const val profileRoute = "profile"

fun NavController.navigateToProfile() {
    this.navigate(profileRoute)
}

 

다음으로 NavHost에 profileScreen을 추가해 주면 profileScreen에서 할 작업은 끝난다.

fun NavGraphBuilder.profileScreen(
    navigateToMain: () -> Unit
) {
    composable(profileRoute) {
        ProfileScreen(navigateToMain = navigateToMain)
    }
}

 

navigateToMain은 main과 profile screen 간의 화면 전환을 위해 추가해 놓았다.

 

이제 mainScreen에서 해야 할 작업으로 넘어가 보자.

profileScreen에서 작업한 것처럼 똑같이 해주면 서로 navigate 하는 화면을 볼 수 있을 것이다.

코드를 뺀 것은 절대 귀찮아서가 아니다!

 

2. 데이터 넘기는 로직 생성하기

main screen에 navigateProfile param을 생성하고 데이터를 생성해 주고 card의 onclick에 navigateToProfile에 연결해 준다.

데이터 생성은 임시로 만들어도, api를 호출하고 response 값으로 해줘도 상관없다. 물론 card도 꼭 card가 아니어도 된다!!(clickable 한 모든 compos function에서 가능하다.)

@Composable
fun MainScreen(
	navigateToProfile: (teamData: UserDomain, userData: UserDataDomain) -> Unit
) {
	// set send data
	Card(onClick = navigateToProfile(teamData, userData)) {
    
    }
}

 

다음으로 이전에 생성한 navigateToProfile로 이동해 mainscreen에서 추가한 navigateToProfile()로 이동해 parameter를 추가하고 route를 수정해 주도록 하겠다.

route는 받은 paramter들 모두 넣어줘야 한다. 예를 들어 dataClass.data 이런 형식으로 넣으면 오류가 나니까 참고하도록 하자.

fun NavController.navigateToProfile(teamDataJson: String, userDataJson: String) {
    this.navigate("$profileRoute/$teamDataJson/$userDataJson")
}

위의 코드에서 이상한 점이 있을 것이다.

바로 navigateToProfile이 string이라는 점인데 다음 코드에서 왜 그런지 이유를 알려주겠다.

 

NavHost에 mainScreen을 추가한 부분으로 이동한다.

NavHost(
    navController = navHostController,
    startDestination = BottomNavItem.Main.route
) {
    mainScreen(
        navigateToProfile = { teamData, userData ->
            val teamJson = Uri.encode(Gson().toJson(teamData))
            val userJson = Uri.encode(Gson().toJson(userData))
            navHostController.navigateToProfile(teamJson, userJson)
        }
    )
}

이제야 말하는 거지만 필자는 전달할 data class를 json string으로 변환하고 전달된 데이터를 받을 때, json string을 data class로 변환하는 방법을 사용할 것이다.

그래서 navigateToProfile에서 string을 param으로 받은 것이다.

그리고 굳이 json string으로 바꾼 이유는 필자는 data class 중 url을 받는 data가 있었는데 윗글에서 말한 것처럼 route를 바꿀 때, 받은 param 통째로 넣어줘야 하는데 url은 route로 변환하는 과정에서 encoading 관련으로 문제가 발생했었다.(그 오류 때문에 4시간을 날렸다 ㅠ) 그래서 json string으로 하는 아이디어를 생각하게 되었다. string은 변하지 않기 때문이다!

 

설명이 길었다. 다시 코드로 돌아가자

전달받은 data를 써먹기 위해 navHost에 추가한 profileScreen으로 이동하자.

fun NavGraphBuilder.profileScreen(navigateToStella: () -> Unit) {
    composable(
        route = "$profileRoute/{teamData}/{userData}",
        arguments = listOf(
            navArgument("teamData") { type = NavType.StringType },
            navArgument("userData") { type = NavType.StringType }
        )
    ) { navBackStackEntry ->
        val teamDataJson = navBackStackEntry.arguments?.getString("teamData")
        val teamData = Gson().fromJson(teamDataJson, UserDomain::class.java)

        val userDataJson = navBackStackEntry.arguments?.getString("userData")
        val userData = Gson().fromJson(userDataJson, UserDataDomain::class.java)

        ProfileScreen(
            teamData = teamData,
            userData = userData,
            navigateToStella = navigateToStella
        )
    }
}

route에는 navigateToProfile에서 수정했던 route 형식을 그래도 써준다.

arguments에는 route에 지정한 name을 list로 받아 stringType로 적용해 준다.

그 이후 composable의 navBackStackEntry를 이용해 지정한 name들을 불러와 다시 data class type으로 변환해 주었다.

그리고 profileScreen에 param으로 넣어 주면 작업 완료이다.

 

 

정리

---

예전에 잠깐 배워본 지식을 검색하면서 다시 공부해 보았는데, 예전 기억이 상기되어서 공부하기 편했었다.

오류 나기 전에 이 생각을 먼저 했으면 하는 후회도 들었던 것 같다.

규모가 큰 프로젝트에서는 data class를 넘겨야 하는 경우가 허다할 것 같은데 그 사람들에서 이 포스팅이 도움이 되었으면 좋겠다.

 

질문 환영합니다.

코드가 잘못되었거나 더 효율이 좋은 코드를 알고 계신 분들은 댓글 남겨주시면 감사하겠습니다.