{"id":45501,"date":"2021-11-07T17:20:27","date_gmt":"2021-11-07T08:20:27","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45501"},"modified":"2021-11-12T16:33:24","modified_gmt":"2021-11-12T07:33:24","slug":"jetpack-compose-basics-%eb%aa%a9%eb%a1%9d%ec%97%90-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98-%ec%a0%81%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45501","title":{"rendered":"Jetpack Compose basics – \ubaa9\ub85d\uc5d0 \uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9\ud558\uae30"},"content":{"rendered":"\n

\ucef4\ud3ec\uc988\uc5d0\uc11c \uc5ec\ub7ec \ubc29\ubc95\uc73c\ub85c UI\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4. \uac04\ub2e8\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud55c \uace0\uc218\uc900\uc758 API \ubd80\ud130 \uc804\uccb4\ub97c \uc81c\uc5b4\ud558\uace0 \ubcf5\uc7a1\ud55c \ud2b8\ub80c\uc9c0\uc158\uc744 \uc704\ud55c \uc800\uc218\uc900\uc758 API\uae4c\uc9c0 \uc788\ub2e4. \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 \ubb38\uc11c<\/a>\ub97c \ucc38\uc870\ud558\uc790.<\/p>\n\n\n\n

\uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 animateDpAsState\ub77c\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\ubcfc \uac83\uc774\ub2e4. \uc774 \ud568\uc218\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ub05d\ub0a0 \ub54c\uae4c\uc9c0 \uac12\uc774 \uc9c0\uc18d\uc801\uc73c\ub85c \uac31\uc2e0\ub418\ub294 State \uac1d\uccb4\ub97c \ubc18\ud658\ud55c\ub2e4. \uc774 \ud568\uc218\ub294 \ud0c0\uc785\uc774 Dp\uc778 \ud0c0\uac9f\uac12\uc744 \ub9e4\uac1c\ubcc0\uc218\ub85c \uac16\ub294\ub2e4.<\/p>\n\n\n\n

\uc560\ub2c8\uba54\uc774\uc158\uc5d0 \uc0ac\uc6a9\ud560 extraPadding\uc744 \uc0dd\uc131\ud558\uc5ec \ud655\uc7a5\ub41c \uc0c1\ud0dc(expanded)\uc5d0 \uc758\uc874\ud558\ub3c4\ub85d \ud558\uc790. \ub610\ud55c by \ud0a4\uc6cc\ub4dc\uc640 \ud568\uaed8 property delegate\ub97c \uc0ac\uc6a9\ud558\uc790.<\/p>\n\n\n\n

@Composable\nprivate fun Greeting(name: String) {\n\n    var expanded by remember { mutableStateOf(false) }\n\n    val extraPadding by animateDpAsState(\n        if (expanded) 48.dp else 0.dp\n    )<\/strong>\n    Surface(\n        color = MaterialTheme.colors.primary,\n        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)\n    ) {\n        Row(modifier = Modifier.padding(24.dp)) {\n            Column(modifier = Modifier\n                .weight(1f)\n                .padding(bottom = extraPadding)\n            ) {\n                Text(text = \"Hello, \")\n                Text(text = name)\n            }\n            OutlinedButton(\n                onClick = { expanded = !expanded }\n            ) {\n                Text(if (expanded) \"Show less\" else \"Show more\")\n            }\n\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
\uc571\uc744 \uc2e4\ud589\ud558\uace0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud655\uc778\ud574\ubcf4\uc790.<\/p>\n\n\n\n
Note: \ub9cc\uc57d \uccab\ubc88\uc9f8 \uc544\uc774\ud15c \ud558\ub098\ub97c \ud074\ub9ad\ud574\uc11c \ud655\uc7a5\ud55c \ub2e4\uc74c, \uccab\ubc88\uc9f8 \uc544\uc774\ud15c\uc774 \uc548\ubcf4\uc774\ub3c4\ub85d<\/em> 20\ubc88\uc9f8\ucbe4\uc73c\ub85c \uc2a4\ud06c\ub864\ud588\ub2e4\uac00 \ub2e4\uc2dc \uccab\ubc88\uc9f8 \uc544\uc774\ud15c\uc73c\ub85c \ub3cc\uc544\uac00\uba74 \ub2e4\uc2dc \uc6d0\ub798\uc758 \uc0ac\uc774\uc988\ub85c \ub3cc\uc544\uc628 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4. \ub9cc\uc57d \ud655\uc7a5 \uc0c1\ud0dc\ub97c \uc720\uc9c0\ud558\uace0 \uc2f6\ub2e4\uba74 rememberSaveable<\/code> \uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. <\/p><\/blockquote>\n\n\n\n
animateDpAsState \ud568\uc218\ub294 \uc120\ud0dd\uc801\uc73c\ub85c animationSpec\uc774\ub77c\ub294 \ud30c\ub77c\ubbf8\ud130\ub97c \ucde8\ud55c\ub2e4. animationSpec\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ucee4\uc2a4\ud140 \ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc900\ub2e4. \ud1b5\ud1b5 \ud280\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ucd94\uac00\uc801\uc73c\ub85c \uc801\uc6a9\ud574\ubcf4\uc790.<\/p>\n\n\n\n
@Composable\nprivate fun Greeting(name: String) {\n\n    var expanded by remember { mutableStateOf(false) }\n\n    val extraPadding by animateDpAsState(\n        if (expanded) 48.dp else 0.dp,\n        animationSpec = spring(\n            dampingRatio = Spring.DampingRatioMediumBouncy,\n            stiffness = Spring.StiffnessLow\n        )<\/strong>\n    )\n\n    Surface(\n    ...\n            Column(modifier = Modifier\n                .weight(1f)\n                .padding(bottom = extraPadding.coerceAtLeast(0.dp))<\/strong>\n\n    ...\n\n    )\n}<\/code><\/pre>\n\n\n\n
padding\uc740 \uc808\ub300\ub85c \uc74c\uc218\uac00 \ub420 \uc218 \uc5c6\ub294 \uc810\uc744 \uba85\uc2ec\ud558\uc790. \uc74c\uc218\ub85c \uc9c0\uc815\ud558\uba74 \ud06c\ub798\uc2dc\uac00 \ubc1c\uc0dd\ud55c\ub2e4. \uc774\ub7f0 \uc810 \ub54c\ubb38\uc5d0 \ubbf8\ubb18\ud55c \uc560\ub2c8\uba54\uc774\uc158 \ubc84\uadf8\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294\ub370, \uc774 \ubd80\ubd84\uc740 \ub9c8\ubb34\ub9ac \uc791\uc5c5<\/a> \ud3b8\uc5d0\uc11c \uc218\uc815\ud558\uae30\ub85c \ud558\uc790.<\/p>\n\n\n\n
spring spec\uc740 \uc2dc\uac04\uacfc \uad00\ub828\ub41c \uc5b4\ub5a0\ud55c \ub9e4\uac1c\ubcc0\uc218\ub3c4 \ucde8\ud558\uc9c0 \uc54a\ub294\ub2e4. \ub300\uc2e0\uc5d0 \ubb3c\ub9ac\uc801\uc778 \uc18d\uc131(\uac10\ud3ed \ubc0f \ub2e8\ub2e8\ud568)\uc5d0 \uc758\uc874\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc880\ub354 \uc790\uc5f0\uc2a4\ub7fd\uac8c \ub9cc\ub4e0\ub2e4. \uc571\uc744 \uc2e4\ud589\ud558\uc5ec \uc0c8\ub86d\uac8c \uc801\uc6a9\ub41c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
animate*AsState\uc73c\ub85c \uc0dd\uc131\ud55c \uc5b4\ub5a4 \uc560\ub2c8\uba54\uc774\uc158\uc774\ub4e0 \uc911\ub2e8\uc774 \uac00\ub2a5\ud558\ub2e4. \uc774\ub294 \ub9cc\uc57d \ud0c0\uac9f\uac12\uc774 \uc560\ub2c8\uba54\uc774\uc158 \uc911\uac04\uc5d0 \ubcc0\uacbd\ub418\uba74, animate*AsState\uac00 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc7ac\uc2dc\uc791 \ud558\uace0 \uc0c8\ub85c\uc6b4 \uac12\uc744 \uac00\ub974\ud0a4\ub294 \uac83\uc744 \uc758\ubbf8\ud55c\ub2e4. \ud1b5\ud1b5\ud280\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc911\ub2e8\uc740 \ud2b9\ubcc4\ud788 \uc790\uc5f0\uc2a4\ub7ec\uc6cc \ubcf4\uc778\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ub2e4\ub978 \ud0c0\uc785\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc0b4\ud3b4\ubcf4\uace0 \uc2f6\ub2e4\uba74 spring\uc5d0 \ub2e4\ub978 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc801\uc6a9\ud558\uac70\ub098 tween \uc774\ub098 repeatable\uc744 spec\uc744 \uc0ac\uc6a9\ud558\uace0 animateColorAsState\uc640 \uac19\uc740 \ub2e4\ub978 \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\ubcf4\uc790. \ub610\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ubb38\uc11c<\/a>\ub97c \ucc38\uace0\ud558\uc5ec \ub2e4\ub978 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud574\ubcf4\uc790.<\/p>\n","protected":false},"excerpt":{"rendered":"
\ucef4\ud3ec\uc988\uc5d0\uc11c \uc5ec\ub7ec \ubc29\ubc95\uc73c\ub85c UI\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4. \uac04\ub2e8\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud55c \uace0\uc218\uc900\uc758 API \ubd80\ud130 \uc804\uccb4\ub97c \uc81c\uc5b4\ud558\uace0 \ubcf5\uc7a1\ud55c \ud2b8\ub80c\uc9c0\uc158\uc744 \uc704\ud55c \uc800\uc218\uc900\uc758 API\uae4c\uc9c0 \uc788\ub2e4. \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 \ubb38\uc11c\ub97c \ucc38\uc870\ud558\uc790. \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 animateDpAsState\ub77c\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\ubcfc \uac83\uc774\ub2e4. \uc774 \ud568\uc218\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ub05d\ub0a0 \ub54c\uae4c\uc9c0 \uac12\uc774 \uc9c0\uc18d\uc801\uc73c\ub85c \uac31\uc2e0\ub418\ub294 State \uac1d\uccb4\ub97c \ubc18\ud658\ud55c\ub2e4. \uc774 \ud568\uc218\ub294 \ud0c0\uc785\uc774 Dp\uc778 \ud0c0\uac9f\uac12\uc744 […]<\/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\/45501"}],"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=45501"}],"version-history":[{"count":3,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45501\/revisions"}],"predecessor-version":[{"id":45516,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45501\/revisions\/45516"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}