[Android, Kotlin] 새로워진 Navigation Compose의 safe args 적용하기

출처: unsplash.com

 

 

서론

이번에 compose 프로젝트를 진행하면서 화면 이동 시 인자를 전달하는 safe args를 다시 사용하게 되었는데, safe args가 이번 compose 최신 업데이트로 더 편리하게 구현할 수 있도록 변경된 것 같아서 이번 기회에 어떻게 구현하는지 정리해 보려 한다.

 

Navigation 2.8.0의 safe args 변경 사항

이번에 Navigation의 버전이 2.8.0-alpha08 버전으로 업그레이드되면서 kotlin의 Serializable을 통해 인자를 넘길 수 있게 변경되었다.

 

Serializable을 통해 data class로 화면을 정의하고 data class의 필드로 값을 전달할 수 있다.

그러면 바로 어떻게 구현하는지 알아보자.

 

Serializable, Navigation 추가

libs.versions.toml에 추가 후 gradle 파일에 적용하자(2025.01.23 기준 최신 navigation 라이브러리 버전: 2.8.5)

kotlin = "2.0.21"
navigationCompose = "2.8.5"

[libraries]
androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigationCompose" }

[plugins]
kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }

 

 

build.gradle.kts(project)

alias(libs.plugins.kotlin.serialization) apply false

 

 

build.gradle.kts(app)

plugins {
    alias(libs.plugins.kotlin.serialization)
}

dependencies {
    // navigation compose
    implementation(libs.androidx.navigation.compose)
    implementation(libs.kotlinx.serialization.json)
}

 

 

Navigation 구현

우선 화면을 먼저 생성한다.

화면들은 sealed class를 통해 정의했다.

sealed class Screen {
    @Serializable
    data object LoginScreen: Screen()

    @Serializable
    data object MainScreen: Screen()

    @Serializable
    data class ProfileScreen(val id: Int): Screen()
}

Serializable 어노테이션을 화면마다 필수적으로 달아줘야 한다.

 

다음으로 생성한 Screen을 통해 NavHost를 만들고 MainActivity에 적용한다.

@Composable
fun Navigation(modifier: Modifier = Modifier) {
    val navController = rememberNavController()

    NavHost(
        modifier = modifier,
        navController = navController,
        startDestination = Screen.LoginScreen
    ) {
        composable<Screen.LoginScreen> {
            LoginScreen(
                ...
            )
        }

        composable<Screen.MainScreen> {
            MainScreen(
                ...
            )
        }

        composable<Screen.ProfileScreen> { backStackEntry ->
            ProfileScreen(
                ...
            )
        }
    }
}

여기까지가 기본적인 Navigation 세팅 방법이다.

 

다른 Screen으로 인자 전달하기

이제 본격적으로 인자를 전달해 보겠다.

Screen 파일에서도 확인했다시피, ProfileScreen에 id라는 필드가 있다.

저 필드로 실제 ProfileScreen에서 id를 사용할 수 있게 된다.

 

MainScreen에서 ProfileScreen으로 id 인자를 전달하려고 할 때를 예로 들어서 구현했다.

MainScreen이 전달하는 쪽이고, ProfileScreen이 전달받은 인자를 받는 쪽이 된다.

 

다시 NavHost로 돌아와서, 전달하는 쪽에서는 이동시킬 Screen을 정의하게 되는데 이때 이동시킬 Screen은 data class 형태이어야 한다.

MainScreen(
    navigateToLogin = {
        navController.popBackStack()
    },
    navigateToProfile = {
        navController.navigate(Screen.ProfileScreen(it))
    }
)

 

navigateToProfile에서 Screen.ProfileScreen으로 navigate 하면서 인자를 전달해야 한다.

인자는 MainScreen에서 받아서 고차 함수로 전달해 주면 된다.

 

이제 받는 쪽에서는 받은 데이터를 사용해야 하기 때문에 자신의 Screen 정보를 타입으로 가지는 매개변수를 하나 추가해 주어야 한다.

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

 

 

그리고 NavHost 쪽에서는 받은 데이터를 args로 넘겨주는 작업을 진행하기 위해 다음과 같이 코드를 작성한다.

composable<Screen.ProfileScreen> { backStackEntry ->
    ProfileScreen(
        navigateToMain = {
            navController.popBackStack()
        },
        args = backStackEntry.toRoute<Screen.ProfileScreen>()
    )
}

 

 

이렇게 하면 구현이 끝난다. 훨씬 간단하지 않은가?

 

기존의 방식과 변경된 점 

기존의 방식은 문자열을 넘겨서 타입으로 변환하는 과정을 거쳤었다.

그리고 route로 문자열을 넘기는 대신에 data class를 이용해 serializable 객체를 넘긴다.

 

위 2가지만 봐도 코드의 양도 줄어들고 가독성이 향상된 것이 체감되었다.

 

새로워진 navigation compose safe args를 사용하면 화면끼리 공유되는 데이터 관리가 훨씬 수월해질 듯하다.