{"id":45459,"date":"2021-11-07T11:31:40","date_gmt":"2021-11-07T02:31:40","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45459"},"modified":"2021-11-12T16:30:59","modified_gmt":"2021-11-12T07:30:59","slug":"compose-jetpack-compose-basics-%ed%96%89%ea%b3%bc-%ec%97%b4%eb%a1%9c-%ec%95%84%ec%9d%b4%ed%85%9c-%ea%b5%ac%ec%84%b1","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45459","title":{"rendered":"Jetpack Compose basics – \ud589\uacfc \uc5f4\ub85c \uc544\uc774\ud15c \uad6c\uc131"},"content":{"rendered":"

\ud589\uacfc \uc5f4\ub85c \uc544\uc774\ud15c \uad6c\uc131\ud558\uae30<\/h1>\n

Compose\uc5d0 \ud3ec\ud568\ub41c Column, Row, Box\uc640 \uac19\uc740 \ud45c\uc900 \ub808\uc774\uc544\uc6c3 3\uc694\uc18c\uac00 \uc788\ub2e4.<\/p>\n

\"\"<\/a><\/p>\n

Column, Row, Box\ub3c4 composable \ud568\uc218\ub2e4. \uc774 \ud568\uc218\ub4e4\uc740 \ub2e4\ub978 composable \uc694\uc18c\ub4e4\uc744 \ub0b4\ubd80\uc5d0\uc11c \uac01\uae30 \ub2e4\ub978 \ud615\ud0dc\ub85c \ubc30\uce58 \ud55c\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc\uac00 \uc788\ub2e4\uace0 \uac00\uc815\ud558\uc790.<\/p>\n

@Composable\nprivate fun Greeting(name: String) {\n    Surface(color = MaterialTheme.colors.primary) {\n        Column<\/strong>(modifier = Modifier.padding(24.dp)) {\n            Text(text = \"Hello,\")\n            Text(text = name)\n        }\n    }\n}<\/pre>\n
Column\uc740 \uc218\uc9c1\uc73c\ub85c \uac01\uac01\uc758 \ud56d\ubaa9\uc744 \ubc30\uce58\ud558\ubbc0\ub85c, \uadf8 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.\"\"<\/a><\/p>\n
\ucf54\ud2c0\ub9b0 \ubb38\ubc95\uacfc Compose<\/h2>\n
composable \ud568\uc218\ub294 Kotlin\uc758 \ubb38\ubc95\uc744 \uae30\ubc18\uc73c\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc774\ub7ec\ud55c \ubd80\ubd84\uc740 UI\uac00 \ud45c\uc2dc\ub418\ub294 \ubc29\uc2dd\uc5d0 \ucf54\ud2c0\ub9b0 \ubb38\ubc95\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc73c\ubbc0\ub85c UI \u200b\u200b\uad6c\ucd95\uc774 \uc815\ub9d0 \uac15\ub825\ud574\uc9c4\ub2e4. \uc608\ub97c \ub4e4\uc5b4 for \ub8e8\ud504\ub97c \uc0ac\uc6a9\ud558\uc5ec Column \uc694\uc18c\ub97c \ucd94\uac00\ud560 \uc218 \uc788\ub2e4.<\/span><\/p>\n
@Composable\nfun MyApp(names: List<String> = listOf(\"World\", \"Compose\")) {\n    Column {\n        for (name in names) {\n            Greeting(name = name)\n        }\n    }\n}<\/pre>\n
\"c366a44b3e99157f.png\"<\/p>\n
composable\ub85c \uc0ac\uc774\uc988 \uc218\uce58\ub97c \uc9c0\uc815\ud558\uc9c0 \uc54a\uc558\uac70\ub098 \uc81c\uc57d\uc870\uac74\uc744 \ucd94\uac00\ud558\uc9c0 \uc54a\uc558\ub2e4\uba74, \uac01 \ud589\uc758 \uc544\uc774\ud15c\uc740 \ucd5c\uc18c\uc758 \uc0ac\uc774\uc988\ub97c \uac00\uc9c0\uace0 preview\uc0c1\uc5d0 \ub098\ud0c0\ub098\uac8c \ub41c\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 widthDp<\/strong> \uc18d\uc131\uc744 \ubcc0\uacbd\ud558\uc5ec \uac00\ub85c \uae38\uc774\ub97c 320dp\ub85c \uc9c0\uc815\ud574\ubcf4\uc790.<\/p>\n
@Preview(showBackground = true, widthDp<\/strong> = 320)\n@Composable\nfun DefaultPreview() {\n    BasicsCodelabTheme {\n        MyApp()\n    }\n}<\/pre>\n
\"63ac84a794ec7a3d.png\"<\/p>\n
Modifier\ub294 Compose\uc5d0\uc11c \uad11\ubc94\uc704\ud558\uac8c \uc0ac\uc6a9\ub41c\ub2e4. fillMaxWidth<\/strong> \uc640 padding<\/strong>\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc544\ub798\uc758 preview\ucc98\ub7fc \ub098\ud0c0\ub0b4\ubcf4\uc790.<\/p>\n
\"ecd3370d03f7130e.png\"<\/p>\n
\ucf54\ub4dc\uc758 \ubcc0\uacbd\uc0ac\ud56d\uc744 \ud655\uc778\ud574\ubcf4\uc790<\/p>\n
@Composable\nfun MyApp(names: List<String> = listOf(\"World\", \"Compose\")) {\n    Column(modifier = Modifier.padding<\/strong>(vertical = 4.dp)) {\n        for (name in names) {\n            Greeting(name = name)\n        }\n    }\n}\n\n@Composable\nprivate fun Greeting(name: String) {\n    Surface(\n        color = MaterialTheme.colors.primary,\n        modifier = Modifier.padding<\/strong>(vertical = 4.dp, horizontal = 8.dp)\n    ) {\n        Column(modifier = Modifier.fillMaxWidth<\/strong>().padding<\/strong>(24.dp)) {\n            Text(text = \"Hello, \")\n            Text(text = name)\n        }\n    }\n}<\/pre>\n
\ubc84\ud2bc \ucd94\uac00 \ud558\uae30<\/h2>\n
\ub2e4\uc74c \ub2e8\uacc4\ub85c Greeting\uc744 \ud655\uc7a5\ud558\uc5ec \ud074\ub9ad\ud560 \uc218 \uc788\ub294 \ubc84\ud2bc\uc744 \ucd94\uac00\ud574\ubcf4\uc790. \ubc84\ud2bc\uc744 \ucd94\uac00\ud558\uace0\ub098\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ub808\uc774\uc544\uc6c3\uc73c\ub85c \uad6c\uc131\ub420 \uac83\uc774\ub2e4.<\/p>\n
\"203e0a9946f313cc.png\"<\/p>\n
Button\uc774\ub77c\ub294 Composable \ud568\uc218\ub3c4 \uba38\ud14c\ub9ac\uc5bc \ud328\ud0a4\uc9c0\ub85c\ubd80\ud130 \uc81c\uacf5\ub41c\ub2e4. Button\uc740 \ub9c8\uc9c0\ub9c9 \ud30c\ub77c\ubbf8\ud130\ub85c composable \ud568\uc218\ub97c \uac16\ub294\ub2e4. \ucf54\ud2c0\ub9b0 \ubb38\ubc95\uc5d0 \ub530\ub974\uba74, \ud568\uc218\uc758 \ub9c8\uc9c0\ub9c9 \ud30c\ub77c\ubbf8\ud130\uac00 \ud568\uc218\uc77c \uacbd\uc6b0 \ud574\ub2f9 \uc778\uc790\ub85c \uc804\ub2ec\ub41c \ub78c\ub2e4 \ud45c\ud604\uc2dd\uc744 \uad04\ud638 \ubc16\uc5d0 \ubc30\uce58 \ud560 \uc218 \uc788\ub2e4. \uc774\ub97c trailing lambda<\/a>\ub77c\uace0 \ud55c\ub2e4. Button\uc5d0 Text\ub97c \ucd94\uac00\ud558\ub294 \uc608\uc81c\ub97c \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n
\/\/ \uc544\uc9c1 \ubcf5\uc0ac \u3134\u3134\nButton(\n    onClick = { } \/\/ \ucf5c\ubc31\uc740 \ub098\uc911\uc5d0~\n) {\n    Text(\"Show less\")\n}<\/pre>\n
Compose\ub294 \uba38\ud14c\ub9ac\uc5bc \ub514\uc790\uc778 \ubc84\ud2bc \uc2a4\ud399<\/a>\uc5d0 \ub530\ub974\uba74 \ub2e4\uc591\ud55c \ubc84\ud2bc \ud0c0\uc785\uc744 \uc81c\uacf5\ud558\uace0 \uc788\ub2e4.<\/p>\n