{"id":45744,"date":"2021-11-22T19:53:45","date_gmt":"2021-11-22T10:53:45","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45744"},"modified":"2021-11-22T19:53:47","modified_gmt":"2021-11-22T10:53:47","slug":"jetpack-compose-navigation-%ec%9d%b8%ec%9e%90-%ec%a0%84%eb%8b%ac%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45744","title":{"rendered":"Jetpack Compose Navigation – \uc778\uc790 \uc804\ub2ec\ud558\uae30"},"content":{"rendered":"\n

Rally\uc5d0 \uba87 \uac00\uc9c0 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \ucd94\uac00\ud574 \ubcf4\uc790. Row(\ud589)\uc744 \ud074\ub9ad\ud558\uba74 \uac1c\ubcc4 \uacc4\uc88c\uc758 \uc138\ubd80 \uc815\ubcf4\ub97c \ud45c\uc2dc\ud558\ub294 Account \ud654\uba74\uc744 \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\n

Navigation \uc778\uc790\ub294 \uacbd\ub85c\ub97c \ub3d9\uc801\uc73c\ub85c \ub9cc\ub4e0\ub2e4. \ub124\ube44\uac8c\uc774\uc158 \uc778\uc790\ub294 \ud558\ub098 \uc774\uc0c1\uc758 \uc778\uc790\ub97c \uacbd\ub85c\uc5d0 \uc804\ub2ec\ud558\uace0, \uc778\uc790 \ud0c0\uc785 \ub610\ub294 \uae30\ubcf8\uac12\uc744 \uc870\uc815\ud558\uc5ec \uacbd\ub85c \uc774\ub3d9 \ub3d9\uc791\uc744 \ub3d9\uc801\uc73c\ub85c \ub9cc\ub4dc\ub294 \ub9e4\uc6b0 \uac15\ub825\ud55c \ub3c4\uad6c\ub2e4.<\/p>\n\n\n\n

Note<\/strong>: \uba85\uba85\ub41c \uc778\uc790\ub294 {argument}\uc640 \uac19\uc774 \uc911\uad04\ud638\ub85c \ubb36\uc5ec \uacbd\ub85c \ub0b4\ubd80\uc5d0 \uc81c\uacf5\ub41c\ub2e4. \ubcc0\uc218 \uc774\ub984\uc744 \uc774\uc2a4\ucf00\uc774\ud551\ud558\uae30 \uc704\ud574 \ub2ec\ub7ec($)\uae30\ud638 \ub97c \uc0ac\uc6a9\ud558\ub294 Kotlin\uc758 \ubb38\uc790\uc5f4 \ud15c\ud50c\ub9bf \uad6c\ubb38\uacfc \uc720\uc0ac\ud558\ub2e4.<\/p><\/blockquote>\n\n\n\n

RallyActivity\uc5d0\uc11c Accounts\/{name} \uc778\uc790\ub97c \uc0ac\uc6a9\ud558\uc5ec \uae30\uc874 NavHost\uc5d0 \uc0c8 \ucef4\ud3ec\uc800\ube14\uc744 \ucd94\uac00\ud558\uace0, \uadf8\ub798\ud504\uc5d0 \uc0c8 \ubaa9\uc801\uc9c0(destination)\ub97c \ucd94\uac00\ud55c\ub2e4. \uc774 \ubaa9\uc801\uc9c0\uc5d0 \ub300\ud574 navArguments \ubaa9\ub85d\ub3c4 \uc9c0\uc815\ud55c\ub2e4. String \ud0c0\uc785\uc758 “name”\uc774\ub77c\ub294 \ub2e8\uc77c \uc778\uc790\ub97c \uc815\uc758\ud558\uc790.<\/p>\n\n\n\n

val accountsName = RallyScreen.Accounts.name

composable(
    route = \"$accountsName\/{name}\",
    arguments = listOf(
        navArgument(\"name\") {
            \/\/ Make argument type safe
            type = NavType.StringType
        }
    )
) { 
    \/\/ TODO
}<\/code><\/pre>\n\n\n\n
\uac01 \ucef4\ud3ec\uc800\ube14\uc758 body\ub294 \ud604\uc7ac \ubaa9\uc801\uc9c0\uc758 \uacbd\ub85c\uc640 \uc778\uc790\ub97c \ubaa8\ub378\ub9c1\ud558\ub294 \ud604 NavBackStackEntry\uc758 \ub9e4\uac1c\ubcc0\uc218(\uc9c0\uae08\uae4c\uc9c0 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c)\ub97c \uc218\uc2e0\ud55c\ub2e4. arguments\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc778\uc790\ub97c \uac00\uc838\uc62c \uc218 \uc788\ub2e4. \uc608\ub4e4 \ub4e4\uc5b4, \uc120\ud0dd\ud55c \uacc4\uc88c\uc758 \uc774\ub984\uc744 UserData\uc5d0\uc11c \ucc3e\uc544 SingleAccountBody \ucef4\ud3ec\uc800\ube14\ub85c \uc804\ub2ec\ud558\uc790.<\/p>\n\n\n\n
\uc778\uc790\uac00 \uc81c\uacf5\ub418\uc9c0 \uc54a\uc740 \uacbd\uc6b0 \uc0ac\uc6a9\ud560 \uae30\ubcf8\uac12\uc744 \uc81c\uacf5\ud560 \uc218\ub3c4 \uc788\ub2e4. \uc5ec\uae30\uc11c\ub294 \ud544\uc694\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uc0dd\ub7b5\ud55c\ub2e4.<\/p>\n\n\n\n
\ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
val accountsName = RallyScreen.Accounts.name\nNavHost(...) {\n\u00a0 \u00a0 ...\n\u00a0 \u00a0 composable(\n\u00a0 \u00a0 \u00a0 \u00a0 \"$accountsName\/{name}\",\n\u00a0 \u00a0 \u00a0 \u00a0 arguments = listOf(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 navArgument(\"name\") {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Make argument type safe\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type = NavType.StringType\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 )\n\u00a0 \u00a0 ) { entry -> \/\/ NavBackStackEntry\uc758 \uc778\uc790\ub4e4\uc911 \"name\"\uc744 \uac80\uc0c9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 val accountName = entry.arguments?.getString(\"name\")\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ UserData\uc5d0\uc11c \uc77c\uce58\ud558\ub294 \uccab\ubc88\uc9f8 \uc774\ub984\uc744 \ucc3e\ub294\ub2e4. \n\u00a0 \u00a0 \u00a0 \u00a0 val account = UserData.getAccount(accountName)\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uacc4\uc88c\ub97c SingleAccountBody\ub85c \uc804\ub2ec\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 SingleAccountBody(account = account)\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n
SingleAccountsBody\ub85c \uc774\ub3d9\ud558\uae30<\/h2>\n\n\n\n
\uc774\uc81c \ucef4\ud3ec\uc800\ube14\uc774 \uc778\uc9c0\ub85c \uc124\uc815\ub418\uc5c8\uc73c\ubbc0\ub85c, \ub2e4\uc74c\uacfc \uac19\uc774 navController\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucef4\ud3ec\uc800\ube14\ub85c \uc774\ub3d9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
navController.navigate(\"${RallyScreen.Accounts.name}\/$accountName\")<\/code>.<\/p>\n\n\n\n
\uc774 \ud568\uc218\ub97c NavHost\uc5d0\uc11c OverviewBody\uc758 onAccountClick \ub9e4\uac1c\ubcc0\uc218\uc640 AccountsBody\uc758 onAccountClick\uc5d0 \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
\uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \uc0c1\ud0dc\ub85c \uc720\uc9c0\ud558\ub824\uba74, \uc544\ub798\uc640 \uac19\uc774 navigateToSingleAccount \ud568\uc218\uc640 \uac19\uc740 \ud5ec\ud37c \ud568\uc218\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
fun RallyNavHost(
    ...
) {
    NavHost(
        ...
    ) {
        composable(Overview.name) {
            OverviewBody(
                ...
                onAccountClick = { name ->
                    navigateToSingleAccount(navController, name)
                },
            )
        }
        composable(Accounts.name) {
            AccountsBody(accounts = UserData.accounts) { name ->
                navigateToSingleAccount(
                    navController = navController,
                    accountName = name
                )
            }
        }
        ...
    }
}

private fun navigateToSingleAccount(
    navController: NavHostController,
    accountName: String
) {
    navController.navigate(\"${Accounts.name}\/$accountName\")
}<\/code><\/pre>\n\n\n\n
\uc774\uc81c \uc571\uc744 \uc2e4\ud589\ud558\uba74, \uac01 \uacc4\uc88c\ub97c \ud074\ub9ad\ud560 \uc218 \uc788\uace0 \uc8fc\uc5b4\uc9c4 \uacc4\uc88c\uc5d0 \ub300\ud55c \ub370\uc774\ud130\ub97c \ud45c\uc2dc\ud558\ub294 \ud654\uba74\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
Rally\uc5d0 \uba87 \uac00\uc9c0 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \ucd94\uac00\ud574 \ubcf4\uc790. Row(\ud589)\uc744 \ud074\ub9ad\ud558\uba74 \uac1c\ubcc4 \uacc4\uc88c\uc758 \uc138\ubd80 \uc815\ubcf4\ub97c \ud45c\uc2dc\ud558\ub294 Account \ud654\uba74\uc744 \ucd94\uac00\ud558\uc790. Navigation \uc778\uc790\ub294 \uacbd\ub85c\ub97c \ub3d9\uc801\uc73c\ub85c \ub9cc\ub4e0\ub2e4. \ub124\ube44\uac8c\uc774\uc158 \uc778\uc790\ub294 \ud558\ub098 \uc774\uc0c1\uc758 \uc778\uc790\ub97c \uacbd\ub85c\uc5d0 \uc804\ub2ec\ud558\uace0, \uc778\uc790 \ud0c0\uc785 \ub610\ub294 \uae30\ubcf8\uac12\uc744 \uc870\uc815\ud558\uc5ec \uacbd\ub85c \uc774\ub3d9 \ub3d9\uc791\uc744 \ub3d9\uc801\uc73c\ub85c \ub9cc\ub4dc\ub294 \ub9e4\uc6b0 \uac15\ub825\ud55c \ub3c4\uad6c\ub2e4. Note: \uba85\uba85\ub41c \uc778\uc790\ub294 {argument}\uc640 \uac19\uc774 \uc911\uad04\ud638\ub85c \ubb36\uc5ec \uacbd\ub85c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45744"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45744"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45744\/revisions"}],"predecessor-version":[{"id":45746,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45744\/revisions\/45746"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}