{"id":45780,"date":"2021-11-24T13:42:20","date_gmt":"2021-11-24T04:42:20","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45780"},"modified":"2021-11-24T13:42:22","modified_gmt":"2021-11-24T04:42:22","slug":"migrating-to-jetpack-compose-viewmodel-%eb%b0%8f-livedata","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45780","title":{"rendered":"Migrating to Jetpack Compose &#8211; ViewModel \ubc0f LiveData"},"content":{"rendered":"\n<p>\uc774\uc81c \uc81c\ubaa9\uc744 \ud654\uba74\uc5d0 \uc5f0\uacb0\ud574 \ubcf4\uc790. \uadf8\ub807\uac8c \ud558\ub824\uba74 PlantDetailViewModel\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \ub85c\ub4dc\ud574\uc57c \ud55c\ub2e4. \uc774\ub97c \uc704\ud574 \ucef4\ud3ec\uc988\ub294 ViewModel \ubc0f LiveData\uc5d0 \ub300\ud55c \ud1b5\ud569\uacfc \ud568\uaed8 \uc81c\uacf5\ub41c\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ViewModel<\/h2>\n\n\n\n<p>PlantDetailViewModel\uc758 \uc778\uc2a4\ud134\uc2a4\uac00 Fragment\uc5d0\uc11c \uc0ac\uc6a9\ub418\ubbc0\ub85c PlantDetailDescription\uc5d0 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Note: <strong>ViewModel\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uac70\ub098, \ud574\ub2f9 \uc885\uc18d\uc131\uc744 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc804\ub2ec\ud558\uace0 \uc2f6\uc9c0 \uc54a\uc740 \uacbd\uc6b0 \ucef4\ud3ec\uc800\ube14 \ub0b4\uc5d0\uc11c viewModel<\/strong> \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec ViewModel\uc758 \uc778\uc2a4\ud134\uc2a4\ub97c \uac00\uc838\uc62c \uc218 \uc788\ub2e4.<\/p><p>\ucef4\ud3ec\uc800\ube14\uc5d0\ub294 \uc790\uccb4 ViewModel \uc778\uc2a4\ud134\uc2a4\uac00 \uc5c6\uc73c\uba70, \ucef4\ud3ec\uc800\ube14\uacfc \ud574\ub2f9 \ucef4\ud3ec\uc988 \ucf54\ub4dc(\uc561\ud2f0\ube44\ud2f0 \ub610\ub294 \ud504\ub808\uadf8\uba3c\ud2b8)\ub97c \ud638\uc2a4\ud305\ud558\ub294 Lifecycle Owner \uac04\uc5d0 \ub3d9\uc77c\ud55c \uc778\uc2a4\ud134\uc2a4\uac00 \uacf5\uc720\ub41c\ub2e4<\/p><\/blockquote>\n\n\n\n<p>PlantDetailDescription.kt \ud30c\uc77c\uc744 \uc5f4\uace0 PlantDetailViewModel \ub9e4\uac1c\ubcc0\uc218\ub97c PlantDetailDescription\uc5d0 \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">PlantDetailDescription.kt<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable<br>fun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) {<br>&nbsp; &nbsp; ...<br>}<\/code><\/pre>\n\n\n\n<p>\uc774\uc81c \ud504\ub798\uadf8\uba3c\ud2b8\uc5d0\uc11c \uc774 \ucef4\ud3ec\uc800\ube14\uc744 \ud638\ucd9c\ud560 \ub54c ViewModel\uc758 \uc778\uc2a4\ud134\uc2a4\ub97c \uc804\ub2ec\ud55c\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">PlantDetailFragment.kt<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>class PlantDetailFragment : Fragment() {<br>&nbsp; &nbsp; ...<br>&nbsp; &nbsp; override fun onCreateView(...): View? {<br>&nbsp; &nbsp; &nbsp; &nbsp; ...<br>&nbsp; &nbsp; &nbsp; &nbsp; composeView.setContent {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MaterialTheme {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; PlantDetailDescription(plantDetailViewModel)<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; }<br>}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">LiveData<\/h2>\n\n\n\n<p>\uc774\ub97c \ud1b5\ud574 \uc774\ubbf8 PlantDetailViewModel\uc758 LiveData&lt;Plant> \ud544\ub4dc\uc5d0 \uc561\uc138\uc2a4\ud558\uc5ec \uc2dd\ubb3c \uc774\ub984\uc744 \uc5bb\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\ucef4\ud3ec\uc800\ube14\uc5d0\uc11c LiveData\ub97c \uad00\ucc30\ud558\ub824\uba74 LiveData.observeAsState() \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc790.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Note<\/strong>: LiveData.observeAsState()\ub294 LiveData \uad00\ucc30\uc744 \uc2dc\uc791\ud558\uace0 State \uac1d\uccb4\ub97c \ud1b5\ud574 \uac12\uc744 \ub098\ud0c0\ub0b8\ub2e4. LiveData\uc5d0 \uc0c8 \uac12\uc774 \uac8c\uc2dc\ub420 \ub54c\ub9c8\ub2e4 \ubc18\ud658\ub41c State\uac00 \uc5c5\ub370\uc774\ud2b8\ub418\uc5b4 \ubaa8\ub4e0 State.value \uc0ac\uc6a9\uc774 \uc7ac\uad6c\uc131(recomposition)\ub41c\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>LiveData\uc5d0\uc11c \ub0b4\ubcf4\ub0b8 \uac12\uc774 null\uc77c \uc218 \uc788\uc73c\ubbc0\ub85c null \uac80\uc0ac\ub85c \ub798\ud551\ud574\uc11c \uc0ac\uc6a9\ud574\uc57c \ud55c\ub2e4. \uadf8\ub7ec\ud55c \uc774\uc720 \ubc0f \uc7ac\uc0ac\uc6a9\uc131\uc744 \uc704\ud574 LiveData \uc18c\ube44\ub97c \ubd84\ud560\ud558\uace0, \ub2e4\ub978 \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c \uc218\uc2e0\ud558\ub294 \uac83\uc774 \uc88b\uc740 \ud328\ud134\uc774\ub2e4. \ub530\ub77c\uc11c Plant \uc815\ubcf4\ub97c \ud45c\uc2dc\ud560 PlantDetailContent\ub77c\ub294 \uc0c8 \ucef4\ud3ec\uc800\ube14\uc744 \ub9cc\ub4e0\ub2e4.<\/p>\n\n\n\n<p>\uc704\uc758 \ub0b4\uc6a9\uc744 \uac10\uc548\ud560 \ub54c, LiveData \uad00\ucc30\uc744 \ucd94\uac00\ud55c \ud6c4 PlantDetailDescription.kt \ud30c\uc77c\uc758 \ubaa8\uc2b5\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">PlantDetailDescription.kt<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable\nfun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) {\n\u00a0 \u00a0 \/\/ ViewModel\uc758 LiveData&lt;Plant> \ud544\ub4dc\ub85c \ubd80\ud130 \ub4e4\uc5b4\uc624\ub294 \uac12\uc744 \uad00\ucc30\ud55c\ub2e4.\n\u00a0 \u00a0 val plant by plantDetailViewModel.plant.observeAsState()\n\n\u00a0 \u00a0 \/\/ plant\uac00 null\uc774 \uc544\ub2c8\uba74, \ub0b4\uc6a9\uc744 \ud45c\uc2dc\ud55c\ub2e4.\n\u00a0 \u00a0 plant?.let {\n\u00a0 \u00a0 \u00a0 \u00a0 PlantDetailContent(it)\n\u00a0 \u00a0 }\n}\n\n@Composable\nfun PlantDetailContent(plant: Plant) {\n\u00a0 \u00a0 PlantName(plant.name)\n}\n\n@Preview\n@Composable\nprivate fun PlantDetailContentPreview() {\n\u00a0 \u00a0 val plant = Plant(\"id\", \"Apple\", \"description\", 3, 30, \"\")\n\u00a0 \u00a0 MaterialTheme {\n\u00a0 \u00a0 \u00a0 \u00a0 PlantDetailContent(plant)\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n<p>PlantDetailContent\uac00 \ud604\uc7ac PlantName\uc744 \ud638\ucd9c\ud558\uae30 \ub54c\ubb38\uc5d0 PlantNamePreview\uc640 \ub3d9\uc77c\ud55c \ubbf8\ub9ac\ubcf4\uae30\uac00 \uc0dd\uae34\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-migration\/img\/3581b7b21b044e8d.png\" alt=\"3581b7b21b044e8d.png\"\/><\/figure>\n\n\n\n<p>\uc774\uc81c ViewModel\uc744 \uc5f0\uacb0\ud558\uc5ec Compose\uc5d0 \uc2dd\ubb3c \uc774\ub984\uc744 \ud45c\uc2dc\ud588\ub2e4. \ub2e4\uc74c \uba87 \uc139\uc158\uc5d0\uc11c\ub294 \ub098\uba38\uc9c0 \ucef4\ud3ec\uc800\ube14\uc744 \ube4c\ub4dc\ud558\uace0 \uc720\uc0ac\ud55c \ubc29\uc2dd\uc73c\ub85c ViewModel\uc5d0 \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc774\uc81c \uc81c\ubaa9\uc744 \ud654\uba74\uc5d0 \uc5f0\uacb0\ud574 \ubcf4\uc790. \uadf8\ub807\uac8c \ud558\ub824\uba74 PlantDetailViewModel\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \ub85c\ub4dc\ud574\uc57c \ud55c\ub2e4. \uc774\ub97c \uc704\ud574 \ucef4\ud3ec\uc988\ub294 ViewModel \ubc0f LiveData\uc5d0 \ub300\ud55c \ud1b5\ud569\uacfc \ud568\uaed8 \uc81c\uacf5\ub41c\ub2e4. ViewModel PlantDetailViewModel\uc758 \uc778\uc2a4\ud134\uc2a4\uac00 Fragment\uc5d0\uc11c \uc0ac\uc6a9\ub418\ubbc0\ub85c PlantDetailDescription\uc5d0 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ud560 \uc218 \uc788\ub2e4. Note: ViewModel\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uac70\ub098, \ud574\ub2f9 \uc885\uc18d\uc131\uc744 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc804\ub2ec\ud558\uace0 \uc2f6\uc9c0 \uc54a\uc740 \uacbd\uc6b0 \ucef4\ud3ec\uc800\ube14 \ub0b4\uc5d0\uc11c viewModel \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec ViewModel\uc758 [&hellip;]<\/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\/45780"}],"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=45780"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45780\/revisions"}],"predecessor-version":[{"id":45781,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45780\/revisions\/45781"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}