{"id":45650,"date":"2021-11-17T02:03:09","date_gmt":"2021-11-16T17:03:09","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45650"},"modified":"2021-11-17T02:03:11","modified_gmt":"2021-11-16T17:03:11","slug":"using-state-in-jetpack-compose-%ec%83%81%ed%83%9c-%ea%b8%b0%eb%b0%98%ec%9d%98-%eb%8f%99%ec%a0%81%ec%9d%b8-ui","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45650","title":{"rendered":"Using state in Jetpack Compose – \uc0c1\ud0dc \uae30\ubc18\uc758 \ub3d9\uc801\uc778 UI"},"content":{"rendered":"\n

\uc9c0\ub09c \uc139\uc158\uc5d0\uc11c \ucef4\ud3ec\uc800\ube14\uc5d0 state\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uacfc \ucef4\ud3ec\uc800\ube14\uc774 \uc0ac\uc6a9\ud558\ub294 state\ub97c stateless\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574 state hoisting\uc744 \ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574\uc11c \ubc30\uc6e0\ub2e4.<\/p>\n\n\n\n

\uc774\uc81c state\uae30\ubc18\uc758 \ub3d9\uc801\uc778 UI\ub97c \ub9cc\ub4e4\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uc790. \ub514\uc790\uc774\ub108\uc758 \ubaa9\uc5c5 \ub514\uc790\uc778\uc73c\ub85c \ub2e4\uc2dc \ubcf4\uba74, \ud14d\uc2a4\ud2b8\uac00 \uacf5\ubc31\uc774 \uc544\ub2d0 \ub54c\ub9c8\ub2e4 icon\ud589\uc744 \ubcf4\uc5ec\uc918\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n

\"\"
Todo input(state: expadned – \ud14d\uc2a4\ud2b8 \uc788\uc74c)<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Todo input(state: collapsed – \ud14d\uc2a4\ud2b8 \uc5c6\uc74c)<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n

\uc0c1\ud0dc\ub85c\ubd80\ud130 iconVisible \uc5bb\uae30<\/h2>\n\n\n\n

TodoScreen.kt<\/em> \uc744 \uc5f4\uace0 \uc0c8\ub85c\uc6b4 state \ubcc0\uc218\ub97c \uc0dd\uc131\ud558\uc5ec \ud604\uc7ac \uc120\ud0dd\ub41c icon<\/em>\uc744 \uc800\uc7a5\ud558\ub3c4\ub85d \ud558\uc790. \uadf8\ub9ac\uace0 \uc0c8\ub85c\uc6b4 val iconsVisible<\/em>\uc740 \ud14d\uc2a4\ud2b8\uac00 \ube44\uc5b4\uc788\uc9c0 \uc54a\uc744 \ub54c\ub9c8\ub2e4 true\uac00 \ub41c\ub2e4.<\/p>\n\n\n\n

\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemInput(onItemComplete: (TodoItem) -> Unit) {\n   val (text, setText) = remember { mutableStateOf(\"\") }\n   val (icon, setIcon) = remember { mutableStateOf(TodoIcon.Default)}\n   val iconsVisible = text.isNotBlank()\n    \/\/ ...<\/code><\/pre>\n\n\n\n
icon\uc774\ub77c\ub294 \ub450\ubc88\uc9f8 state\uc870\uac01\uc744 \ucd94\uac00\ud558\uc5ec \ud604\uc7ac \uc120\ud0dd\ub41c \uc544\uc774\ucf58\uc744 \uc800\uc7a5\ud558\ub3c4\ub85d \ud588\ub2e4.<\/p>\n\n\n\n
iconVisible<\/em> \uac12\uc740 TodoItemInput<\/em>\uc5d0 \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc\ub85c \ucd94\uac00\ud558\uc9c0 \uc54a\ub294\ub2e4. TodoItemInput<\/em>\uc774 \uc9c1\uc811\uc801\uc73c\ub85c \uc774\ub97c \ubcc0\uacbd\ud560 \ubc29\ubc95\uc740 \uc5c6\ub2e4. \ub300\uc2e0\uc5d0, \uc804\uc801\uc73c\ub85c text<\/em> \uac12\uc744 \uae30\ubc18\uc73c\ub85c \ud55c\ub2e4. \uc7ac\uad6c\uc131 \uc2dc text<\/em> \uac12\uc774 \ubb34\uc5c7\uc774\ub4e0\uc9c0\uac04\uc5d0, iconVisible<\/em>\uc740 \uc801\uc808\ud788 \uc124\uc815\ub418\uace0 \uc6b0\ub9ac\ub294 \uadf8\uac78 \uc0ac\uc6a9\ud558\uc5ec \uc62c\ubc14\ub978 UI\ub97c \ubcf4\uc5ec\uc8fc\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n
\uc544\uc774\ucf58\uc774 \ud45c\uc2dc\ub418\ub294 \uc2dc\uc810\uc744 \uc81c\uc5b4\ud558\uae30 \uc704\ud574 TodoItemInput<\/em>\uc5d0 \ub610 \ub2e4\ub978 \uc0c1\ud0dc\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc9c0\ub9cc \uc2a4\ud399\uc744 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uba74, \uac00\uc2dc\uc131\uc740 \uc804\uc801\uc73c\ub85c \uc785\ub825\ub41c \ud14d\uc2a4\ud2b8\ub97c \uae30\ubc18\uc73c\ub85c \ud558\uace0 \uc788\ub2e4. \ub450 \uac00\uc9c0 \uc0c1\ud0dc\ub97c \ub9cc\ub4e4\uba74 \uc774\ub4e4\uc744 \ub3d9\uae30\ud654\ud558\uae30 \uc27d\uc9c0 \uc54a\ub2e4.<\/p>\n\n\n\n
\ub300\uc2e0, \uc6b0\ub9ac\ub294 Single source of truth\ub97c \uac16\ub294 \uac83\uc744 \uc120\ud638\ud55c\ub2e4. \uc774 \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c\ub294 state\uac00 \ub420 text<\/em>\ub9cc \ud544\uc694\ud558\uace0, iconsVisible<\/em>\uc740 text<\/em> \uae30\ubc18\uc73c\ub85c \uacb0\uc815\ub41c\ub2e4.<\/p>\n\n\n\n
\ud568\uc218\uc801\uc778 \ubcc0\ud658\uc5d0 \uc775\uc219\ud558\ub2e4\uba74 iconsVisible\uc740 text<\/strong> \uac12\uc5d0\uc11c \ub9e4\ud551\ub41c\ub2e4.<\/p>
LiveData<\/strong>\ub85c \ub3d9\uc77c\ud55c \ubcc0\ud658\uc744 \uc218\ud589\ud558\uae30 \uc704\ud574 map<\/strong> \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>
val iconVisible: LiveData<Boolean> = textLiveData.map { it.isNotBlank() }<\/strong><\/p><\/blockquote>\n\n\n\n
iconsVisible<\/em>\uc758 \uac12\uc5d0 \ub530\ub77c AnimatedIconRow<\/em>\ub97c \ud45c\uc2dc\ud558\ub3c4\ub85d TodoItemInput<\/em>\uc744 \uacc4\uc18d \ud3b8\uc9d1\ud558\uc790. iconsVisible<\/em>\uc774 true\uc774\uba74 AnimatedIconRow<\/em>\ub97c \ud45c\uc2dc\ud558\uace0, false\uc774\uba74 16.dp<\/em>\uac00 \uc788\ub294 Spacer\ub97c \ud45c\uc2dc\ud55c\ub2e4.<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemInput(onItemComplete: (TodoItem) -> Unit) {\n\u00a0 \u00a0val (text, setText) = remember { mutableStateOf(\"\") }\n\u00a0 \u00a0val (icon, setIcon) = remember { mutableStateOf(TodoIcon.Default)}\n\u00a0 \u00a0val iconsVisible = text.isNotBlank()\n\u00a0 \u00a0Column {\n\u00a0 \u00a0 \u00a0 \u00a0Row( \/* ... *\/ ) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/* ... *\/\n\u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0 \u00a0 \u00a0if (iconsVisible) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0AnimatedIconRow(icon, setIcon, Modifier.padding(top = 8.dp))\n\u00a0 \u00a0 \u00a0 \u00a0} else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Spacer(modifier = Modifier.height(16.dp))\n\u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0}\n}<\/code><\/pre>\n\n\n\n
\uc7ac\uad6c\uc131\uc740 \uc0c8\ub85c\uc6b4 \ub370\uc774\ud130\ub97c \uae30\ubc18\uc73c\ub85c \ucef4\ud3ec\uc9c0\uc158\ud2b8\ub9ac\uc758 \uad6c\uc870\ub97c \ubcc0\uacbd\ud55c\ub2e4.<\/p>
\uc5ec\uae30\uc5d0\uc11c \uc6b0\ub9ac\ub294 Spacer\uc5d0 \ub300\ud55c AnimatedIconRow\ub97c \uad50\uccb4\ud55c\ub2e4. Navigation \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c\uc640 \uac19\uc774 \uc804\uccb4 \ud2b8\ub9ac\ub97c \ubcc0\uacbd\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n
\uc571\uc744 \ub2e4\uc2dc \uc2dc\uc791\ud574\ubcf4\uba74, \ud14d\uc2a4\ud2b8 \uc785\ub825\uc744 \uc2dc\uc791\ud560 \ub54c \uc544\uc774\ucf58 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2dc\uc791\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\uc5ec\uae30\uc11c iconVisible<\/em> \uac12\uc744 \uae30\ubc18\uc73c\ub85c \ub3d9\uc801\uc73c\ub85c \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac\ub97c \ubcc0\uacbd\ud558\uace0 \uc788\ub2e4. \uc5ec\uae30 \uc788\ub294 \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac\uc758 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc740 iconVisibles<\/em>\uc758  state\uc5d0 \ub530\ub978 \ub0b4\uc6a9\uc744 \ubcf4\uc5ec\uc900\ub2e4.<\/p>\n\n\n\n
\uc870\uac74\ubd80\ub85c \ubcf4\uc5ec\uc8fc\ub294 \uc774\ub7f0 \ud615\uc2dd\uc758 \ub85c\uc9c1\uc740 \uc548\ub4dc\ub85c\uc774\ub4dc View \uc2dc\uc2a4\ud15c\uc5d0\uc11c visibility\ub97c gone\uc73c\ub85c \uc124\uc815\ud558\ub294 \uac83\uacfc \ub3d9\ub4f1\ud558\ub2e4.<\/p>\n\n\n\n
\"\"
iconVisible\uc774 \ubcc0\uacbd\ub420 \ub54c TodoItemInput \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac <\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
\ucef4\ud3ec\uc988\uc5d0\uc11c\ub294 “visibility” \uc18d\uc131\uc774 \uc874\uc7ac\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>
\ucef4\ud3ec\uc988\ub294 \ub3d9\uc801\uc73c\ub85c \uad6c\uc131\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0, visibility\ub97c gone\uc73c\ub85c \uc124\uc815\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4. \ub300\uc2e0\uc5d0, \ucef4\ud3ec\uc9c0\uc158\uc73c\ub85c\ubd80\ud130 \ucef4\ud3ec\uc800\ube14\uc744 \uc81c\uac70\ud558\uba74 \ub41c\ub2e4.<\/p><\/blockquote>\n\n\n\n
\uc571\uc744 \ub2e4\uc2dc \uc2dc\uc791 \ud558\uba74 icon \ud589\uc774 \uc62c\ubc14\ub974\uac8c \ud45c\uc2dc\ub418\ub294 \uac83\uc744 \ubcfc\uc218 \uc788\uc9c0\ub9cc “Add”\ub97c \ud074\ub9ad\ud574\ub3c4 \uc120\ud0dd\ud55c \uc544\uc774\ucf58\uc774 todo \ud589\uc73c\ub85c \ucd94\uac00\ub418\uc9c0 \uc54a\ub294\ub2e4. \uc774\uc720\ub294 \uc0c8 \uc544\uc774\ucf58 \uc0c1\ud0dc\ub97c \uc804\ub2ec\ud558\ub3c4\ub85d \uc774\ubca4\ud2b8\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc774\ub2e4. <\/p>\n\n\n\n
\uc544\uc774\ucf58\uc744 \uc0ac\uc6a9\ud558\ub3c4\ub85d \uc774\ubca4\ud2b8 \uc5c5\ub370\uc774\ud2b8\ud558\uae30<\/h2>\n\n\n\n
TodoItemInput<\/em>\uc5d0 \uc788\ub294 TodoEditButton<\/em>\uc744 \uc218\uc815\ud558\uc5ec \uc0c8\ub85c\uc6b4 icon<\/em> \uc0c1\ud0dc\ub97c onClick<\/em> \ub9ac\uc2a4\ub108\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\nTodoEditButton(\n\u00a0 \u00a0onClick = {\n\u00a0 \u00a0 \u00a0 \u00a0onItemComplete(TodoItem(text, icon))\n\u00a0 \u00a0 \u00a0 \u00a0setIcon(TodoIcon.Default)\n\u00a0 \u00a0 \u00a0 \u00a0setText(\"\")\n\u00a0 \u00a0},\n\u00a0 \u00a0text = \"Add\",\n\u00a0 \u00a0modifier = Modifier.align(Alignment.CenterVertically),\n\u00a0 \u00a0enabled = text.isNotBlank()\n)<\/code><\/pre>\n\n\n\n
onClick<\/em> \ub9ac\uc2a4\ub108\uc5d0\uc11c \uc9c1\uc811 \uc0c8 icon<\/em> \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \ub610\ud55c \uc0ac\uc6a9\uc790\uac00 TodoItem<\/em> \uc785\ub825\uc744 \uc644\ub8cc\ud558\uba74 \uae30\ubcf8\uac12\uc73c\ub85c \uc7ac\uc124\uc815\ud55c\ub2e4.<\/p>\n\n\n\n
\uc9c0\uae08 \uc571\uc744 \uc2e4\ud589\ud558\uba74 \uc560\ub2c8\uba54\uc774\uc158 \ubc84\ud2bc\uacfc \ud568\uaed8 \uc0c1\ud638\uc791\uc6a9 \uac00\ub2a5\ud55c todo \uc785\ub825\uc774 \ud45c\uc2dc\ub41c\ub2e4. Great job!<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
ImeAction\uacfc \ud568\uaed8 \ub514\uc790\uc778 \ub05d\ub0b4\uae30<\/h2>\n\n\n\n
\ub514\uc790\uc774\ub108\uc5d0\uac8c \uc571\uc744 \ubcf4\uc5ec\uc8fc\uba74, todo\ub97c \ucd94\uac00\ud558\ub294 \ub3d9\uc791\uc774 \ud0a4\ubcf4\ub4dc\uc5d0 \uc788\ub294 ime action\uc73c\ub85c\ubd80\ud130 \ub418\uc5c8\uc73c\uba74 \ud55c\ub2e4\uace0 \ub9d0\ud55c\ub2e4. \uadf8\uac74 \ubc14\ub85c \uc624\ub978\ucabd \ud558\ub2e8\uc5d0 \uc788\ub294 \ud30c\ub780 \ubc84\ud2bc\uc774\ub2e4.<\/p>\n\n\n\n
\"\"
\uc548\ub4dc\ub85c\uc774\ub4dc \ud0a4\ubcf4\ub4dc\uc5d0 \uc788\ub294 ImeAction.Done<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
TodoInputText<\/em>\ub97c \uc0ac\uc6a9\ud558\uba74 onImeAction<\/em> \uc774\ubca4\ud2b8\ub85c imeAction\uc5d0 \uc751\ub2f5\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\uc6b0\ub9ac\ub294 onImeAction<\/em>\uc774 TodoEditButton<\/em>\uacfc \ub611\uac19\uc740 \ud589\ub3d9\uc744 \ud558\uae30\ub97c \uc815\ub9d0\ub85c \uc6d0\ud55c\ub2e4. \ucf54\ub4dc\ub97c \ubcf5\uc81c\ud560 \uc218\ub294 \uc788\uc9c0\ub9cc \uc2dc\uac04\uc774 \uc9c0\ub0a8\uc5d0 \ub530\ub77c \uc720\uc9c0 \uad00\ub9ac\ud558\uae30 \uc5b4\ub835\uace0, event \uc911 \ud558\ub098\ub9cc \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \uac83\uc774 \uc27d\ub2e4.<\/p>\n\n\n\n
event\ub97c \ubcc0\uc218\ub85c \ucd94\ucd9c\ud558\uc5ec TodoInputText<\/em>\uc758 onImeAction<\/em>\uacfc TodoEditButton<\/em>\uc758 onClick<\/em> \ub458\ub2e4 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
TodoItemInput<\/em>\uc744 \ub2e4\uc2dc \ud3b8\uc9d1\ud558\uc5ec todo\ub97c \ucd94\uac00\ud558\ub294 \uc791\uc5c5\uc744 \uc218\ud589\ud558\ub294 \uc0ac\uc6a9\uc790\ub97c \ucc98\ub9ac\ud558\ub294 \uc0c8 \ub78c\ub2e4 \ud568\uc218 submit<\/em>\uc744 \uc120\uc5b8\ud55c\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c \uc0c8\ub85c \uc815\uc758\ub41c \ub78c\ub2e4 \ud568\uc218\ub97c TodoInputText<\/em> \ubc0f TodoEditButton<\/em> \ubaa8\ub450\uc5d0 \uc804\ub2ec\ud55c\ub2e4.<\/p>\n\n\n\n
@Composable\nfun TodoItemInput(onItemComplete: (TodoItem) -> Unit) {\n\u00a0 \u00a0val (text, setText) = remember { mutableStateOf(\"\") }\n\u00a0 \u00a0val (icon, setIcon) = remember { mutableStateOf(TodoIcon.Default)}\n\u00a0 \u00a0val iconsVisible = text.isNotBlank()\n\u00a0 \u00a0val submit = {\n\u00a0 \u00a0 \u00a0 \u00a0onItemComplete(TodoItem(text, icon))\n\u00a0 \u00a0 \u00a0 \u00a0setIcon(TodoIcon.Default)\n\u00a0 \u00a0 \u00a0 \u00a0setText(\"\")\n\u00a0 \u00a0}<\/strong>\n\u00a0 \u00a0Column {\n\u00a0 \u00a0 \u00a0 \u00a0Row(Modifier\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0.padding(horizontal = 16.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0.padding(top = 16.dp)\n\u00a0 \u00a0 \u00a0 \u00a0) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0TodoInputText(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0text = text,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0onTextChange = setText,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0modifier = Modifier\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0.weight(1f)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0.padding(end = 8.dp),\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0onImeAction = submit<\/strong> \/\/ TodoInputText\uc5d0\uac8c submit \ucf5c\ubc31 \uc804\ub2ec\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0TodoEditButton(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0onClick = submit<\/strong>, \/\/ TodoEditButton\uc5d0\uac8c submit \ucf5c\ubc31 \uc804\ub2ec\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0text = \"Add\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0modifier = Modifier.align(Alignment.CenterVertically),\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0enabled = text.isNotBlank()\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0)\n\u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0 \u00a0 \u00a0if (iconsVisible) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0AnimatedIconRow(icon, setIcon, Modifier.padding(top = 8.dp))\n\u00a0 \u00a0 \u00a0 \u00a0} else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Spacer(modifier = Modifier.height(16.dp))\n\u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0}\n}<\/code><\/pre>\n\n\n\n
\uc6d0\ud558\ub294 \uacbd\uc6b0, \ub354 \ub098\uc544\uac00 \ud568\uc218\ub85c\ubd80\ud130 \ud574\ub2f9 \ub85c\uc9c1\uc744 \ucd94\ucd9c\ud560 \uc218 \uc788\ub2e4. \uadf8\ub7ec\ub098 \uc774 \ucef4\ud3ec\uc800\ube14\uc740 \uaf64 \uad1c\ucc2e\uc544 \ubcf4\uc774\ubbc0\ub85c \uadf8\ub0e5 \ub450\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
\uc774\uac83\uc740 Compose\uc758 \ud070 \uc7a5\uc810 \uc911 \ud558\ub098\ub2e4. Kotlin\uc5d0\uc11c UI\ub97c \uc120\uc5b8\ud558\uae30 \ub54c\ubb38\uc5d0 \ucf54\ub4dc\ub97c \ubd84\ub9ac\ud558\uace0 \uc7ac\uc0ac\uc6a9\ud558\ub294 \ub370 \ud544\uc694\ud55c \ucd94\uc0c1\ud654\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ud0a4\ubcf4\ub4dc\uc640 \ud568\uaed8 \uc774\ub97c \ub2e4\ub8e8\uae30 \uc704\ud574\uc11c\ub294 TextField<\/em> \uac00 \uc81c\uacf5\ud558\ub294 \ub450\uac00\uc9c0 \ub9e4\uac1c\ubcc0\uc218\uac00 \uc788\ub2e4.<\/p>\n\n\n\n
  • keyboardOptions<\/em> – Done IME action\uc744 \ubcf4\uc5ec\uc8fc\ub294\uac83\uc744 \ud65c\uc131\ud654\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub41c\ub2e4.<\/li>
  • keyboardActions<\/em> – \ud2b8\ub9ac\uac70\ub41c \ud2b9\uc815 IME \uc791\uc5c5\uc5d0 \ub300\ud55c \uc751\ub2f5\uc73c\ub85c \ud2b8\ub9ac\uac70\ud560 \uc791\uc5c5\uc744 \uc9c0\uc815\ud558\ub294 \ub370 \uc0ac\uc6a9\ub41c\ub2e4. \uc704\uc758 \uacbd\uc6b0 Done(\uc644\ub8cc)\uc744 \ub204\ub974\uba74 submit\uc774 \ud638\ucd9c\ub418\uace0 \ud0a4\ubcf4\ub4dc\uac00 \uc228\uaca8\uc9c4\ub2e4.<\/li><\/ul>\n\n\n\n
    \uc18c\ud504\ud2b8\uc6e8\uc5b4 \ud0a4\ubcf4\ub4dc\ub97c \uc81c\uc5b4\ud558\uae30 \uc704\ud574\uc11c, \uc6b0\ub9ac\ub294 LocalSoftwareKeyboardController.current\ub97c \uc0ac\uc6a9\ud560 \uac83\uc774\ub2e4.\uc774\uac70\ub294 \uc544\uc9c1 \uc2e4\ud5d8\uc801\uc778 API\uc774\uae30 \ub54c\ubb38\uc5d0, @OptIn(ExperimentalComposeUiApi::class) \uc560\ub178\ud14c\uc774\uc158\uc744 \ud568\uc218\uc5d0 \ubd99\uc5ec\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    @OptIn(ExperimentalComposeUiApi::class)<\/strong>\n@Composable\nfun TodoInputText(\n\u00a0 \u00a0 text: String,\n\u00a0 \u00a0 onTextChange: (String) -> Unit,\n\u00a0 \u00a0 modifier: Modifier = Modifier,\n\u00a0 \u00a0 onImeAction: () -> Unit = {}\n) {\n\u00a0 \u00a0 val keyboardController = LocalSoftwareKeyboardController.current\n\u00a0 \u00a0 TextField(\n\u00a0 \u00a0 \u00a0 \u00a0 value = text,\n\u00a0 \u00a0 \u00a0 \u00a0 onValueChange = onTextChange,\n\u00a0 \u00a0 \u00a0 \u00a0 colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),\n\u00a0 \u00a0 \u00a0 \u00a0 maxLines = 1,\n\u00a0 \u00a0 \u00a0 \u00a0 keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),\n\u00a0 \u00a0 \u00a0 \u00a0 keyboardActions = KeyboardActions(onDone = {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onImeAction()\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 keyboardController?.hide()\n\u00a0 \u00a0 \u00a0 \u00a0 }),\n\u00a0 \u00a0 \u00a0 \u00a0 modifier = modifier\n\u00a0 \u00a0 )\n}<\/code><\/pre>\n\n\n\n
    \uc571\uc744 \ub2e4\uc2dc \uc2dc\uc791\ud558\uc5ec \uc0c8\ub85c\uc6b4 \uc544\uc774\ucf58\uc744 \uc2dc\ub3c4\ud574\ubcf4\uae30<\/h2>\n\n\n\n
    \uc571\uc744 \ub2e4\uc2dc \uc2e4\ud589\ud558\uba74 text \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub420 \ub54c \uc544\uc774\ucf58\uc774 \uc790\ub3d9\uc73c\ub85c \ud45c\uc2dc\ub418\uace0 \uc228\uaca8\uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4. \uc544\uc774\ucf58 \uc120\ud0dd\uc744 \ubcc0\uacbd\ud560 \uc218\ub3c4 \uc788\ub2e4. “Add” \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \uc785\ub825\ub41c \uac12\uc744 \uae30\ubc18\uc73c\ub85c \uc0c8\ub85c\uc6b4 TodoItem\uc774 \uc0dd\uc131\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc9c0\uae08\uae4c\uc9c0 \ucef4\ud3ec\uc988\uc5d0\uc11c\uc758 \uc0c1\ud0dc, \uc0c1\ud0dc \ub04c\uc5b4\uc62c\ub9ac\uae30 \ubc0f \uc0c1\ud0dc\ub97c \uae30\ubc18\uc73c\ub85c \ub3d9\uc801 UI\ub97c \ube4c\ub4dc\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \ubc30\uc6e0\ub2e4.<\/p>\n\n\n\n
    \ub2e4\uc74c \uba87\uac00\uc9c0 \uc139\uc158\uc5d0\uc11c\ub294 state\uc640 \uc0c1\ud638 \uc791\uc6a9\ud558\ub294 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
    \uc9c0\ub09c \uc139\uc158\uc5d0\uc11c \ucef4\ud3ec\uc800\ube14\uc5d0 state\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uacfc \ucef4\ud3ec\uc800\ube14\uc774 \uc0ac\uc6a9\ud558\ub294 state\ub97c stateless\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574 state hoisting\uc744 \ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574\uc11c \ubc30\uc6e0\ub2e4. \uc774\uc81c state\uae30\ubc18\uc758 \ub3d9\uc801\uc778 UI\ub97c \ub9cc\ub4e4\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uc790. \ub514\uc790\uc774\ub108\uc758 \ubaa9\uc5c5 \ub514\uc790\uc778\uc73c\ub85c \ub2e4\uc2dc \ubcf4\uba74, \ud14d\uc2a4\ud2b8\uac00 \uacf5\ubc31\uc774 \uc544\ub2d0 \ub54c\ub9c8\ub2e4 icon\ud589\uc744 \ubcf4\uc5ec\uc918\uc57c \ud55c\ub2e4. \uc0c1\ud0dc\ub85c\ubd80\ud130 iconVisible \uc5bb\uae30 TodoScreen.kt \uc744 \uc5f4\uace0 \uc0c8\ub85c\uc6b4 state \ubcc0\uc218\ub97c \uc0dd\uc131\ud558\uc5ec \ud604\uc7ac \uc120\ud0dd\ub41c icon\uc744 […]<\/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\/45650"}],"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=45650"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45650\/revisions"}],"predecessor-version":[{"id":45656,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45650\/revisions\/45656"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}