{"id":45454,"date":"2021-11-07T11:31:18","date_gmt":"2021-11-07T02:31:18","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45454"},"modified":"2021-11-12T16:31:00","modified_gmt":"2021-11-12T07:31:00","slug":"jetpack-compose-basics-%ec%88%98%ec%a0%95-%eb%b0%8f-%ec%9e%ac%ec%82%ac%ec%9a%a9","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45454","title":{"rendered":"Jetpack Compose basics – \uc218\uc815 \ubc0f \uc7ac\uc0ac\uc6a9"},"content":{"rendered":"

UI \uc218\uc815\ud558\uae30<\/h1>\n

Greeting \ud568\uc218\uc758 \ubc30\uacbd\uc0c9\uc744 \ubcc0\uacbd\ud574\ubcf4\uc790. ‘Text’ composable \ud568\uc218\ub97c ‘Surface’ composable \ud568\uc218\ub85c \uac10\uc2f8\uace0, Surface\uc758 \uc0c9\uc0c1\uc744 MaterialTheme.colors.primary\ub85c \ubcc0\uacbd\ud574\ubcf4\uc790.<\/p>\n

@Composable\nprivate fun Greeting(name: String) {\n    Surface(color = MaterialTheme.colors.primary) {\n        Text (text = \"Hello $name!\")\n    }\n}<\/pre>\n
Surface\ub85c \uac10\uc2f8\uc9c4 \ub0b4\ubd80\uc758 \ucef4\ud3ec\ub10c\ud2b8\uc740 \ubc30\uacbd\uc0c9\uc774 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ub420 \uac83\uc774\ub2e4.<\/p>\n
\"\"<\/a><\/p>\n
\uadfc\ub370 \uc790\uc138\ud788 \ubcf4\uba74 \ud14d\uc2a4\ud2b8\uac00 \ud770\uc0c9\uc73c\ub85c \ubcc0\uacbd \ub418\uc5c8\ub2e4. \uc65c!?<\/p>\n
androidx.compose.material.Surface\ub294 \uc88b\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc704\ud574, \ub3c5\ub2e8\uc801\uc774\uae34 \ud558\uc9c0\ub9cc \ubbf8\ub9ac \uc815\uc758\ub41c \uae30\ubcf8\uac12\uacfc \ud328\ud134\uc744 \uc801\uc6a9\ud55c\ub2e4. Compose\uc758 Material \uad6c\uc131 \uc694\uc18c\ub294 androidx.compose.foundation \uc704\uc5d0 \uad6c\ucd95\ub41c\ub2e4. foundation \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud544\uc694\ud55c \uacbd\uc6b0 \uc571\uc5d0\uc11c\ub3c4 \uc811\uadfc\ud558\uc5ec \ubcc0\uacbd \ud560 \uc218 \uc788\ub2e4.<\/span><\/p>\n
\uc704\uc758 \uacbd\uc6b0\uc5d0 Surface\uc758 \ubc30\uacbd\uc0c9\uc774 primary\ub85c \uc124\uc815\ub418\uba74 \ud14d\uc2a4\ud2b8\ub294 onPrimary \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud558\ub3c4\ub85d \uc815\uc758\ub418\uc5b4\uc788\ub2e4. \uc571\uc5d0 \ud14c\ub9c8\ub97c \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc740 \ub098\uc911\uc5d0 \ub2e4\uc2dc \ub2e4\ub904\ubcf4\uc790.<\/p>\n
Modifier \uc0ac\uc6a9\ud558\uae30<\/h2>\n
Surface \ubc0f Text\uc640 \uac19\uc740 \ub300\ubd80\ubd84\uc758 Compose UI \uc694\uc18c\ub4e4\uc740 \ucd94\uac00\uc801\uc73c\ub85c modifier \uc778\uc790\ub97c \uc218\uc6a9\ud55c\ub2e4. Modifier\ub294 UI\uac00 \uc5b4\ub5bb\uac8c \uc804\uac1c\ub418\uace0, \ub098\ud0c0\ub098\uace0, \uc0c1\uc704 \ub808\uc774\uc544\uc6c3\ub0b4\uc5d0\uc11c \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud560\uc9c0\ub97c \uc815\uc758\ud55c\ub2e4.<\/p>\n
\uc608\ub97c\ub4e4\uc5b4 padding\uc744 \uc801\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74 Modifier.padding()\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n
@Composable\nprivate fun Greeting(name: String) {\n    Surface(color = MaterialTheme.colors.primary) {\n        Text(text = \"Hello $name!\", modifier = Modifier.padding(24.dp))\n    }\n}<\/pre>\n
\uc774\uc81c Build & Refresh\ub97c \ub204\ub974\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ub41c \ub0b4\uc6a9\uc774 \ub098\ud0c0\ub09c\ub2e4.<\/p>\n
\"\"<\/a><\/p>\n
Composable \ud568\uc218 \uc7ac\uc0ac\uc6a9\ud558\uae30<\/h1>\n
UI\uc5d0 \ub354 \ub9ce\uc740 \uc694\uc18c\uac00 \ucd94\uac00 \ub420 \ub54c\ub9c8\ub2e4, \ub354 \ub9ce\uc740 \uacc4\uce35\uc774 \uc0dd\uc131\ub41c\ub2e4. \ud568\uc218\ube14\ub7ed\uc774 \ub108\ubb34 \ub9ce\uc544\uc9c0\uba74 \ucf54\ub4dc\ub97c \uc77d\uae30\uac00 \uc5b4\ub824\uc6cc\uc9c4\ub2e4. \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud558\ub3c4\ub85d \uc791\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ud568\uc218\ub97c \ub9cc\ub4e4\uba74, \uc571\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 ‘UI \ub77c\uc774\ube0c\ub7ec\ub9ac’\ub97c \uc27d\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\ub2e4. \uac01\uac01\uc740 \ud654\uba74\uc758 \uc791\uc740 \ubd80\ubd84\uc744 \ub2f4\ub2f9\ud558\uba70 \ub3c5\ub9bd\uc801\uc73c\ub85c \ud3b8\uc9d1\ud560 \uc218 \uc788\ub2e4.<\/span><\/p>\n
MyApp\uc774\ub77c\ub294 Composable\ud568\uc218\ub97c \ub9cc\ub4e4\uc5b4\uc11c Greeting \ud568\uc218\ub97c \ud3ec\ud568\uc2dc\ucf1c\ubcf4\uc790.<\/p>\n
@Composable\nprivate fun MyApp() {\n    Surface(color = MaterialTheme.colors.background) {\n        Greeting(\"Android\")\n    }\n}<\/pre>\n
onCreate \ucf5c\ubc31\ub0b4\uc5d0 \uc0ac\uc6a9\ud55c \ucf54\ub4dc\ub97c \uae68\ub057\uc774 \uc815\ub9ac\ud558\uace0, MyApp composable \ud568\uc218\ub97c \uc7ac\uc0ac\uc6a9\ud558\uc5ec \uc911\ubcf5\ucf54\ub4dc\ub97c \ud53c\ud558\uace0, preview\ub85c \ud655\uc778\ud560 \uc218 \uc788\ub2e4. \uc815\ub9ac\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc0dd\uacbc\uc744 \uac83\uc774\ub2e4.<\/p>\n
class MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            BasicsCodelabTheme {\n                MyApp()\n            }\n        }\n    }\n}\n\n@Composable\nprivate fun MyApp() {\n    Surface(color = MaterialTheme.colors.background) {\n        Greeting(\"Android\")\n    }\n}\n\n@Composable\nprivate fun Greeting(name: String) {\n    Surface(color = MaterialTheme.colors.primary) {\n        Text(text = \"Hello $name!\", modifier = Modifier.padding(24.dp))\n    }\n}\n\n@Preview(showBackground = true)\n@Composable\nprivate fun DefaultPreview() {\n    BasicsCodelabTheme {\n        MyApp()\n    }\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
UI \uc218\uc815\ud558\uae30 Greeting \ud568\uc218\uc758 \ubc30\uacbd\uc0c9\uc744 \ubcc0\uacbd\ud574\ubcf4\uc790. ‘Text’ composable \ud568\uc218\ub97c ‘Surface’ composable \ud568\uc218\ub85c \uac10\uc2f8\uace0, Surface\uc758 \uc0c9\uc0c1\uc744 MaterialTheme.colors.primary\ub85c \ubcc0\uacbd\ud574\ubcf4\uc790. @Composable private fun Greeting(name: String) { Surface(color = MaterialTheme.colors.primary) { Text (text = “Hello $name!”) } } Surface\ub85c \uac10\uc2f8\uc9c4 \ub0b4\ubd80\uc758 \ucef4\ud3ec\ub10c\ud2b8\uc740 \ubc30\uacbd\uc0c9\uc774 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ub420 \uac83\uc774\ub2e4. \uadfc\ub370 \uc790\uc138\ud788 \ubcf4\uba74 \ud14d\uc2a4\ud2b8\uac00 \ud770\uc0c9\uc73c\ub85c \ubcc0\uacbd \ub418\uc5c8\ub2e4. […]<\/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\/45454"}],"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=45454"}],"version-history":[{"count":5,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45454\/revisions"}],"predecessor-version":[{"id":45476,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45454\/revisions\/45476"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}