{"id":45673,"date":"2021-11-17T19:06:23","date_gmt":"2021-11-17T10:06:23","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45673"},"modified":"2021-11-17T19:59:42","modified_gmt":"2021-11-17T10:59:42","slug":"using-state-in-jetpack-compose-stateless-%ec%bb%b4%ed%8f%ac%ec%a0%80%eb%b8%94-%ec%9e%ac%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45673","title":{"rendered":"Using state in Jetpack Compose &#8211; Stateless \ucef4\ud3ec\uc800\ube14 \uc7ac\uc0ac\uc6a9\ud558\uae30"},"content":{"rendered":"\n<p>\ub4dc\ub514\uc5b4 \ub124\uc624-\ubaa8\ub358 \uc778\ud130\ub799\ud2f0\ube0c \ub514\uc790\uc778\uc744 \uad6c\ud604\ud560 \uc900\ube44\uac00 \ub418\uc5c8\ub2e4! \ucc38\uace0\ub85c, \uc6b0\ub9ac\uac00 \uad6c\ucd95\ud558\ub824\uace0 \ud558\ub294 \uac83\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-stateless-983dcedc61a76ae7-2.png\" alt=\"\" class=\"wp-image-45674\" width=\"436\" height=\"560\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-stateless-983dcedc61a76ae7-2.png 581w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-stateless-983dcedc61a76ae7-2-234x300.png 234w\" sizes=\"(max-width: 436px) 100vw, 436px\" \/><figcaption><strong>\ud3b8\uc9d1\ubaa8\ub4dc\uc5d0\uc11c\uc758 \ubaa9\uc5c5 \ub514\uc790\uc778<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">TodoScreen\uc5d0 state \ubc0f event \uc804\ub2ec\ud558\uae30<\/h2>\n\n\n\n<p>TodoViewModel\uc5d0\uc11c \uc774 \ud654\uba74\uc5d0 \ud544\uc694\ud55c \ubaa8\ub4e0 state\uc640 event \uc815\uc758\ub97c \ub05d\ub0c8\ub2e4. \uc774\uc81c TodoScreen\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec \ud654\uba74\uc744 \ud45c\uc2dc\ud558\ub294 \ub370 \ud544\uc694\ud55c state\uc640 event\ub97c \uac00\uc838\uc628\ub2e4.<\/p>\n\n\n\n<p><em>TodoScreen.kt<\/em>\ub97c \uc5f4\uace0 <em>TodoScreen<\/em>\uc758 \uba54\uc11c\ub4dc \uc2dc\uadf8\ub2c8\uccd0\ub97c \ubcc0\uacbd\ud558\uc5ec \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\n<ul><li>\ud604\uc7ac \ud3b8\uc9d1 \uc911\uc778 \ud56d\ubaa9: <em>currentEditing: TodoItem?<\/em><\/li><li>3\uac00\uc9c0 \uc0c8\ub85c\uc6b4 \uc774\ubca4\ud2b8\ub4e4:<br>&#8211; <em>onStartEdit: (TodoItem) -&gt; Unit<\/em><br>&#8211; <em>onEditItemChange: (TodoItem) -&gt; Unit<\/em><br>&#8211; <em>onEditDone: () -&gt; Unit<\/em><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoScreen(\n&nbsp; &nbsp;items: List&lt;TodoItem&gt;,\n&nbsp; &nbsp;currentlyEditing: TodoItem?,\n&nbsp; &nbsp;onAddItem: (TodoItem) -&gt; Unit,\n&nbsp; &nbsp;onRemoveItem: (TodoItem) -&gt; Unit,\n&nbsp; &nbsp;onStartEdit: (TodoItem) -&gt; Unit,\n&nbsp; &nbsp;onEditItemChange: (TodoItem) -&gt; Unit,\n&nbsp; &nbsp;onEditDone: () -&gt; Unit\n) {\n&nbsp; &nbsp;\/\/ ...\n}<\/code><\/pre>\n\n\n\n<p>\uc774\uac83\ub4e4\uc740 <em>ViewModel<\/em>\uc5d0\uc11c \ubc29\uae08 \uc815\uc758\ud55c \uc0c8\ub85c\uc6b4 state \ubc0f event\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>PreviewTodoScreen\uc740 \uc2dc\uadf8\ub2c8\uccd0\uac00\uac00 \ubcc0\uacbd\ub418\uc5b4 \ucef4\ud30c\uc77c\ub418\uc9c0 \uc54a\ub294\ub2e4.<\/p><p>TodoScreen\uc744 \ud638\ucd9c\ud558\ub294 \ubd80\ubd84\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ud558\ub3c4\ub85d \ud55c\ub2e4.<\/p><p><strong>TodoScreen(items, null, {}, {}, {}, {}, {})<\/strong><\/p><\/blockquote>\n\n\n\n<p>\uadf8\ub7f0\ub2e4\uc74c <em>TodoActivity.kt<\/em>\uc5d0\uc11c <em>TodoActivityScreen<\/em>\uc744 \ud638\ucd9c\ud558\ub294 \ucabd\uc5d0 \uc0c8\ub85c\uc6b4 \uac12\ub4e4\uc744 \uc804\ub2ec\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoActivity.kt<\/strong>\n@Composable\nprivate fun TodoActivityScreen(todoViewModel: TodoViewModel) {\n&nbsp; &nbsp;TodoScreen(\n&nbsp; &nbsp; &nbsp; &nbsp;items = todoViewModel.todoItems,\n&nbsp; &nbsp; &nbsp; &nbsp;currentlyEditing = todoViewModel.currentEditItem,\n&nbsp; &nbsp; &nbsp; &nbsp;onAddItem = todoViewModel::addItem,\n&nbsp; &nbsp; &nbsp; &nbsp;onRemoveItem = todoViewModel::removeItem,\n&nbsp; &nbsp; &nbsp; &nbsp;onStartEdit = todoViewModel::onEditItemSelected,\n&nbsp; &nbsp; &nbsp; &nbsp;onEditItemChange = todoViewModel::onEditItemChange,\n&nbsp; &nbsp; &nbsp; &nbsp;onEditDone = todoViewModel::onEditDone\n&nbsp; &nbsp;)\n}<\/code><\/pre>\n\n\n\n<p>\uc774\uac83\uc740 \uc0c8\ub85c\uc6b4 <em>TodoScreen<\/em>\uc5d0 \ud544\uc694\ud55c \uc0c1\ud0dc\uc640 \uc774\ubca4\ud2b8\ub97c \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\ucef4\ud3ec\uc800\ube14\uc5d0 \uc5ec\ub7ec\uac00\uc9c0 \uc778\uc790\uac00 \uc788\ub294 \uacbd\uc6b0, \uc774\ub984\uc774 \uc9c0\uc815\ub41c \uc778\uc790\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\uc778\ub77c\uc778 \uc5d0\ub514\ud130 \ucef4\ud3ec\uc800\ube14 \uc815\uc758\ud558\uae30<\/h2>\n\n\n\n<p>TodoScreen.kt\uc5d0\uc11c stateless \ucef4\ud3ec\uc800\ube14\uc778 TodoItemInput\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc778\ub77c\uc778 \uc5d0\ub514\ud130\ub97c \uc815\uc758\ud558\ub294 \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\uc800\ube14\uc744 \ub9cc\ub4e4\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemInlineEditor(\n&nbsp; &nbsp;item: TodoItem,\n&nbsp; &nbsp;onEditItemChange: (TodoItem) -&gt; Unit,\n&nbsp; &nbsp;onEditDone: () -&gt; Unit,\n&nbsp; &nbsp;onRemoveItem: () -&gt; Unit\n) = TodoItemInput(\n&nbsp; &nbsp;text = item.task,\n&nbsp; &nbsp;onTextChange = { onEditItemChange(item.copy(task = it)) },\n&nbsp; &nbsp;icon = item.icon,\n&nbsp; &nbsp;onIconChange = { onEditItemChange(item.copy(icon = it)) },\n&nbsp; &nbsp;submit = onEditDone,\n&nbsp; &nbsp;iconsVisible = true\n)<\/code><\/pre>\n\n\n\n<p>\uc774 \ucef4\ud3ec\uc800\ube14\uc740 stateless\ub2e4. \uc804\ub2ec\ub41c \uc544\uc774\ud15c\ub9cc \ud45c\uc2dc\ud558\uace0 event\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8\ub97c \uc694\uccad\ud55c\ub2e4. \uc774\uc804\uc5d0 stateless \ucef4\ud3ec\uc800\ube14\uc778 TodoItemInput\uc744 \ucd94\ucd9c\ud588\uae30 \ub54c\ubb38\uc5d0 \uc774 stateless \ubb38\ub9e5\uc5d0\uc11c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>copy(task = it) \ubc0f copy(icon = it) \uc774\ub780 \ubb34\uc5c7\uc77c\uae4c<\/p><p>\uc774\ub7ec\ud55c \ud568\uc218\ub4e4\uc740 data class\uc5d0 \uc788\ub294 \uac12\ub4e4\uc5d0 \ub300\ud574 \ucf54\ud2c0\ub9b0\uc774 \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ud558\ub294 \uac83\ub4e4\uc774\ub2e4. copy\ub97c \ud638\ucd9c\ud558\ub294 \uac83\uc740 \ubcc0\uacbd\ub41c \uc9c0\uc815\ub41c \ub9e4\uac1c\ubcc0\uc218\uc640 \ud568\uaed8 \ub370\uc774\ud130 \ud074\ub798\uc2a4\uc758 \ubcf5\uc0ac\ubcf8\uc744 \ub9cc\ub4e0\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>\uc774 \uc608\uc81c\ub294 stateless \ucef4\ud3ec\uc800\ube14\uc758 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ubcf4\uc5ec\uc900\ub2e4. \ube44\ub85d \ud5e4\ub354\uac00 \ub3d9\uc77c\ud55c \ud654\uba74\uc5d0\uc11c stateful\ud55c TodoItemEntryInput\uc744 \uc0ac\uc6a9\ud558\uc9c0\ub9cc, \uc778\ub77c\uc778 \ud3b8\uc9d1\uae30\ub97c \uc704\ud574 ViewModel\uae4c\uc9c0 state hoisting \ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Stateless \ucef4\ud3ec\uc800\ube14\uc740 \uc0c1\ud0dc\uac00 \uc800\uc7a5\ub418\ub294 \ubc29\uc2dd\uc73c\ub85c\ubd80\ud130 <strong>\ubd84\ub9ac\ub41c\ub2e4<\/strong>. <\/p><p>\uc774 \uc608\uc81c\uc5d0\uc11c, <strong>ViewModel<\/strong>\ub0b4 \ubaa9\ub85d \uc694\uc18c\ub85c <strong>TodoItemInlineEditor<\/strong>\uc5d0 \uc804\ub2ec\ub41c state\ub97c \uc720\uc9c0\ud558\uace0 \uc788\ub2e4. \uadf8\ub7ec\ub098 <strong>TodoItemInlineEditor<\/strong>\uc758 \ucf54\ub4dc\ub97c \ubcc0\uacbd\ud558\uc9c0 \uc54a\uace0\ub3c4 Room \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc800\uc7a5\ub418\ub3c4\ub85d \uc27d\uac8c \ubcc0\uacbd\ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">LazyColumn\ub0b4\uc758 \uc778\ub77c\uc778 \uc5d0\ub514\ud130 \uc0ac\uc6a9\ud558\uae30<\/h2>\n\n\n\n<p>TodoScreen\ub0b4 LazyColumn\uc5d0\uc11c \ud604\uc7ac \uc544\uc774\ud15c\uc774 \ud3b8\uc9d1 \uc911\uc774\uba74 TodoItemInlineEditor\ub97c \ud45c\uc2dc\ud558\uace0, \uadf8\ub807\uc9c0 \uc54a\uc73c\uba74 TodoRow\ub97c \ud45c\uc2dc\ud55c\ub2e4.<\/p>\n\n\n\n<p>\ub610\ud55c, \uc544\uc774\ud15c\uc744 \ud074\ub9ad\ud560 \ub54c \ud3b8\uc9d1\uc744 \uc2dc\uc791\ud55c\ub2e4. (\uc774\uc804\ucc98\ub7fc \uc81c\uac70\ud558\ub294 \ub300\uc2e0)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/TodoScreen.kt<\/strong>\n\n\/\/ fun TodoScreen()\n\/\/ ...\nLazyColumn(\n\u00a0 \u00a0modifier = Modifier.weight(1f),\n\u00a0 \u00a0contentPadding = PaddingValues(top = 8.dp)\n) { \n\u00a0items(items) { todo ->\n\u00a0 \u00a0<strong>if (currentlyEditing?.id == todo.id) {\n\u00a0 \u00a0 \u00a0 \u00a0TodoItemInlineEditor(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0item = currentlyEditing,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0onEditItemChange = onEditItemChange,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0onEditDone = onEditDone,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0onRemoveItem = { onRemoveItem(todo) }\n\u00a0 \u00a0 \u00a0 \u00a0)\n\u00a0 \u00a0} <\/strong>else {\n\u00a0 \u00a0 \u00a0 \u00a0TodoRow(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0todo,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0{ <strong>onStartEdit(it)<\/strong> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Modifier.fillParentMaxWidth()\n\u00a0 \u00a0 \u00a0 \u00a0)\n\u00a0 \u00a0}\n\u00a0}\n}\n\/\/ ...<\/code><\/pre>\n\n\n\n<p>LazyColumn \ucef4\ud3ec\uc800\ube14\uc740 RecyclerView\uc640 \ub3d9\ub4f1\ud558\ub2e4. \ud604\uc7ac \ud654\uba74\uc744 \ud45c\uc2dc\ud558\ub294 \ub370 \ud544\uc694\ud55c \ubaa9\ub85d\uc758 \uc544\uc774\ud15c\ub9cc \uc7ac\uad6c\uc131\ud558\uace0 \uc0ac\uc6a9\uc790\uac00 \uc2a4\ud06c\ub864\ud560 \ub54c \ud654\uba74\uc744 \ub5a0\ub09c \ucef4\ud3ec\uc800\ube14\ub4e4\uc744 \uc0ad\uc81c\ud558\uace0 \uc2a4\ud06c\ub864\ub418\ub294 \uc694\uc18c\uc5d0 \ub300\ud574 \uc0c8 \ucef4\ud3ec\uc800\ube14\uc744 \ub9cc\ub4e0\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>LazyColumn\uc740 \ud070 \uc544\uc774\ud15c \ubaa9\ub85d\uc744 \ud45c\uc2dc\ud558\uae30 \uc704\ud55c \uac83\uc774\ub2e4.<\/p><p>\ud604\uc7ac \ud654\uba74\uc5d0 \uc788\ub294 \uc544\uc774\ud15c\ub9cc \uad6c\uc131\ud558\uace0 \ud654\uba74\uc744 \ub5a0\ub098\ub294 \uc989\uc2dc \ud3d0\uae30\ud55c\ub2e4. RecyclerView\uc640 \ub2ec\ub9ac \uc7ac\ud65c\uc6a9\uc744 \ud560 \ud544\uc694\uac00 \uc5c6\ub2e4. \ucef4\ud3ec\uc988\ub294 \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\uc800\ube14 \uc0dd\uc131\uc744 \ubcf4\ub2e4 \ud6a8\uc728\uc801\uc778 \ubc29\uc2dd\uc73c\ub85c \ucc98\ub9ac\ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\uc0c8 \ub300\ud654\ud615 \uc5d0\ub514\ud130 \uc2dc\ub3c4\ud574\ubcf4\uae30<\/h2>\n\n\n\n<p>\uc571\uc744 \ub2e4\uc2dc \uc2e4\ud589\ud558\uace0 todo \ud589\uc744 \ud074\ub9ad\ud558\uba74 \ub300\ud654\ud615 \ud3b8\uc9d1\uae30\uac00 \uc5f4\ub9b0\ub2e4. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-stateless-d4f4819532dfd5f9.png\" alt=\"\" class=\"wp-image-45675\" width=\"391\" height=\"464\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-stateless-d4f4819532dfd5f9.png 521w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-stateless-d4f4819532dfd5f9-253x300.png 253w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/figure>\n\n\n\n<p>stateful \ud5e4\ub354\uc640 \ub300\ud654\ud615 \ud3b8\uc9d1 \ud658\uacbd\uc744 \ubaa8\ub450 \uadf8\ub9ac\uae30 \uc704\ud574 \ub3d9\uc77c\ud55c stateless UI \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4. \uadf8\ub9ac\uace0 \uadf8\ub807\uac8c \ud558\ub294 \ub3d9\uc548 \uc5b4\ub5a0\ud55c \uc911\ubcf5\ub41c state\ub3c4 \ub3c4\uc785\ud558\uc9c0 \uc54a\uc558\ub2e4.<\/p>\n\n\n\n<p>Add \ubc84\ud2bc\uc774 \uc5b4\uc6b8\ub9ac\uc9c0 \uc54a\uc544 \ud5e4\ub354\ub97c \ubcc0\uacbd\ud574\uc57c \ud558\uc9c0\ub9cc, \uc774\ubbf8, \uc774 \uae30\ub2a5\uc774 \uacb0\ud569\ub418\uae30 \uc2dc\uc791\ud588\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\ub4e4\uc5d0\uc11c \ub514\uc790\uc778\uc744 \uc644\ub8cc\ud558\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\uc774\ud6c4 \ub2e8\uacc4\uc5d0\uc11c \ubc84\ud2bc \ub514\uc790\uc778\uc744 \uc644\ub8cc\ud560 \uac83\uc774\ub2c8. \uc9c0\uae08 \ub2f9\uc7a5\uc740 &#8220;Add&#8221; \ud14d\uc2a4\ud2b8\uac00 \uc788\ub294 \ubc84\ud2bc\uc744 \uadf8\ub300\ub85c \ub458 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\ud3b8\uc9d1\uc2dc \ud5e4\ub354 \uad50\uccb4\ud558\uae30<\/h2>\n\n\n\n<p>\ub2e4\uc74c\uc73c\ub85c \ud5e4\ub354 \ub514\uc790\uc778\uc744 \ub9c8\uce58\uace0, \ub514\uc790\uc774\ub108\uac00 \ub124\uc624-\ubaa8\ub358 \uc778\ud130\ub799\ud2f0\ube0c \ub514\uc790\uc778\uc744 \uc6d0\ud558\ub294 \uc774\ubaa8\ud2f0\ucf58 \ubc84\ud2bc\uc73c\ub85c \ubc84\ud2bc\uc744 \uad50\uccb4\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n<p>TodoScreen \ucef4\ud3ec\uc800\ube14\ub85c \ub3cc\uc544\uac00, \ud5e4\ub354\uac00 \uc5d0\ub514\ud130 state\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc5d0 \uc751\ub2f5\ud558\ub3c4\ub85d \ud55c\ub2e4. currentlyEditing\uc774 null\uc774\uba74, TodoItemEntryInput\uc744 \ud45c\uc2dc\ud558\uace0, elevation = true\ub97c TodoItemInputBackground\uc5d0 \uc804\ub2ec\ud55c\ub2e4. currentlyEditing\uc774 null\uc774 \uc544\ub2cc\uacbd\uc6b0, elevation = false\ub97c TodoItemInputBackground\uc5d0 \uc804\ub2ec\ud558\uace0 \ub3d9\uc77c\ud55c \ubc30\uacbd\uc5d0 &#8220;Editing item&#8221;\uc774\ub77c\ub294 \ud14d\uc2a4\ud2b8\ub97c \ub098\ud0c0\ub0b8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoScreen.kt\n<\/strong>@Composable\nfun TodoScreen(\n\u00a0 \u00a0items: List&lt;TodoItem>,\n\u00a0 \u00a0currentlyEditing: TodoItem?,\n\u00a0 \u00a0onAddItem: (TodoItem) -> Unit,\n\u00a0 \u00a0onRemoveItem: (TodoItem) -> Unit,\n\u00a0 \u00a0onStartEdit: (TodoItem) -> Unit,\n\u00a0 \u00a0onEditItemChange: (TodoItem) -> Unit,\n\u00a0 \u00a0onEditDone: () -> Unit\n) {\n\u00a0 \u00a0Column {\n\u00a0 \u00a0 \u00a0 \u00a0<strong>val enableTopSection = currentlyEditing == null<\/strong>\n\u00a0 \u00a0 \u00a0 \u00a0TodoItemInputBackground(elevate = enableTopSection) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0if (<strong>enableTopSection<\/strong>) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0TodoItemEntryInput(onAddItem)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0} else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<strong>Text(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\"Editing item\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0style = MaterialTheme.typography.h6,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0textAlign = TextAlign.Center,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0modifier = Modifier\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0.align(Alignment.CenterVertically)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0.padding(16.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0.fillMaxWidth()\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0)<\/strong>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0 \u00a0 \/\/ ..<\/code><\/pre>\n\n\n\n<p>\ub2e4\uc2dc \ud55c\ubc88 \uc6b0\ub9ac\ub294 \uc7ac\uad6c\uc131\uc2dc\uc5d0 \ucef4\ud3ec\uc988 \ud2b8\ub9ac\ub97c \ubcc0\uacbd\ud558\uace0 \uc788\ub2e4. \uc0c1\ub2e8 \uc139\uc158\uc774 \ud65c\uc131\ud654\ub418\uba74 TodoItemEntryInput\uc744 \ud45c\uc2dc\ud558\uace0, \uadf8\ub807\uc9c0 \uc54a\uc73c\uba74 &#8220;Editing item&#8221;\uc744 \ud45c\uc2dc\ud558\ub294 \ud14d\uc2a4\ud2b8 \ucef4\ud3ec\uc800\ube14\uc744 \ud45c\uc2dc\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc2dc\uc791 \ucf54\ub4dc\uc5d0 \uc788\ub358 TodoItemInputBackground\ub294 \uc0ac\uc774\uc988 \uc870\uc815\uacfc elevation \ubcc0\uacbd\uc5d0 \uc790\ub3d9\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4. \ub530\ub77c\uc11c \ud3b8\uc9d1 \ubaa8\ub4dc\uc5d0 \ub4e4\uc5b4\uac08 \ub54c, \uc774 \ucf54\ub4dc\ub294 state\ub4e4 \uc0ac\uc774\uc5d0\uc11c \uc790\ub3d9\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc571 \ub2e4\uc2dc \uc2dc\uc791\ud558\uae30<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-stateless-4e5e5a27e063e67a.gif\" alt=\"\" class=\"wp-image-45677\" width=\"275\" height=\"323\"\/><\/figure>\n\n\n\n<p>\uc571\uc744 \ub2e4\uc2dc \uc2e4\ud589\ud558\uba74, \ud3b8\uc9d1 \uc911\uc774 \uc544\ub2cc \uc0c1\ud0dc \uc0ac\uc774\uc5d0\uc11c \uc571\uc774 \uc6c0\uc9c1\uc774\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4. \uc6b0\ub9ac\ub294 \uc774 \ub514\uc790\uc778\uc744 \uac70\uc758 \uc644\uc131\ud588\ub2e4.<\/p>\n\n\n\n<p>\ub2e4\uc74c \uc139\uc158\uc5d0\uc11c\ub294 \uc774\ubaa8\ud2f0\ucf58 \ubc84\ud2bc\uc758 \ucf54\ub4dc\uc5d0 \ub300\ud574 \uad6c\uc870\ud654\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ub4dc\ub514\uc5b4 \ub124\uc624-\ubaa8\ub358 \uc778\ud130\ub799\ud2f0\ube0c \ub514\uc790\uc778\uc744 \uad6c\ud604\ud560 \uc900\ube44\uac00 \ub418\uc5c8\ub2e4! \ucc38\uace0\ub85c, \uc6b0\ub9ac\uac00 \uad6c\ucd95\ud558\ub824\uace0 \ud558\ub294 \uac83\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4. TodoScreen\uc5d0 state \ubc0f event \uc804\ub2ec\ud558\uae30 TodoViewModel\uc5d0\uc11c \uc774 \ud654\uba74\uc5d0 \ud544\uc694\ud55c \ubaa8\ub4e0 state\uc640 event \uc815\uc758\ub97c \ub05d\ub0c8\ub2e4. \uc774\uc81c TodoScreen\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec \ud654\uba74\uc744 \ud45c\uc2dc\ud558\ub294 \ub370 \ud544\uc694\ud55c state\uc640 event\ub97c \uac00\uc838\uc628\ub2e4. TodoScreen.kt\ub97c \uc5f4\uace0 TodoScreen\uc758 \uba54\uc11c\ub4dc \uc2dc\uadf8\ub2c8\uccd0\ub97c \ubcc0\uacbd\ud558\uc5ec \ucd94\uac00\ud558\uc790. \ud604\uc7ac \ud3b8\uc9d1 \uc911\uc778 \ud56d\ubaa9: currentEditing: [&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\/45673"}],"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=45673"}],"version-history":[{"count":3,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45673\/revisions"}],"predecessor-version":[{"id":45681,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45673\/revisions\/45681"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}