{"id":45667,"date":"2021-11-17T10:50:37","date_gmt":"2021-11-17T01:50:37","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45667"},"modified":"2021-11-17T10:50:39","modified_gmt":"2021-11-17T01:50:39","slug":"using-state-in-jetpack-compose-viewmodel%ec%97%90%ec%84%9c-state-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45667","title":{"rendered":"Using state in Jetpack Compose &#8211; ViewModel\uc5d0\uc11c state \uc0ac\uc6a9\ud558\uae30"},"content":{"rendered":"\n<p>\uc6b0\ub9ac \ub514\uc790\uc774\ub108\uc758 \ub124\uc624 \ubaa8\ub358 \uc778\ud130\ub799\ud2f0\ube0c \ubaa8\uc758\ub97c \ub9ac\ubdf0\uc911, \ud604\uc7ac \ud3b8\uc9d1\ud558\ub294 \uc544\uc774\ud15c\uc744 \ub098\ud0c0\ub0b4\ub294 \uba87\uac00\uc9c0 \uc0c1\ud0dc \ucd94\uac00\uac00 \ud544\uc694\ud574\uc84c\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-viewmodel-state-983dcedc61a76ae7-1.png\" alt=\"\" class=\"wp-image-45668\" width=\"436\" height=\"560\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-viewmodel-state-983dcedc61a76ae7-1.png 581w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-viewmodel-state-983dcedc61a76ae7-1-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<p>\uc774\uc81c \uc774 \uc5d0\ub514\ud130\uc758 \uc0c1\ud0dc\ub97c \ucd94\uac00\ud560 \uc704\uce58\ub97c \uacb0\uc815\ud574\uc57c \ud55c\ub2e4. \uc544\uc774\ud15c \ub098\ud0c0\ub0b4\uac70\ub098 \ud3b8\uc9d1\uc744 \ucc98\ub9ac\ud558\ub294 \ub610 \ub2e4\ub978 stateful \ucef4\ud3ec\uc800\ube14\uc778 <em>&#8220;TodoRowOrInlineEditor&#8221;<\/em>\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc9c0\ub9cc, \ud55c \ubc88\uc5d0 \ud558\ub098\uc758 \uc5d0\ub514\ud130\ub9cc \ud45c\uc2dc\ud558\ub824\uace0 \ud55c\ub2e4. \ub514\uc790\uc778\uc744 \uc790\uc138\ud788 \ubcf4\uba74 \ud3b8\uc9d1 \ubaa8\ub4dc\uc5d0\uc11c\ub3c4 \uc0c1\ub2e8 \uc139\uc158\uc774 \ubcc0\uacbd\ub418\uace0 \uc788\ub2e4. \ub530\ub77c\uc11c \uc0c1\ud0dc\ub97c \uacf5\uc720\ud560 \uc218 \uc788\ub3c4\ub85d state hoisting\uc744 \uc218\ud589\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"617\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-viewmodel-state-cb2036bb21fbb712-1024x617.png\" alt=\"\" class=\"wp-image-45669\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-viewmodel-state-cb2036bb21fbb712-1024x617.png 1024w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-viewmodel-state-cb2036bb21fbb712-300x181.png 300w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-viewmodel-state-cb2036bb21fbb712-768x462.png 768w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-viewmodel-state-cb2036bb21fbb712.png 1264w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><strong>TodoActivity state \ud2b8\ub9ac<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p><em>TodoItemEntryInput<\/em>\uacfc <em>TodoInlineEditor<\/em>\ub294 \ubaa8\ub450 \ud654\uba74 \uc0c1\ub2e8\uc5d0\uc11c \uc785\ub825\uc744 \uc228\uae38 \uc218 \uc788\ub3c4\ub85d \ud604\uc7ac \uc5d0\ub514\ud130 \uc0c1\ud0dc\uc5d0 \ub300\ud574 \uc54c\uc544\uc57c \ud558\ubbc0\ub85c \uc0c1\ud0dc\ub97c \ucd5c\uc18c\ud55c <em>TodoScreen<\/em>\uc73c\ub85c \ud638\uc774\uc2a4\ud2b8\ud574\uc57c\ud55c\ub2e4. \ud654\uba74\uc740 \ud3b8\uc9d1\uc5d0 \ub300\ud574 \uc54c\uc544\uc57c \ud558\ub294 \ubaa8\ub4e0 \ucef4\ud3ec\uc800\ube14\uc758 \uacf5\ud1b5 \uc0c1\uc704 \uc694\uc18c\uc774\uba70, \uacc4\uce35 \uad6c\uc870\uc5d0\uc11c \uac00\uc7a5 \ub0ae\uc740 \uc218\uc900\uc758 \ucef4\ud3ec\uc800\ube14\uc774\ub2e4. <\/p>\n\n\n\n<p>\uadf8\ub7ec\ub098 \uc5d0\ub514\ud130\ub294 \ubaa9\ub85d\uc5d0\uc11c \ud30c\uc0dd\ub418\uace0, \ubaa9\ub85d\uc744 \ubcc0\uacbd\ud560 \uac83\uc774\uae30 \ub54c\ubb38\uc5d0 \uc2e4\uc81c\ub85c\ub294 \ubaa9\ub85d \uc606\uc5d0 \uc788\uc5b4\uc57c \ud55c\ub2e4. state\ub97c \uc218\uc815\ud560 \uc218 \uc788\ub294 \uc218\uc900\uc73c\ub85c \ub04c\uc5b4 \uc62c\ub9ac\uace0 \uc2f6\ub2e4. \ubaa9\ub85d\uc740 <em>TodoViewModel<\/em>\uc5d0 \uc788\uae30 \ub54c\ubb38\uc5d0 \uadf8\uacf3\uc5d0 \ucd94\uac00\ud560 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\uc0c1\ud0dc\ub97c \ub04c\uc5b4\uc62c\ub9b4 \ub54c, \uadf8\uac83\uc774 \uc5b4\ub514\ub85c \uac00\uc57c\ud558\ub294\uc9c0 \uc54c \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 3\uac00\uc9c0 \uaddc\uce59\uc774 \uc788\ub2e4.<\/p><p>1. state\ub294 state\ub97c \uc77d\uac70\ub098 \uc0ac\uc6a9\ud558\ub294 \ubaa8\ub4e0 \ucef4\ud3ec\uc800\ube14 \uc911 \ucd5c\uc18c\ud55c <strong>\uac00\uc7a5 \ub0ae\uc740 \uacf5\ud1b5 \ubd80\ubaa8<\/strong>\ub85c hoisting \ud55c\ub2e4.<\/p><p>2. state\ub294 \ubcc0\uacbd \ub610\ub294 \uc218\uc815 \ub420 \uc218 \uc788\ub294 \ucd5c\uc18c\ud55c \uac00\uc7a5 \ub192\uc740 \uc218\uc900\uc73c\ub85c hoisting \ud55c\ub2e4.<\/p><p>3. \ub3d9\uc77c\ud55c event\uc5d0 \ub300\ud55c \uc751\ub2f5\uc73c\ub85c \ub450 state\uac00 \ubcc0\uacbd\ub418\uba74 \ud568\uaed8 hoisting\ub418\uc5b4\uc57c \ud55c\ub2e4.<\/p><p>\uc774\ub7ec\ud55c \uaddc\uce59\uc774 \uc694\uad6c\ud558\ub294 \uac83\ubcf4\ub2e4 \ub354 \ub192\uc740 \uc218\uc900\uc73c\ub85c state\ub97c hoisting\ud560 \uc218 \uc788\uc9c0\ub9cc state\ub97c \ub0ae\uc740 \uc218\uc900\uc73c\ub85c hoisting\ud558\uba74 \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc744 \ub530\ub974\uae30\uac00 \uc5b4\ub835\uac70\ub098 \ubd88\uac00\ub2a5\ud558\uac8c \ub41c\ub2e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">TodoViewModel\uc744 \ubcc0\ud658\ud558\uc5ec mutableStateListOf\ub97c \uc0ac\uc6a9\ud558\uae30<\/h2>\n\n\n\n<p>\uc774 \uc139\uc158\uc5d0\uc11c <em>TodoViewModel<\/em>\ub0b4 \uc5d0\ub514\ud130\uc5d0 \ub300\ud55c state\ub97c \ucd94\uac00\ud574\ubcf4\ub3c4\ub85d \ud558\uc790. \uadf8\ub9ac\uace0 \ub2e4\uc74c \uc139\uc158\uc5d0\uc11c \uc774\ub97c \uc774\uc6a9\ud558\uc5ec inline \uc5d0\ub514\ud130\ub97c \ub9cc\ub4e4\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n<p>\uadf8\uc640 \ub3d9\uc2dc\uc5d0, \uc6b0\ub9ac\ub294 <em>ViewModel<\/em>\uc5d0 \uc788\ub294 <em>mutableStateListOf<\/em>\uc5d0 \ub300\ud574\uc11c \uc54c\uc544\ubcf4\uace0, \ucef4\ud3ec\uc988\ub97c \ubaa9\ud45c\ub85c \ud588\uc744 \ub54c <em>LiveData&lt;List><\/em>\uc640 \ube44\uad50\ud574\uc11c state \ucf54\ub4dc\uac00 \uc5bc\ub9c8\ub098 \ub2e8\uc21c\ud574\uc9c0\ub294\uc9c0 \uc0b4\ud3b4\ubcf8\ub2e4.<\/p>\n\n\n\n<p><em>mutableStateListOf<\/em>\uc740 \uad00\ucc30\uac00\ub2a5\ud55c <em>MutableList<\/em> \uc778\uc2a4\ud134\uc2a4\ub97c \uc0dd\uc131\ud558\ub3c4\ub85d \ud55c\ub2e4. \uc774\uac83\uc740 \uc6b0\ub9ac\uac00 MutableList\ub85c \uc791\uc5c5\ud558\ub294 \uac83\uacfc \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c todoItems\ub85c \uc791\uc5c5\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc744 \uc758\ubbf8\ud558\uba70, <em>LiveData&lt;List><\/em> \uc791\uc5c5\uc758 \uc624\ubc84\ud5e4\ub4dc\ub97c \uc81c\uac70\ud55c\ub2e4.<\/p>\n\n\n\n<p><em>TodoViewModel.kt<\/em>\ub97c \uc5f4\uace0 \uae30\uc874 <em>todoItems<\/em>\ub97c <em>mutableStateListOf<\/em>\ub85c \ub300\uccb4\ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoViewModel.kt<\/strong>\nclass TodoViewModel : ViewModel() {\n\n\u00a0 \u00a0\/\/ remove the LiveData and replace it with a mutableStateListOf\n\u00a0 \u00a0\/\/private var _todoItems = MutableLiveData(listOf&lt;TodoItem>())\n\u00a0 \u00a0\/\/val todoItems: LiveData&lt;List&lt;TodoItem>> = _todoItems\n\n\u00a0 \u00a0\/\/ state: todoItems\n\u00a0 \u00a0<strong>var todoItems = mutableStateListOf&lt;TodoItem>()\n\u00a0 \u00a0 private set<\/strong>\n\n\u00a0 \u00a0\/\/ event: addItem\n\u00a0 \u00a0fun addItem(item: TodoItem) {\n\u00a0 \u00a0 \u00a0 \u00a0 <strong>todoItems.add(item)<\/strong>\n\u00a0 \u00a0}\n\n\u00a0 \u00a0\/\/ event: removeItem\n\u00a0 \u00a0fun removeItem(item: TodoItem) {\n\u00a0 \u00a0 \u00a0 \u00a0<strong>todoItems.remove(item)<\/strong>\n\u00a0 \u00a0}\n}<\/code><\/pre>\n\n\n\n<p><em>todoItems<\/em> \uc120\uc5b8\uc740 \uc9e7\uace0, <em>LiveData<\/em> \ubc84\uc804\uacfc \ub3d9\uc77c\ud55c \ub3d9\uc791\uc744 \uac16\ub294\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ state: todoItems<br>var todoItems = mutableStateListOf&lt;TodoItem&gt;()<br>&nbsp; &nbsp; private set<\/code><\/pre>\n\n\n\n<p><em>private set<\/em>\uc744 \uc9c0\uc815\ud568\uc73c\ub85c\uc368 \uc6b0\ub9ac\ub294 <em>ViewModel<\/em> \ub0b4\ubd80\uc5d0\uc11c\ub9cc \ubcfc \uc218 \uc788\ub294 private setter\ub85c \uc774 state \uac1d\uccb4\uc5d0 \ub300\ud55c \uc4f0\uae30\ub97c \uc81c\ud55c\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>mutableStateListOf \ubc0f MutableState\ub85c \uc218\ud589\ub41c \uc791\uc5c5\uc740 Compose\ub97c \uc704\ud574 \uc758\ub3c4\ub41c \uac83\uc774\ub2e4. \uc774 ViewModel\uc774 View \uc2dc\uc2a4\ud15c\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ub41c \uacbd\uc6b0 LiveData\ub97c \uacc4\uc18d \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\uc0c8\ub85c\uc6b4 ViewModel\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 TodoActivityScreen \uc5c5\ub370\uc774\ud2b8 \ud558\uae30<\/h2>\n\n\n\n<p><em>TodoActivity.kt<\/em>\ub97c \uc5f4\uace0 <em>TodoActivityScreen<\/em>\uc744 \uc218\uc815\ud558\uc5ec \uc0c8\ub85c\uc6b4 <em>ViewModel<\/em>\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoActivity.kt<\/strong>\n@Composable\nprivate fun TodoActivityScreen(todoViewModel: TodoViewModel) {\n\u00a0 \u00a0TodoScreen(\n\u00a0 \u00a0 \u00a0 \u00a0items = todoViewModel.todoItems,\n\u00a0 \u00a0 \u00a0 \u00a0onAddItem = todoViewModel::addItem,\n\u00a0 \u00a0 \u00a0 \u00a0onRemoveItem = todoViewModel::removeItem\n\u00a0 \u00a0)\n}<\/code><\/pre>\n\n\n\n<p>\uc571\uc744 \ub2e4\uc2dc \uc2e4\ud589\ud558\uba74 \uc0c8 ViewModel\uacfc \ud568\uaed8 \uc791\ub3d9\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4. <em>mutableStateListOf<\/em>\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud588\ub2e4. \uc774\uc81c \uc5d0\ub514\ud130 \uc0c1\ud0dc\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc5d0\ub514\ud130 \uc0c1\ud0dc \uc815\uc758\ud558\uae30<\/h2>\n\n\n\n<p>\uc774\uc81c \uc5d0\ub514\ud130\uc758 \uc0c1\ud0dc\ub97c \ucd94\uac00\ud560 \ucc28\ub840\ub2e4. todo text\uac00 \uc911\ubcf5\ub418\ub294 \uac83\uc744 \ubc29\uc9c0\ud558\uae30 \uc704\ud574 \ubaa9\ub85d\uc744 \uc9c1\uc811 \ud3b8\uc9d1\ud560 \uac83\uc774\ub2e4. \uadf8\ub807\uac8c \ud558\ub824\uba74 \ud604\uc7ac \ud3b8\uc9d1 \uc911\uc778 text\ub97c \uc720\uc9c0\ud558\ub294 \ub300\uc2e0 \ud604\uc7ac \uc5d0\ub514\ud130 \ud56d\ubaa9\uc5d0 \ub300\ud55c \ubaa9\ub85d \uc778\ub371\uc2a4\ub97c \uc720\uc9c0\ud55c\ub2e4.<\/p>\n\n\n\n<p><em>TodoViewModel.kt<\/em>\ub97c \uc5f4\uace0 \uc5d0\ub514\ud130 \uc0c1\ud0dc\ub97c \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\n<p>\ud604\uc7ac \ud3b8\uc9d1\ud558\uace0 \uc788\ub294 \ud3ec\uc9c0\uc158 \uc815\ubcf4\ub97c \uac00\uc9c0\ub294 \uc0c8\ub85c\uc6b4 <em>private var currentEditPosition<\/em>\ub97c \uc815\uc758\ud55c\ub2e4. \ud604\uc7ac \uc218\uc815\ud558\uace0 \uc788\ub294 \ubaa9\ub85d \uc778\ub371\uc2a4\ub97c \uac16\uac8c \ub420 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p>\uadf8\ub7f0 \ub4a4, <em>currentEditItem<\/em>\uc744 \ub178\ucd9c\uc2dc\ucf1c \ucef4\ud3ec\uc988\uac00 getter\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud55c\ub2e4. \ube44\ub85d \uc77c\ubc18\uc801\uc778 \ucf54\ud2c0\ub9b0 \ud568\uc218\uc9c0\ub9cc <em>currentEditPosition<\/em>\uc740 <em>State&lt;TodoItem><\/em>\uacfc \uac19\uc740 \ucef4\ud3ec\uc988\uc5d0\uc11c \uad00\ucc30\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoViewModel.kt<\/strong>\nclass TodoViewModel : ViewModel() {\n\n\u00a0 \u00a0\/\/ private state\n\u00a0 \u00a0private var currentEditPosition by mutableStateOf(-1)\n\n\u00a0 \u00a0 \/\/ state: todoItems\n\u00a0 \u00a0 var todoItems = mutableStateListOf&lt;TodoItem>()\n\u00a0 \u00a0 \u00a0 \u00a0 private set\n\n\u00a0 \u00a0\/\/ state\n\u00a0 \u00a0val currentEditItem: TodoItem?\n\u00a0 \u00a0 \u00a0 \u00a0get() = todoItems.getOrNull(currentEditPosition)\n\n\u00a0 \u00a0\/\/ ..<\/code><\/pre>\n\n\n\n<p>\ucef4\ud3ec\uc800\ube14\uc774 currentEditItem\uc744 \ud638\ucd9c\ud560 \ub54c\ub9c8\ub2e4, todoItems \ubc0f currentEditPosition \ub458\uc758 \ubcc0\uacbd\uc0ac\ud56d\uc744 \uad00\ucc30\ud558\uac8c \ub41c\ub2e4. \ub458\uc911 \ud558\ub098\uac00 \ubcc0\uacbd\ub418\uba74 \ucef4\ud3ec\uc800\ube14\uc740 getter\ub97c \ub2e4\uc2dc \ud638\ucd9c\ud558\uc5ec \uc0c8\ub85c\uc6b4 \uac12\uc744 \uac00\uc838\uc628\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>State&lt;T> \ubcc0\ud658\uc740 \uc77c\ubc18\uc801\uc778 \ucf54\ud2c0\ub9b0 \ucf54\ub4dc\ub2e4.<\/p><p>\ucef4\ud3ec\uc988\ub294 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc758\ud574 \ud638\ucd9c\ub41c \uc77c\ubc18 Kotlin \ud568\uc218\uc5d0\uc11c \uc77d\uae30\uac00 \ubc1c\uc0dd\ud558\ub354\ub77c\ub3c4, \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c \uc77d\uc740 \ubaa8\ub4e0 State&lt;T>\ub97c \uad00\ucc30\ud55c\ub2e4. \uc5ec\uae30\uc5d0\uc11c\ub294 currentEditItem\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 currentEditPosition \ubc0f todoItems\uc5d0\uc11c \uc77d\uc5b4\uc624\uace0 \uc788\ub2e4. \ucef4\ud3ec\uc988\ub294 \ubcc0\uacbd\uc0ac\ud56d\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 currentEditItem\uc744 \uc77d\ub294 \ucef4\ud3ec\uc800\ube14\uc744 \uc7ac\uad6c\uc131\ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>State&lt;T> \ubcc0\ud658\uc774 \uc791\ub3d9\ud558\ub824\uba74, \ubc18\ub4dc\uc2dc State&lt;T> \uac1d\uccb4\uc5d0\uc11c state\ub97c \uc77d\uc5b4\uc57c \ud55c\ub2e4.<\/p><p>currentEditPosition\uc744 \uc77c\ubc18 Int(private var currentEditPosition = -1)\ub85c \uc815\uc758\ud55c \uacbd\uc6b0 compose\ub294 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uad00\ucc30\ud560 \uc218 \uc5c6\ub2e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\uc5d0\ub514\ud130 \uc774\ubca4\ud2b8 \uc815\uc758\ud558\uae30<\/h2>\n\n\n\n<p>\uc5d0\ub514\ud130 \uc0c1\ud0dc\ub97c \uc815\uc758\ud588\uc73c\ubbc0\ub85c, \uc774\uc81c \ucef4\ud3ec\uc800\ube14\uc774 \ud3b8\uc9d1\uc744 \uc81c\uc5b4\ud558\uae30 \uc704\ud574 \ud638\ucd9c\ud560 \uc218 \uc788\ub294 event\ub97c \uc815\uc758\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p>3\uac00\uc9c0 event\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n<ul><li>onEditItemSelected(item:TodoItem)<\/li><li>onEditDone()<\/li><li>onEditItemChange(item:TodoItem)<\/li><\/ul>\n\n\n\n<p>onEditITemSelected \ubc0f onEditDone\uc740 \ub2e8\uc9c0 currentEditPosition\uc744 \ubcc0\uacbd\ud55c\ub2e4. \ubcc0\uacbd\ub41c currentEditPosition\uc5d0 \uc758\ud574, \ucef4\ud3ec\uc988\ub294 currentEditItem\uc744 \uc77d\ub294 \uc5b4\ub5a0\ud55c \ucef4\ud3ec\uc800\ube14\uc744 \uc7ac\uad6c\uc131\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoViewModel.kt<\/strong>\nclass TodoViewModel : ViewModel() {\n\u00a0 \u00a0...\n\n\u00a0 \u00a0\/\/ event: onEditItemSelected\n\u00a0 \u00a0fun onEditItemSelected(item: TodoItem) {\n\u00a0 \u00a0 \u00a0 currentEditPosition = todoItems.indexOf(item)\n\u00a0 \u00a0}\n\n\u00a0 \u00a0\/\/ event: onEditDone\n\u00a0 \u00a0fun onEditDone() {\n\u00a0 \u00a0 \u00a0 currentEditPosition = -1\n\u00a0 \u00a0}\n\n\u00a0 \u00a0\/\/ event: onEditItemChange\n\u00a0 \u00a0fun onEditItemChange(item: TodoItem) {\n\u00a0 \u00a0 \u00a0 val currentItem = requireNotNull(currentEditItem)\n\u00a0 \u00a0 \u00a0 require(currentItem.id == item.id) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"You can only change an item with the same id as currentEditItem\"\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 todoItems&#91;currentEditPosition] = item\n\u00a0 \u00a0}\n}<\/code><\/pre>\n\n\n\n<p>onEditItemChange \uc774\ubca4\ud2b8\ub294 currentEditPosition\uc744 \uc778\ub371\uc2a4\ub85c \ud558\ub294 \ubaa9\ub85d\uc5d0\uc11c \uc5c5\ub370\uc774\ud2b8 \ud55c\ub2e4. \uc774\ub294 currentEditItem\uacfc todoItems\uc5d0 \uc758\ud574 \ub3d9\uc2dc\uc5d0 \ubc18\ud658\ub41c \uac12\uc744 \ubaa8\ub450 \ubcc0\uacbd\ud55c\ub2e4. \uadf8\ub807\uac8c \ub418\uae30 \uc804\uc5d0, \ud638\ucd9c\uc790\uac00 \uc798\ubabb\ub41c \uc544\uc774\ud15c\uc744 \uc791\uc131\ud558\ub824\uace0 \ud558\uc9c0 \uc54a\ub294\uc9c0 \ud655\uc778\ud558\uae30 \uc704\ud55c \uba87\uac00\uc9c0 \uc548\uc804 \uac80\uc0ac\uac00 \uc788\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc544\uc774\ud15c \uc9c0\uc6b8 \ub54c \ud3b8\uc9d1 \ub05d\ub0b4\uae30<\/h2>\n\n\n\n<p>removeItem \uc774\ubca4\ud2b8\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\uc5ec \uc544\uc774\ud15c\uc774 \uc81c\uac70\ub420 \ub54c \ud604\uc7ac \uc5d0\ub514\ud130\ub97c \uc885\ub8cc\ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ TodoViewModel.kt<\/strong>\n\/\/ event: removeItem\nfun removeItem(item: TodoItem) {\n\u00a0 \u00a0todoItems.remove(item)\n\u00a0 \u00a0onEditDone() \/\/ \uc544\uc774\ud15c\uc744 \uc81c\uac70\ud560 \ub54c \uc5d0\ub514\ud130\uac00 \uc5f4\ub9b0\uc0c1\ud0dc\ub85c \uc720\uc9c0\ub418\uc9c0 \uc54a\ub3c4\ub85d \ud55c\ub2e4.\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\uc571 \ub2e4\uc2dc \uc2dc\uc791\ud558\uae30<\/h2>\n\n\n\n<p>MutableState\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d ViewModel\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \uad00\ucc30 \uac00\ub2a5\ud55c state \ucf54\ub4dc\ub85c \ub2e8\uc21c\ud654\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc558\ub2e4.<\/p>\n\n\n\n<p>\ub2e4\uc74c \uc139\uc158\uc5d0\uc11c \uc774 ViewModel\uc5d0 \ub300\ud55c \ud14c\uc2a4\ud2b8 \ucf54\ub4dc\ub97c \ucd94\uac00\ud55c \ub2e4\uc74c, \ud3b8\uc9d1 UI\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc774 \uc139\uc158\uc5d0\uc11c \ub9ce\uc740 \uc218\uc815\uc774 \uc788\uc5c8\uae30 \ub54c\ubb38\uc5d0, TodoViewModel\uc5d0 \ub300\ud55c \uc804\uccb4\ucf54\ub4dc\ub97c \ucc38\uc870\ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class TodoViewModel : ViewModel() {<br><br>&nbsp; &nbsp; private var currentEditPosition by mutableStateOf(-1)<br><br>&nbsp; &nbsp; var todoItems = mutableStateListOf&lt;TodoItem&gt;()<br>&nbsp; &nbsp; &nbsp; &nbsp; private set<br><br>&nbsp; &nbsp; val currentEditItem: TodoItem?<br>&nbsp; &nbsp; &nbsp; &nbsp; get() = todoItems.getOrNull(currentEditPosition)<br><br>&nbsp; &nbsp; fun addItem(item: TodoItem) {<br>&nbsp; &nbsp; &nbsp; &nbsp; todoItems.add(item)<br>&nbsp; &nbsp; }<br><br>&nbsp; &nbsp; fun removeItem(item: TodoItem) {<br>&nbsp; &nbsp; &nbsp; &nbsp; todoItems.remove(item)<br>&nbsp; &nbsp; &nbsp; &nbsp; onEditDone() \/\/ don't keep the editor open when removing items<br>&nbsp; &nbsp; }<br><br>&nbsp; &nbsp; fun onEditItemSelected(item: TodoItem) {<br>&nbsp; &nbsp; &nbsp; &nbsp; currentEditPosition = todoItems.indexOf(item)<br>&nbsp; &nbsp; }<br><br>&nbsp; &nbsp; fun onEditDone() {<br>&nbsp; &nbsp; &nbsp; &nbsp; currentEditPosition = -1<br>&nbsp; &nbsp; }<br><br>&nbsp; &nbsp; fun onEditItemChange(item: TodoItem) {<br>&nbsp; &nbsp; &nbsp; &nbsp; val currentItem = requireNotNull(currentEditItem)<br>&nbsp; &nbsp; &nbsp; &nbsp; require(currentItem.id == item.id) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \"You can only change an item with the same id as currentEditItem\"<br>&nbsp; &nbsp; &nbsp; &nbsp; }<br><br>&nbsp; &nbsp; &nbsp; &nbsp; todoItems&#91;currentEditPosition] = item<br>&nbsp; &nbsp; }<br>}<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>State&lt;T> \ub294 \ucef4\ud3ec\uc988\uc5d0 \uc758\ud574 \uc0ac\uc6a9\ub418\ub3c4\ub85d \uc758\ub3c4\ub418\uc5c8\ub2e4.<\/p><p>\ucef4\ud3ec\uc988 \ubc14\uae65\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 state\ub294 State&lt;T>\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub3c4\ub85d \ud55c\ub2e4.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\uc6b0\ub9ac \ub514\uc790\uc774\ub108\uc758 \ub124\uc624 \ubaa8\ub358 \uc778\ud130\ub799\ud2f0\ube0c \ubaa8\uc758\ub97c \ub9ac\ubdf0\uc911, \ud604\uc7ac \ud3b8\uc9d1\ud558\ub294 \uc544\uc774\ud15c\uc744 \ub098\ud0c0\ub0b4\ub294 \uba87\uac00\uc9c0 \uc0c1\ud0dc \ucd94\uac00\uac00 \ud544\uc694\ud574\uc84c\ub2e4. \uc774\uc81c \uc774 \uc5d0\ub514\ud130\uc758 \uc0c1\ud0dc\ub97c \ucd94\uac00\ud560 \uc704\uce58\ub97c \uacb0\uc815\ud574\uc57c \ud55c\ub2e4. \uc544\uc774\ud15c \ub098\ud0c0\ub0b4\uac70\ub098 \ud3b8\uc9d1\uc744 \ucc98\ub9ac\ud558\ub294 \ub610 \ub2e4\ub978 stateful \ucef4\ud3ec\uc800\ube14\uc778 &#8220;TodoRowOrInlineEditor&#8221;\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc9c0\ub9cc, \ud55c \ubc88\uc5d0 \ud558\ub098\uc758 \uc5d0\ub514\ud130\ub9cc \ud45c\uc2dc\ud558\ub824\uace0 \ud55c\ub2e4. \ub514\uc790\uc778\uc744 \uc790\uc138\ud788 \ubcf4\uba74 \ud3b8\uc9d1 \ubaa8\ub4dc\uc5d0\uc11c\ub3c4 \uc0c1\ub2e8 \uc139\uc158\uc774 \ubcc0\uacbd\ub418\uace0 \uc788\ub2e4. [&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\/45667"}],"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=45667"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45667\/revisions"}],"predecessor-version":[{"id":45670,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45667\/revisions\/45670"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}