Jetpack Compose Navigation Argument 전달하기

개발자의 도구들·2024년 9월 17일

DEF

Navigation의 핵심 기능인 Argument 전달에 대해서 알아보자.

웹에서

웹에서 url을 통해 parameter를 넘기곤 하는데, 예를 들면 이런 식이다.

localhost:8080/board/id=1

이때 서버에서는 보통
@GetMapping("/board/{id}") // 이 부분 기억
fun getBoardById(@PathVariable id: Long) {

}

형태로 처리한다.

navigaion 기능도 어차피 route를 통해서 페이지에 접근하는 개념이라, 서버측과 유사하다. (아무래도 kotlin 이라 그런지 더 비슷한 느김)

Nav Graph 에서 보면 알듯이, 라우터 지정을 아래와 같이 수행한다.

@Composable
fun MovieNavigation() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = MovieScreen.HomeScreen.name
    ) {
        // Nav Graph의 Destination 지정 (routing)
        composable(
            MovieScreen.DetailsScreen.name + "/{movie}", // parameter 넘기는 부분
            argument = listOf( -
                navArgument("movie") { type = NavType.StringType }
            )
        ) {
            backStackEntry -> 
            DetaisScreen(
                navController = navController,
                movieName = backStackEntry.arguments?.getString("movie")
            )
        }
    }
}

클릭시 이동 method 수정

@Composable
fun MainContent(
    navController: NavController,
) {
    ---
    LazyColumn {
        Items(
            items = movieList
            
        ) {
            movieRow(movie = it) {movie ->
                navController.navigate(route = MovieScreens.DetailsScreen.name + "/$movie")
            }
        }
    }
}

@Composable
fun movieRow(movie: String, onItemClick: (String) -> Unit)/

navController.navigate 경로에 해당 변수를 추가해준다.

REF

자세한 코드 참고

MainContent

MovieNavigation

profile
Studying to be Web & App full stack developer

0개의 댓글