{"id":45616,"date":"2021-11-13T00:41:52","date_gmt":"2021-11-12T15:41:52","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45616"},"modified":"2021-11-13T00:42:06","modified_gmt":"2021-11-12T15:42:06","slug":"using-state-in-jetpack-compose-%eb%8b%a8%eb%b0%a9%ed%96%a5-%eb%8d%b0%ec%9d%b4%ed%84%b0-%ed%9d%90%eb%a6%84-%ec%9d%b4%ed%95%b4%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45616","title":{"rendered":"Using state in Jetpack Compose &#8211; \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \uc774\ud574\ud558\uae30"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p>\uc774 \uc139\uc158\uc740 \uc548\ub4dc\ub85c\uc774\ub4dc View \uc2dc\uc2a4\ud15c\uc744 \uc0ac\uc6a9\ud55c \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \uac1c\ub150\uc744 \uc18c\uac1c\ud55c\ub2e4.<\/p><p>\uc774\ubbf8 \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \ubc0f \uad6c\uc870\ud654 \ub41c \ucf54\ub4dc\uc5d0\uc11c \uc5b4\ub5a4\uc2dd\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294\uc9c0 \uc54c\uace0 \uc788\ub2e4\uba74, \ub2e4\uc74c \uc139\uc158\uc73c\ub85c \ub118\uc5b4\uac00\ub3c4 \uc88b\ub2e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">UI \uc5c5\ub370\uc774\ud2b8 \uc21c\ud658<\/h2>\n\n\n\n<p>TODO\uc571\uc744 \ub9cc\ub4e4\uae30 \uc804\uc5d0, \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc5d0 \ub300\ud574\uc11c \uc54c\uc544\ubcf4\uc790.<\/p>\n\n\n\n<p>\ubb34\uc5c7\uc774 <strong>state<\/strong>\ub97c \uac31\uc2e0\ud558\uac8c \ub9cc\ub4e4\uae4c? \ub3c4\uc785\ubd80\uc5d0\uc11c\ub294 state\ub294 \uc2dc\uac04\uc5d0 \ub530\ub77c \ubcc0\uacbd\ub418\ub294 \uc5b4\ub5a0\ud55c \uac12\uc774\ub77c\uace0 \ud588\ub2e4. \uc774\uac74 \uc548\ub4dc\ub85c\uc774\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub2e8\uc9c0 state\uc5d0 \ub300\ud55c \uc77c\ubd80\ubd84\uc5d0 \ubd88\uacfc\ud558\ub2e4.<\/p>\n\n\n\n<p>\uc548\ub4dc\ub85c\uc774\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\ub4e4\uc5d0\uc11c state\ub294 event\uc5d0 \ubc18\uc751\ud558\uc5ec \uac31\uc2e0\ub41c\ub2e4.<strong> event<\/strong>\ub294 \uc0ac\uc6a9\uc790\uc758 \ubc84\ud2bc \ud074\ub9ad, EditText\uc758 afterTextChanged \ud638\ucd9c, \uac00\uc18d\uacc4\uac00 \uc804\ub2ec\ud558\ub294 \uc0c8\ub85c\uc6b4 \uac12 \ub4f1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ubc16\uc5d0\uc11c \uc0dd\uc131\ub41c \uc785\ub825\uc744 \ub9d0\ud55c\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Event\ub294 \ud504\ub85c\uadf8\ub7a8 \uc77c\ubd80\uc5d0 \ubb34\uc5b8\uac00 \ubc1c\uc0dd\ud558\ub294 \uac83\uc744 \ud1b5\uc9c0\ud55c\ub2e4.<\/p><p>\uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uac00 \ubc84\ud2bc\uc744 \ub204\ub974\ub294 \uac83\uc740 \ud074\ub9ad event\ub97c \ud638\ucd9c\ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>\ubaa8\ub4e0 \uc548\ub4dc\ub85c\uc774\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c UI \uc5c5\ub370\uc774\ud2b8 \uc21c\ud658\uc5d0 \ub300\ud55c \ud575\uc2ec\uc801\uc778 \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"514\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-1be37cbec4304401-1024x514.png\" alt=\"\" class=\"wp-image-45617\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-1be37cbec4304401-1024x514.png 1024w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-1be37cbec4304401-300x151.png 300w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-1be37cbec4304401-768x386.png 768w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-1be37cbec4304401.png 1147w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Event<\/strong> &#8211; \uc0ac\uc6a9\uc790 \ub610\ub294 \ub610 \ub2e4\ub978 \ud504\ub85c\uadf8\ub7a8 \uc77c\ubd80\ub85c \uc0dd\uc131\ub41c \uc774\ubca4\ud2b8<\/li><li><strong>Update State<\/strong> &#8211; event \ud578\ub4e4\ub7ec\ub294 UI\uc5d0 \uc758\ud574 \uc0ac\uc6a9\ub418\ub294 state\ub97c \ubcc0\uacbd\ud55c\ub2e4.<\/li><li><strong>Display State<\/strong> &#8211; UI\ub294 \uc0c8\ub85c\uc6b4 state\ub97c \ub098\ud0c0\ub0b4\uae30 \uc704\ud574 \uc5c5\ub370\uc774\ud2b8 \ub41c\ub2e4.<\/li><\/ul>\n\n\n\n<p>Compose\uc5d0\uc11c state\ub97c \uad00\ub9ac\ud558\ub294 \uac83\uc740 state \ubc0f event\uac00 \uc11c\ub85c \uc5b4\ub5bb\uac8c \uc0c1\ud638\uc791\uc6a9\ud558\ub294\uc9c0\uc5d0 \uc774\ud574\ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uad6c\uc870\ud654\ub418\uc9c0 \uc54a\uc740 state<\/h2>\n\n\n\n<p>\ucef4\ud3ec\uc988\ub85c \ub4e4\uc5b4\uac00\uae30 \uc804\uc5d0, \uc548\ub4dc\ub85c\uc774\ub4dc View \uc2dc\uc2a4\ud15c\ub0b4\uc5d0 event \ubc0f state\uc5d0 \ub300\ud574\uc11c \uc54c\uc544\ubcf4\uc790. \uc6b0\ub9ac \ub9cc\ub4dc\ub824\uace0 \ud558\ub294 hello world Activity\uc5d0\uc11c\uc758 &#8220;Hello, World&#8221; state\ub294 \uc0ac\uc6a9\uc790\uac00 \uc774\ub984\uc744 \uc785\ub825\ud560 \uc218 \uc788\ub3c4\ub85d \ud55c\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-451ab3e0e6cbce39.gif\" alt=\"\" class=\"wp-image-45618\" width=\"488\" height=\"266\"\/><\/figure>\n\n\n\n<p>\uc6b0\ub9ac\uac00 \uc774\uac83\uc744 \uc791\uc131\ud558\ub294 \ud55c\uac00\uc9c0 \ubc29\ubc95\uc740 event \ucf5c\ubc31\uc744 \uc9c1\uc811\uc801\uc73c\ub85c \ubc1b\uc544 TextView\uc5d0 state\ub97c \uc801\uc6a9\ud558\ub294 \uac83\uc774\ub2e4. \uadf8\ub9ac\uace0 ViewBinding\uc744 \uc0ac\uc6a9\ud558\ub294 \ucf54\ub4dc\ub294 \uc544\ub9c8 \ub2e4\uc74c\uacfc \uac19\uc774 \uc0dd\uacbc\uc744 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class HelloCodelabActivity : AppCompatActivity() {\n\n\u00a0 \u00a0private lateinit var binding: ActivityHelloCodelabBinding\n\u00a0 \u00a0var name = \"\"\n\n\u00a0 \u00a0override fun onCreate(savedInstanceState: Bundle?) {\n\u00a0 \u00a0 \u00a0 \u00a0\/* ... *\/\n\u00a0 \u00a0 \u00a0 \u00a0binding.textInput.doAfterTextChanged {text ->\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0name = text.toString()\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0updateHello()\n\u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0}\n\n\u00a0 \u00a0private fun updateHello() {\n\u00a0 \u00a0 \u00a0 \u00a0binding.helloText.text = \"Hello, $name\"\n\u00a0 \u00a0}\n}\n<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\uc774 \ucf54\ub4dc\ub294 \uc774\ubbf8 example \ud328\ud0a4\uc9c0\uc5d0 \uc644\uc131\ub418\uc5b4 \uc788\ub2e4. \uc774 \uc139\uc158\uc5d0\uc11c \ubcc0\uacbd\ud560 \uc0c1\ud56d\uc740 \uc5c6\ub2e4.<\/p><p>\uadf8\ub7ec\ub098 \uc774 \ucf54\ub4dc\ub294 Activtiy\uc5d0 \uc800\uc7a5\ub41c \uad6c\uc870\ud654 \ub418\uc9c0 \uc54a\uc740 state\ub97c \ub098\ud0c0\ub0b8\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>\uc774\ub7f0 \ucf54\ub4dc\ub294 \uc798 \uc791\ub3d9\ud55c\ub2e4. \uadf8\ub9ac\uace0 \uc774\ub7f0 \uc791\uc740 \uc608\uc81c\uc5d0\uc11c\ub294 \uc774\ub7f0\uc2dd\uc73c\ub85c \ucf54\ub4dc\ub97c \uc9dc\ub3c4 \ub098\uc058\uc9c0 \uc54a\ub2e4. \ud558\uc9c0\ub9cc UI\uac00 \uacc4\uc18d\ud574\uc11c \ubcf5\uc7a1\ud574\uc9d0\uc5d0 \ub530\ub77c \uc810\uc810 \uad00\ub9ac\ud558\uae30 \uc5b4\ub824\uc6cc\uc9c0\ub294 \uacbd\ud5a5\uc774 \uc788\ub2e4.<\/p>\n\n\n\n<p>\ub354 \ub9ce\uc740 event \ubc0f state\ub97c \ub9cc\ub4e4\uc5b4\uc9c4 Activity\uc5d0 \ucd94\uac00\ud568\uc5d0 \ub530\ub77c, \uba87\uac00\uc9c0 \ubb38\uc81c\uc810\ub4e4\uc774 \ub3c4\ucd9c\ub41c\ub2e4.<\/p>\n\n\n\n<ol><li><strong>\uc720\ub2db \ud14c\uc2a4\ud2b8<\/strong> &#8211; UI\uc758 state\uac00 <em>View<\/em>\ub4e4\uacfc \ub4a4\uc11d\uc5ec \uc788\uae30 \ub54c\ubb38\uc5d0, \uc774 \ucf54\ub4dc\uc5d0 \ub300\ud55c \uc720\ub2db\ud14c\uc2a4\ud2b8\ub97c \uc218\ud589\ud558\uae30\uac00 \uc5b4\ub835\ub2e4.<\/li><li><strong>\ubd80\ubd84\uc801\uc778 state \uc5c5\ub370\uc774\ud2b8<\/strong> &#8211; \ud654\uba74\uc774 \ub9ce\uc740 event\ub4e4\uc744 \uac00\uc9c8 \ub54c, \uc774\ubca4\ud2b8\uc5d0 \ub300\ud55c \uc751\ub2f5\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8 \ud574\uc57c \ud560 state \ucf54\ub4dc\ub97c \ub193\uce58\uae30 \uc27d\ub2e4. \uadf8\ub7f0\ubd80\ubd84 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc790\uac00 \ubcf4\ub294 UI \ud654\uba74\uc774 \uc77c\uad00\uc131\uc774 \uc5c6\uac70\ub098, \ubd80\uc815\ud655\ud558\uac8c \ub41c\ub2e4.<\/li><li><strong>\ubd80\ubd84\uc801\uc778 UI \uc5c5\ub370\uc774\ud2b8<\/strong> &#8211; \uac01 state \ubcc0\uacbd \ud6c4\uc5d0 \uc218\ub3d9\uc73c\ub85c UI\ub97c \uac31\uc2e0\ud574\uc57c \ud558\ubbc0\ub85c, \uc774\ub97c \uae4c\uba39\uae30\uac00 \ub108\ubb34 \uc27d\ub2e4. \uadf8\ub7f0\ubd80\ubd84 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc790\uac00 \ubb34\uc791\uc704\ub85c \uac31\uc2e0\ub418\ub294 UI\ub97c \ud1b5\ud574 \uc624\ub798\ub41c \ub370\uc774\ud130 \ubcf4\uac8c \ub41c\ub2e4.<\/li><li><strong>\ucf54\ub4dc \ubcf5\uc7a1<\/strong>\uc131 &#8211; \uc774 \ud328\ud134\uc5d0\uc11c \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uac8c \ub418\uba74 \uc5b4\ub5a0\ud55c \ub85c\uc9c1\uc744 \ucd94\ucd9c\ud558\uae30\uac00 \uc5b4\ub824\uc6cc\uc9c4\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ucf54\ub4dc\uac00 \uc77d\uae30 \uc5b4\ub835\uace0, \uc774\ud574\ud558\uae30 \uc5b4\ub824\uc6cc\uc9c0\ub294 \uacbd\ud5a5\uc774 \uc788\ub2e4.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \uc0ac\uc6a9\ud558\uae30<\/h2>\n\n\n\n<p>\uad6c\uc870\ud654 \ub418\uc9c0 \uc54a\uc740 state\uc640 \ud568\uaed8 \ubc1c\uc0dd\ud558\ub294 \ubb38\uc81c\ub4e4\uc744 \uace0\uce58\uae30 \uc704\ud574\uc11c, \uad6c\uae00\uc740 ViewModel\uacfc LiveData\ub97c \ud3ec\ud568\ud55c Android Architecture Component\ub97c \ub3c4\uc785\ud588\uc5c8\ub2e4.<\/p>\n\n\n\n<p>ViewModel\uc740 UI\ub85c\ubd80\ud130 state\ub97c \ubd84\ub9ac\ud558\ub3c4\ub85d \ud558\uace0, UI\uac00 \ud574\ub2f9 state\ub97c \ud638\ucd9c\ud558\uc5ec \uc5c5\ub370\uc774\ud2b8 \ud560 \uc218 \uc788\ub294 \uc774\ubca4\ud2b8\ub97c \uc815\uc758\ud588\ub2e4. ViewModel\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc791\uc131\ub41c \ub3d9\uc77c\ud55c Activity\ub97c \uc0b4\ud3b4\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"485\" height=\"162\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-67edaf41f5882075.png\" alt=\"\" class=\"wp-image-45620\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-67edaf41f5882075.png 485w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-67edaf41f5882075-300x100.png 300w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\/\/ HelloCodelabActivity.kt<\/strong>\n\nclass HelloCodelabViewModel: ViewModel() {\n\n\u00a0 \u00a0\/\/ LiveData\ub294 state\ub97c \uac16\uace0 \uc788\uace0, UI\uc5d0 \uc758\ud574 \uad00\ucc30\ub41c\ub2e4.\n\u00a0 \u00a0\/\/ (ViewModel\ub85c\ubd80\ud130 state\uac00 \uc544\ub798\ub85c \uc804\ub2ec\ub41c\ub2e4.)\n\u00a0 \u00a0private val _name = MutableLiveData(\"\")\n\u00a0 \u00a0val name: LiveData&lt;String> = _name\n\n\u00a0 \u00a0\/\/ onNameChanged\ub294 UI\uac00 \ud638\ucd9c\ud560 \uc218 \uc788\ub294 \uc6b0\ub9ac\uac00 \uc815\uc758\ud55c \uc774\ubca4\ud2b8\ub2e4.\n\u00a0 \u00a0\/\/ (event\ub294 UI\ub85c \ubd80\ud130 \uc704\ub85c \uc804\ub2ec\ub41c\ub2e4.)\n\u00a0 \u00a0fun onNameChanged(newName: String) {\n\u00a0 \u00a0 \u00a0 \u00a0_name.value = newName\n\u00a0 \u00a0}\n}\n\nclass HelloCodeLabActivityWithViewModel : AppCompatActivity() {\n\u00a0 \u00a0private val helloViewModel by viewModels&lt;HelloCodelabViewModel>()\n\n\u00a0 \u00a0override fun onCreate(savedInstanceState: Bundle?) {\n\u00a0 \u00a0 \u00a0 \u00a0\/* ... *\/\n\n\u00a0 \u00a0 \u00a0 \u00a0binding.textInput.doAfterTextChanged {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0helloViewModel.onNameChanged(it.toString()) \n\u00a0 \u00a0 \u00a0 \u00a0}\n\n\u00a0 \u00a0 \u00a0 \u00a0helloViewModel.name.observe(this) { name ->\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0binding.helloText.text = \"Hello, $name\"\n\u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0}\n}<\/code><\/pre>\n\n\n\n<p>\uc774 \uc608\uc81c\ub97c \uc0b4\ud3b4\ubcf4\uba74, <em>Activity<\/em>\ub85c \ubd80\ud130 <em>ViewModel<\/em>\ub85c \uc0c1\ud0dc\ub97c \uc774\ub3d9\uc2dc\ucf30\ub2e4. <em>ViewModel<\/em>\uc5d0\uc11c state\ub294 <em>LiveData<\/em>\ub85c \ud45c\ud604\ub41c\ub2e4. <em>LiveData<\/em>\ub294 <strong>observable<\/strong> state holder(\uad00\ucc30\uac00\ub2a5\ud55c \uc0c1\ud0dc \uc18c\uc720\uc790)\ub85c\uc368 \ubcc0\uacbd\ub418\ub294 state\ub97c \uad00\ucc30\ud558\uace0 \uc2f6\uc740 \ub204\uad70\uac00\uc5d0\uac8c \ubcc0\uacbd\uc0ac\ud56d\uc744 \uc804\ub2ec\ud558\ub294 \ubc29\ubc95\uc744 \uc81c\uacf5\ud55c\ub2e4. \uadf8\ub7ec\uba74 UI\uc5d0\uc11c\ub294 <strong>observe<\/strong> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec state\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 UI\ub97c \uac31\uc2e0\ud558\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>observable<\/strong>\uc740 state \ubcc0\uacbd\uc744 \uc54c\uace0 \uc2f6\uc740 \ub204\uad70\uac00\uc5d0\uac8c \uc774\ub97c \uc218\uc2e0\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \uc81c\uacf5\ud558\ub294 state \uac1d\uccb4\ub2e4.<\/p><p>\uc608\ub97c\ub4e4\uba74, LiveData, StateFlow, Flow \ubc0f Observable\uc740 \ubaa8\ub450 <strong>observable<\/strong>\ud558\ub2e4\ub77c\uace0 \ub9d0\ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n<p><em>ViewModel<\/em>\uc740 \ub610\ud55c <em>onNameChanged<\/em>\ub77c\ub294 \uc774\ubca4\ud2b8\ub97c \ub178\ucd9c\ud55c\ub2e4. \uc608\uc81c\uc5d0\uc11c <em>EditText<\/em>\uc5d0\uc11c \ud14d\uc2a4\ud2b8\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc77c\uc5b4\ub098\ub294 \uc77c\ub4e4\ucc98\ub7fc, \uc774 event\ub294 \uc0ac\uc6a9\uc790 event\ub4e4\uc5d0 \ubc18\uc751\ud558\uc5ec UI\uc5d0\uc11c \ud638\ucd9c\ub41c\ub2e4. <\/p>\n\n\n\n<p>UI \uc5c5\ub370\uc774\ud2b8 \uc21c\ud658\uc774\uc57c\uae30\ub85c \ub2e4\uc2dc \ub3cc\uc544\uac00\uc11c, <em>ViewModel<\/em>\uc774 event \ubc0f state\uc640 \ud568\uaed8 \uc5b4\ub5bb\uac8c \uad81\ud569\uc774 \uc798 \ub9de\ub294\uc9c0 \uc54c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<ul><li><strong>Event<\/strong> &#8211; \ud14d\uc2a4\ud2b8 \uc785\ub825\uc774 \ubcc0\uacbd\ub420 \ub54c UI\uc5d0 \uc758\ud574 onNameChanged\uac00 \ud638\ucd9c\ub41c\ub2e4.<\/li><li><strong>Update State<\/strong> &#8211; onNameChanged\uac00 \ucc98\ub9ac\ud55c \ub2e4\uc74c, _name\uc758 state\ub97c \uc124\uc815\ud55c\ub2e4.<\/li><li><strong>Display State<\/strong> &#8211; name\uc758 \uc635\uc800\ubc84\ub4e4\uc774 \ud638\ucd9c\ub418\uc5b4 UI state \ubcc0\uacbd\uc744 \ud1b5\uc9c0\ud55c\ub2e4.<\/li><\/ul>\n\n\n\n<p>\uc774\ub7f0\uc2dd\uc73c\ub85c \ucf54\ub4dc\ub97c \uad6c\uc870\ud654\ud558\ub294 \uac83\uc73c\ub85c, <em>ViewModel<\/em>\uc5d0\uac8c <em>event<\/em>\ub97c \uc62c\ub824\ubcf4\ub0b4\ub294 \uac83\uc73c\ub85c \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c <em>event<\/em>\uc5d0 \ub300\ud55c \uc751\ub2f5\uc73c\ub85c <em>ViewModel<\/em>\uc740 \uc77c\ubd80 \ucc98\ub9ac\ub97c \uc218\ud589\ud558\uace0 <em>state<\/em>\ub97c \ub2e4\uc2dc \uc5c5\ub370\uc774\ud2b8 \ud560 \uc218 \uc788\ub2e4. <em>state<\/em>\uac00 \uc5c5\ub370\uc774\ud2b8 \ub420 \ub54c, <em>state<\/em>\ub294 <em>Activity<\/em>\ub97c \ud5a5\ud574 \uc544\ub798\ub85c \ud750\ub978\ub2e4. \uc544\ub798\uc758 \uadf8\ub9bc\uc744 \ucc38\uc870\ud558\uba74 \uc774\ud574\ud558\ub294\ub370 \ub3c4\uc6c0\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"442\" height=\"517\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-1bb3728573d00d8d.png\" alt=\"\" class=\"wp-image-45621\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-1bb3728573d00d8d.png 442w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-using-state-in-jetpack-compose-1bb3728573d00d8d-256x300.png 256w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/figure>\n\n\n\n<p>\uc774 \ud328\ud134\uc774 \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc774\ub77c \ubd88\ub9ac\ub294 \ud328\ud134\uc774\ub2e4. \ub2e8\ubc29\ud5a5 \ub370\uc774\ud2b8 \ud750\ub984\uc740 <em>state<\/em>\ub97c \uc544\ub798\ub85c \ud750\ub974\uac8c\ud558\uace0 <em>event<\/em>\ub97c \uc704\ub85c \uc62c\ub9ac\ub294 \uc124\uacc4\ubc29\uc2dd\uc774\ub2e4. \uc774\ub7f0\uc2dd\uc73c\ub85c <strong>\ucf54\ub4dc\ub97c \uad6c\uc870\ud654\ud558\uba74 \uba87\uac00\uc9c0 \uc7a5\uc810\uc744 \uc5bb\uac8c \ub41c\ub2e4.<\/strong><\/p>\n\n\n\n<ul><li><strong>\ud14c\uc2a4\ud2b8\uc6a9\uc774\uc131<\/strong> &#8211; UI\ub85c\ubd80\ud130 state\ub97c \ubd84\ub9ac\ud558\ub294 \uac83\uc73c\ub85c, ViewModel \ubc0f Activity\uc758 \ud14c\uc2a4\ud2b8\uac00 \ub354 \uc26c\uc6cc\uc9c4\ub2e4.<\/li><li><strong>State \ucea1\uc290\ud654<\/strong> &#8211; <em>ViewModel<\/em> \uacfc \uac19\uc740 \ud558\ub098\uc758 \uc7a5\uc18c\uc5d0\uc11c\ub9cc state\uac00 \uc5c5\ub370\uc774\ud2b8 \ub420 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0, UI\uac00 \ucee4\uc9d0\uc5d0 \ub530\ub77c \ubd80\ubd84\uc801\uc778 state \uc5c5\ub370\uc774\ud2b8 \ubc84\uadf8\uac00 \ubc1c\uc0dd\ud560 \uac00\ub2a5\uc131\uc774 \uc904\uc5b4\uc9c4\ub2e4.<\/li><li><strong>UI \uc77c\uad00\uc131<\/strong> &#8211; \ubaa8\ub4e0 state \uac31\uc2e0\uc740 state\ub97c \uac00\uc9c0\uace0 \uc788\ub294 observable\uc744 \uc0ac\uc6a9\ud558\ub294 UI\uc5d0\uc11c \uc989\uc2dc \ubc18\uc601\ub41c\ub2e4<\/li><\/ul>\n\n\n\n<p>\uc774\ub7ec\ud55c \ubc29\uc2dd\uc740 \ucf54\ub4dc\uac00 \uc870\uae08 \ub354 \uae38\uc5b4\uc9c0\uc9c0\ub9cc, \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc744 \uc0ac\uc6a9\ud558\uba74 \ubcf5\uc7a1\ud55c state \ubc0f event\ub97c \ub2e4\ub8e8\ub294\ub370 \uc788\uc5b4\uc11c \uc880 \ub354 \uc27d\uace0 \uc2e0\ub8b0\ud560\ub9cc\ud55c \ucf54\ub4dc\ub97c \ub9cc\ub4e4\uc5b4 \ub0bc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984<\/strong>\uc740 event\uac00 \uc704\ub85c \ud750\ub974\uace0 state\uac00 \uc544\ub798\ub85c \ud750\ub974\ub294 \uc124\uacc4\ubc29\uc2dd\uc774\ub2e4.<\/p><p>\uc608\ub97c \ub4e4\uc5b4 ViewModel\uc5d0\uc11c state\ub294 LiveData\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc544\ub798\ub85c \ud750\ub974\ub294 \ub3d9\uc548 UI\uc758 \uba54\uc11c\ub4dc \ud638\ucd9c\uacfc \ud568\uaed8 event\uac00 \uc804\ub2ec\ub41c\ub2e4.<\/p><p>\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc774\ub77c\ub294\uac8c \ub2e8\uc9c0 ViewModel\uc744 \ubb18\uc0ac\ud558\ub294 \uc6a9\uc5b4\uac00\ub294 \uc544\ub2c8\ub2e4. event\uac00 \uc704\ub85c \ud750\ub974\uace0 state\uac00 \uc544\ub798\ub85c \ud750\ub974\ub294 \ubaa8\ub4e0 \uc124\uacc4\ubc29\uc2dd\uc740 \ub2e8\ubc29\ud5a5\uc774\ub77c\uace0 \ub9d0\ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>\ub2e4\uc74c \uc139\uc158\uc5d0\uc11c \uc5b4\ub5bb\uac8c \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc744 \ucef4\ud3ec\uc988\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294\uc9c0 \ud655\uc778\ud558\uc790.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc774 \uc139\uc158\uc740 \uc548\ub4dc\ub85c\uc774\ub4dc View \uc2dc\uc2a4\ud15c\uc744 \uc0ac\uc6a9\ud55c \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \uac1c\ub150\uc744 \uc18c\uac1c\ud55c\ub2e4. \uc774\ubbf8 \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \ubc0f \uad6c\uc870\ud654 \ub41c \ucf54\ub4dc\uc5d0\uc11c \uc5b4\ub5a4\uc2dd\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294\uc9c0 \uc54c\uace0 \uc788\ub2e4\uba74, \ub2e4\uc74c \uc139\uc158\uc73c\ub85c \ub118\uc5b4\uac00\ub3c4 \uc88b\ub2e4. UI \uc5c5\ub370\uc774\ud2b8 \uc21c\ud658 TODO\uc571\uc744 \ub9cc\ub4e4\uae30 \uc804\uc5d0, \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc5d0 \ub300\ud574\uc11c \uc54c\uc544\ubcf4\uc790. \ubb34\uc5c7\uc774 state\ub97c \uac31\uc2e0\ud558\uac8c \ub9cc\ub4e4\uae4c? \ub3c4\uc785\ubd80\uc5d0\uc11c\ub294 state\ub294 \uc2dc\uac04\uc5d0 \ub530\ub77c \ubcc0\uacbd\ub418\ub294 \uc5b4\ub5a0\ud55c \uac12\uc774\ub77c\uace0 \ud588\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\/45616"}],"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=45616"}],"version-history":[{"count":3,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45616\/revisions"}],"predecessor-version":[{"id":45626,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45616\/revisions\/45626"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}