![\"\"](\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-jetpack-compose-basics-state-hoisting-8c0da5d9a631ba97-576x1024.png\")
<\/figure>\n\n\n\nMainActivity.kt \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ucd94\uac00 \ud55c\ub2e4.<\/p>\n\n\n\n
@Composable\nfun OnboardingScreen() {\n \/\/ TODO: \uc774 state\ub294 hoisting \ub418\uc57c \ud55c\ub2e4.\n var shouldShowOnboarding by remember { mutableStateOf(true) }\n\n Surface {\n Column(\n modifier = Modifier.fillMaxSize(),\n verticalArrangement = Arrangement.Center,\n horizontalAlignment = Alignment.CenterHorizontally\n ) {\n Text(\"Welcome to the Basics Codelab!\")\n Button(\n modifier = Modifier.padding(vertical = 24.dp),\n onClick = { shouldShowOnboarding = false } \n ) {\n Text(\"Continue\")\n }\n }\n }\n}\n\n@Preview(showBackground = true, widthDp = 320, heightDp = 320)\n@Composable\nfun OnboardingPreview() {\n BasicsCodelabTheme {\n OnboardingScreen()\n }\n}\n<\/code><\/pre>\n\n\n\n\uc774 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uba87\uac00\uc9c0 \uc0c8\ub85c\uc6b4 \ub0b4\uc6a9\uc744 \ud3ec\ud568\ud55c\ub2e4.<\/p>\n\n\n\n
- OnboardingScreen\uc774\ub77c\ub294 \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc640 preview\ub97c \ucd94\uac00\ud588\ub2e4. \ud504\ub85c\uc81d\ud2b8\ub97c \ube4c\ub4dc\ud558\uba74 \ub3d9\uc2dc\uc5d0 \uc5ec\ub7ec preview\ub97c \uac00\uc9c8 \uc218 \uc788\ub2e4. \ucf58\ud150\uce20\uac00 \uc62c\ubc14\ub974\uac8c \uc815\ub82c\ub418\uc5c8\ub294\uc9c0 \ud655\uc778\ud558\uae30 \uc704\ud574 \uace0\uc815\uc801\uc778 \ub192\uc774\ub97c \ucd94\uac00\ud588\ub2e4.<\/li>
- Column\uc758 \uc124\uc815\uac12\uc740 \ud654\uba74 \uc911\uc559\uc5d0 \ucf58\ud150\uce20\ub97c \ubcf4\uc5ec\uc904 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ub41c\ub2e4.<\/li>
- alignment\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c row \ub610\ub294 column\ub0b4\uc5d0\uc11c \uc815\ub82c\ud560 \ub54c \uc0ac\uc6a9\ub41c\ub2e4.<\/li>
- shouldShowOnboarding \ubcc0\uc218\ub294 =<\/strong> \uc5f0\uc0b0\uc790 \ub300\uc2e0 by<\/strong> \ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4. property delegate\ub85c \ub9e4\ubc88 .value\ub97c \ud0c0\uc774\ud551\ud574\uc11c \ud574\ub2f9 \uac12\uc5d0 \uc811\uadfc\ud558\ub294 \uc218\uace0\ub97c \ub35c\uc5b4\uc900\ub2e4.<\/li>
- \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 shouldShowOnboarding\uc740 false\ub85c \uc124\uc815\ub418\uc9c0\ub9cc, \uc544\uc9c1 \uc774 \uc0c1\ud0dc\uac12\uc744 \ucc38\uc870\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4.<\/li><\/ul>\n\n\n\n
\uc774\uc81c \uc0c8\ub85c\uc6b4 \uc628\ubcf4\ub529 \uc2a4\ud06c\ub9b0\uc744 \uc571\uc5d0 \ucd94\uac00\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4. \uc774\ub97c \uc2e4\ud589\uc2dc\uc5d0 \ubcf4\uc5ec\uc8fc\uace0 \uc0ac\uc6a9\uc790\uac00 “Continue” \ubc84\ud2bc\uc744 \ub20c\ub800\uc744 \ub54c \uc228\uae30\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
View\uc2dc\uc2a4\ud15c\uc5d0\uc11c\ub294 INVISIBLE \ub610\ub294 GONE \uc744 \ud65c\uc6a9\ud558\uc5ec View\ub97c \uc228\uae38 \uc218 \uc788\uc5c8\ub2e4. \ucef4\ud3ec\uc988\uc5d0\uc11c\ub294 UI \uc694\uc18c\ub97c \uc228\uae30\uc9c0(hide) \ub9d0\uc790. UI \uad6c\uc131(Composition)\uc2dc\uc5d0 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc9c0 \uc54a\uc73c\uba74 \uac04\ub2e8\ud788 \ud574\uacb0\ud560 \uc218 \uc788\ub2e4. \uadf8\ub798\uc11c \ucef4\ud3ec\uc988\uac00 \uc0dd\uc131\ud558\ub294 UI \ud2b8\ub9ac\uc5d0 \ucd94\uac00\ub418\uc9c0 \uc54a\uc73c\uba74 \ub41c\ub2e4. \ucef4\ud3ec\uc988\uc5d0\uc11c\ub294 \ucf54\ud2c0\ub9b0 \uc870\uac74\ubb38\uc73c\ub85c \uac04\ub2e8\ud788 \uc774\ub97c \uad6c\ud604\ud560 \uc218 \uc788\ub2e4. \uc608\ub97c\ub4e4\uc5b4 OnboardingScreen \ub610\ub294 Greeting \ubaa9\ub85d\uc744 \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc774 \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\/\/ \uc544\uc9c1 \uc774 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc9c0 \ub9c8\uc138\uc694\n@Composable\nfun MyApp() {\n if (shouldShowOnboarding) { \/\/ \uc774\uac74 \uc5b4\ub514\uc11c \uc628\uac78\uae4c?\n OnboardingScreen()\n } else {\n Greetings()\n }\n}<\/code><\/pre>\n\n\n\n\uadf8\ub7ec\ub098 \uc774 \ucf54\ub4dc\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\ub4ef\uc774 shouldShowOnboarding\uc5d0\ub294 \uc811\uadfc\ud560 \uc218\uac00 \uc5c6\ub2e4. OnboardingScreen\uc5d0\uc11c \uc0dd\uc131\ud55c state\ub97c MyApp \ud568\uc218\uc5d0\uc11c \uacf5\uc720\ud574\uc57c\ub9cc \ud55c\ub2e4.<\/p>\n\n\n\n
\uc5b4\ub5a4 \uac12\uc5d0 \ub300\ud55c \uc0c1\ud0dc\ub97c \ubd80\ubaa8\ub808\ubca8\uc5d0\uc11c \uacf5\uc720\ud558\ub294 \uac83 \ub300\uc2e0\uc5d0, state\ub97c \uc0c1\uc704\ub85c \ub04c\uc5b4\uc62c\ub9ac\uba74\ub41c\ub2e4. \uac04\ub2e8\ud788 state\ub97c \uacf5\ud1b5 \ubd80\ubaa8\ub85c \uc62c\ub824 \uc774\ub97c \uc811\uadfc\ud560 \uc218 \uc788\uac8c \ud55c\ub2e4.<\/p>\n\n\n\n
\uba3c\uc800 MyApp\uc73c\ub85c \ubcf4\uc5ec\uc904 \ucee8\ud150\uce20\ub97c \uc62e\uae30\uace0 \uc774\ub97c Greetings\ub77c\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub85c \ub9cc\ub4e4\uc790.<\/p>\n\n\n\n
@Composable\nfun MyApp() {\n Greetings()\n}\n\n@Composable\nprivate fun Greetings(names: List<String> = listOf(\"World\", \"Compose\")) {\n Column(modifier = Modifier.padding(vertical = 4.dp)) {\n for (name in names) {\n Greeting(name = name)\n }\n }\n}<\/code><\/pre>\n\n\n\nMyApp\uc5d0\uc11c \ubcf4\uc5ec\uc904 \ub2e4\ub978 \ubc29\uc2dd\uc73c\ub85c \ubcf4\uc5ec\uc904 \ub85c\uc9c1\uc744 \ucd94\uac00\ud558\uace0, \uc774\uc5d0 \ub300\ud55c \uc0c1\ud0dc(shouldShowOnboarding)\ub3c4 \ub04c\uc5b4\uc62c\ub9ac\uc790.<\/p>\n\n\n\n
@Composable\nfun MyApp() {\n\n var shouldShowOnboarding by remember { mutableStateOf(true) }\n\n if (shouldShowOnboarding) {\n OnboardingScreen(\/* TODO *\/)\n } else {\n Greetings()\n }\n}<\/code><\/pre>\n\n\n\nshouldShowOnboarding\uc744 OnBoadingScreen \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc5d0 \uacf5\uc720\ud574\uc57c \ud558\uc9c0\ub9cc \uadf8\ub0e5 \uc9c1\uc811\uc801\uc73c\ub85c \uc804\ub2ec\ud558\uc9c0 \uc54a\ub294\ub2e4. “Continue” \ubc84\ud2bc\uc744 \uc0ac\uc6a9\uc790\uac00 \ub20c\ub800\uc744 \ub54c shouldShowOnboarding \uac12\uc744 \ubcc0\uacbd\ud558\ub3c4\ub85d \ud558\uc790. <\/p>\n\n\n\n
\uc774\ub97c \uc704\ud574 OnboardingScreen \ud568\uc218\uc758 \ud30c\ub77c\ubbf8\ud130\ub85c onContinueClicked\ub77c\ub294 \ud568\uc218\ud30c\ub77c\ubbf8\ud130\ub97c \uc815\uc758\ud558\uace0, \uc774\ub97c Button \ud568\uc218\uc758 onClick \ud30c\ub77c\ubbf8\ud130\ub85c \uc804\ub2ec\ud558\uc790. \uc0ac\uc6a9\uc790 \ud074\ub9ad \uc2dc shouldShowOnboarding\uc758 \uac12\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ud55c\ub2e4.<\/p>\n\n\n\n
@Composable\nfun MyApp() {\n\n var shouldShowOnboarding by remember { mutableStateOf(true) }\n\n if (shouldShowOnboarding) {\n OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false }<\/strong>)\n } else {\n Greetings()\n }\n}\n\n@Composable\nfun OnboardingScreen(onContinueClicked: () -> Unit<\/strong>) {\n\n Surface {\n Column(\n modifier = Modifier.fillMaxSize(),\n verticalArrangement = Arrangement.Center,\n horizontalAlignment = Alignment.CenterHorizontally\n ) {\n Text(\"Welcome to the Basics Codelab!\")\n Button(\n modifier = Modifier\n .padding(vertical = 24.dp),\n onClick = onContinueClicked<\/strong>\n ) {\n Text(\"Continue\")\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nOnboardingScreen\uc5d0 state\ub97c \uc804\ub2ec\ud558\ub294\uac8c \uc544\ub2cc \ud568\uc218\ub97c \uc804\ub2ec\ud558\ub294 \uac83\uc73c\ub85c, \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c \uc880 \ub354 \uc7ac\uc0ac\uc6a9\uac00\ub2a5\ud558\uac8c \ub9cc\ub4e4\uace0 \ub2e4\ub978 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub85c\ubd80\ud130 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\ub294 \uac83\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c \uc774\ub7ec\ud55c \ubc29\uc2dd\uc740 \ucf54\ub4dc\ub97c \uc880 \ub354 \ub2e8\uc21c\ud558\uac8c \uc720\uc9c0 \ud560 \uc218 \uc788\uac8c \ub9cc\ub4e4\uc5b4 \uc900\ub2e4. <\/p>\n\n\n\n
\ub2e4\uc74c \ucf54\ub4dc\ub294 OnBoardingPreview\uac00 \uc5b4\ub5bb\uac8c \uc218\uc815\ub418\uc5b4\uc57c \ud558\ub294\uc9c0 \ubcf4\uc5ec\uc900\ub2e4.<\/p>\n\n\n\n
@Preview(showBackground = true, widthDp = 320, heightDp = 320)\n@Composable\nfun OnboardingPreview() {\n BasicsCodelabTheme {\n OnboardingScreen(onContinueClicked = {}) \/\/ \uc544\ubb34\uac83\ub3c4 \uc548\ud568.\n }\n}<\/code><\/pre>\n\n\n\n\ubbf8\ub9ac\ubcf4\uae30\uc6a9\uc73c\ub85c onContinueClicked\uc5d0 \ube48 \ub78c\ub2e4\ud45c\ud604\uc2dd\uc744 \uc801\uc6a9\ud588\ub2e4.<\/p>\n\n\n\n
\uc2e4\uc81c \ube4c\ub4dc\ub97c \ud558\uc5ec MyApp \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uac00 \uc2e4\ud589\ub41c \uac83\uc744 \ud655\uc778\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-jetpack-compose-basics-state-hoisting-1fd101673cd56005.gif\")
<\/figure>\n\n\n\n\uc9c0\uae08\uae4c\uc9c0 \uc791\uc131\ud55c \uc804\uccb4\ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BasicsCodelabTheme {
MyApp()
}
}
}
}
@Composable
fun MyApp() {
var shouldShowOnboarding by remember { mutableStateOf(true) }
if (shouldShowOnboarding) {
OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false })
} else {
Greetings()
}
}
@Composable
fun OnboardingScreen(onContinueClicked: () -> Unit) {
Surface {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(\"Welcome to the Basics Codelab!\")
Button(
modifier = Modifier.padding(vertical = 24.dp),
onClick = onContinueClicked
) {
Text(\"Continue\")
}
}
}
}
@Composable
private fun Greetings(names: List<String> = listOf(\"World\", \"Compose\")) {
Column(modifier = Modifier.padding(vertical = 4.dp)) {
for (name in names) {
Greeting(name = name)
}
}
}
@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
fun OnboardingPreview() {
BasicsCodelabTheme {
OnboardingScreen(onContinueClicked = {})
}
}
@Composable
private fun Greeting(name: String) {
val expanded = remember { mutableStateOf(false) }
val extraPadding = if (expanded.value) 48.dp else 0.dp
Surface(
color = MaterialTheme.colors.primary,
modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
) {
Row(modifier = Modifier.padding(24.dp)) {
Column(modifier = Modifier
.weight(1f)
.padding(bottom = extraPadding)
) {
Text(text = \"Hello, \")
Text(text = name)
}
OutlinedButton(
onClick = { expanded.value = !expanded.value }
) {
Text(if (expanded.value) \"Show less\" else \"Show more\")
}
}
}
}
@Preview(showBackground = true, widthDp = 320)
@Composable
fun DefaultPreview() {
BasicsCodelabTheme {
Greetings()
}
}<\/code><\/pre>\n\n\n\nState hoisting\uc5d0 \ub3c4\uc6c0\uc774 \ub418\ub294 \uaddc\uce59<\/h2>\n\n\n\n- State\ub294 State\ub97c \uc0ac\uc6a9\ud558\ub294 \ubaa8\ub4e0 \ud558\uc704 \ucef4\ud3ec\uc800\ube14\ub4e4\uc758 \uacf5\ud1b5 \uc0c1\uc704 \ud56d\ubaa9\uc73c\ub85c \ub04c\uc5b4\uc62c\ub9b0\ub2e4.<\/li>
- Recomposition \ube48\ub3c4\ub97c \uc801\uac8c \ud558\uae30 \uc704\ud574, State\ub294 \ucd5c\uc18c\ud55c \uc218\uc815 \ud560 \uc218 \uc788\ub294 \ub0b4\uc5d0\uc11c \ucd5c\uace0 \uc218\uc900\uc73c\ub85c \ub04c\uc5b4\uc62c\ub9b0\ub2e4.<\/li>
- \ub3d9\uc77c\ud55c \uc774\ubca4\ud2b8\uc5d0 \ub300\ud55c \uc751\ub2f5\uc73c\ub85c \ub450 State\uac00 \ubcc0\uacbd\ub418\ub294 \uacbd\uc6b0 \ud558\ub098\uc758 State\ub85c \ucc98\ub9ac\ud558\uc790.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
\ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc5d0\uc11c \ub2e4\uc591\ud55c \ud568\uc218\ub4e4\uc5d0 \uc758\ud574 \ubd88\ub7ec\uc640 \uc9c0\uac70\ub098 \uc218\uc815\ub418\uc5b4\uc9c0\ub294 \uc0c1\ud0dc(state)\ub294 \uacf5\ud1b5\uc801\uc778 \ubd80\ubaa8\ub0b4\uc5d0 \uc874\uc7ac\ud55c\ub2e4. \uc774\ub7ec\ud55c \ucc98\ub9ac\ub97c \uc0c1\ud0dc \ub04c\uc5b4\uc62c\ub9ac\uae30(state hoisting) \uc774\ub77c\uace0 \ud55c\ub2e4. hoist\uc758 \uc758\ubbf8\ub294 \ub04c\uc5b4 \uc62c\ub824\uc9c0\ub294 \uac83\uc744 \uc758\ubbf8\ud55c\ub2e4.(lift or elevate) \uc0c1\ud0dc\ub97c \ub04c\uc5b4\uc62c\ub824 \ub9cc\ub4e4\uba74 \uc911\ubcf5\ub418\ub294 \uc0c1\ud0dc \ubc0f \ubc84\uadf8\ub97c \ud53c\ud560 \uc218 \uc788\uace0, \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc758 \uc7ac\uc0ac\uc6a9\uc131\uacfc \ud14c\uc2a4\ud2b8 \uc6a9\uc774\uc131\uc744 \uc0c1\ub2f9\ud788 \uc88b\uac8c \ub9cc\ub4e4\uc218 \uc788\ub2e4. \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc758 \ubd80\ubaa8\uac00 \uc81c\uc5b4 […]<\/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\/45490"}],"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=45490"}],"version-history":[{"count":4,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45490\/revisions"}],"predecessor-version":[{"id":45812,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45490\/revisions\/45812"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}