{"id":45657,"date":"2021-11-17T03:17:58","date_gmt":"2021-11-16T18:17:58","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45657"},"modified":"2021-11-17T03:18:00","modified_gmt":"2021-11-16T18:18:00","slug":"using-state-in-jetpack-compose-stateless-%ec%bb%b4%ed%8f%ac%ec%a0%80%eb%b8%94-%ec%b6%94%ec%b6%9c%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45657","title":{"rendered":"Using state in Jetpack Compose – Stateless \ucef4\ud3ec\uc800\ube14 \ucd94\ucd9c\ud558\uae30"},"content":{"rendered":"\n

\ub514\uc790\uc774\ub108\uac00 \uc624\ub298 \uc0c8\ub85c\uc6b4 \ub514\uc790\uc778 \ud2b8\ub80c\ub4dc \uc0c1\uc5d0 \uc788\ub2e4. \ub2e8\uc815\ud558\uc9c0 \ubabb\ud55c UI\uc640 \ud3ec\uc2a4\ud2b8 \uba38\ud14c\ub9ac\uc5bc\uc740 \uc0ac\ub77c\uc84c\ub2e4. \uc774\ubc88\uc8fc \ub514\uc790\uc778\uc740 \ub514\uc790\uc778 \ud2b8\ub808\ub4dc\uc778 “\ub124\uc624 \ubaa8\ub358 \uc778\ud130\ub809\ud2f0\ube0c”\ub97c \ub530\ub974\ub294 \uac83\uc774\ub2e4. \ub514\uc790\uc774\ub108\uc5d0\uac8c \uadf8\uac8c \ubb50\ub0d0\uace0 \ubb3c\uc5c8\uace0 \ub300\ub2f5\uc740 \uc774\ubaa8\uc9c0\uac00 \ud3ec\ud568\ud558\uc5ec \uc57d\uac04 \ud63c\ub780\uc2a4\ub7ec\uc6e0\ub2e4. \ud558\uc9c0\ub9cc \uc5b4\uca0c\ub4e0, \uc5ec\uae30\uc5d0 \ubaa9\uc5c5 \ub514\uc790\uc778\uc774 \uc788\ub2e4.<\/p>\n\n\n\n

Tip:<\/strong> \ub124\uc624 \ubaa8\ub358 \uc778\ud130\ub809\ud2f0\ube0c\ub294 \uc544\ub9c8\ub3c4 \ub514\uc790\uc778 \ud2b8\ub80c\ub4dc\uc77c \uac83\uc774\ub2e4.<\/p><\/blockquote>\n\n\n\n

\"\"
\uc218\uc815 \ubaa8\ub4dc \ubaa9\uc5c5 \ub514\uc790\uc778<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n

\ub514\uc790\uc774\ub108\ub294 \uc0c8\ub85c\uc6b4 \ub514\uc790\uc778\uc740 \uc800\uc7a5 \ubc0f \uc644\ub8cc \uc774\ubaa8\ud2f0\ucf58\uc73c\ub85c \ubcc0\uacbd\ub41c \ubc84\ud2bc\uacfc \ud568\uaed8 \ub3d9\uc77c\ud55c \uc785\ub825\ud654\uba74\uc744 \uc7ac\uc0ac\uc6a9\ud55c\ub2e4\uace0 \ub9d0\ud55c\ub2e4.<\/p>\n\n\n\n

\uc9c0\ub09c \uc139\uc158\uc758 \ub05d\uc5d0\uc11c TodoItemInput\uc744 stateful\ud55c \ucef4\ud3ec\uc800\ube14\ub85c \ub480\ub2e4. Todo\ub9cc \uc785\ub825\ud560 \ub54c\ub294 \uad1c\ucc2e\uc558\uc9c0\ub9cc \uc774\uc81c\ub294 \uc5d0\ub514\ud130\uc774\ubbc0\ub85c state hoisting\uc744 \uc9c0\uc6d0\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n

\uc774 \uc139\uc158\uc5d0\uc11c\ub294 stateful \ucef4\ud3ec\uc800\ube14\ub85c\ubd80\ud130 state\ub97c \ucd94\ucd9c\ud558\uc5ec stateless\ub85c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574\uc11c \ubc30\uc6b4\ub2e4. \uc774\ub807\uac8c \ud558\uba74 Todo\ub97c \ucd94\uac00\ud558\uace0 \ud3b8\uc9d1\ud560 \ub54c \ub3d9\uc77c\ud55c \ucef4\ud3ec\uc800\ube14\uc744 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

Stateless \ucef4\ud3ec\uc800\ube14\ub85c TodoItemInput \ubcc0\ud658\ud558\uae30<\/h2>\n\n\n\n

\uc2dc\uc791\ud558\uae30 \uc704\ud574, TodoItemInput<\/em>\uc5d0\uc11c state hoisting\uc744 \ud574\uc57c \ud55c\ub2e4. \uadf8\ub7ec\ub098 \uc6b0\ub9ac\ub294 \uc774\uac78 \uc5b4\ub514\ub85c \ub04c\uc5b4\uc62c\ub824\uc57c \ud560\uae4c? TodoScreen<\/em>\uc5d0 \uc9c1\uc811 \ub123\uc744 \uc218\ub3c4 \uc788\uc9c0\ub9cc \uc774\ubbf8 \ub0b4\ubd80 state\uc640 \uc644\ub8cc\ub41c event\uc5d0\uc11c \uc798 \uc791\ub3d9\ud558\uace0 \uc788\ub2e4. \uadf8\ub798\uc11c \uadf8 API\ub97c \ubcc0\uacbd\ud558\uace0 \uc2f6\uc9c0 \uc54a\ub2e4.<\/p>\n\n\n\n

\ub300\uc2e0 \uc6b0\ub9ac\uac00 \ud560 \uc218 \uc788\ub294 \uac83\uc740 \ucef4\ud3ec\uc800\ube14\uc744 \ub450 \uac1c\ub85c \ubd84\ud560\ud558\ub294 \uac83\uc774\ub2e4. \ud558\ub098\ub294 state\uac00 \uc788\uace0 \ub2e4\ub978 \ud558\ub098\ub294 stateless\ub2e4.<\/p>\n\n\n\n

TodoScreen.kt<\/em>\ub97c \uc5f4\uace0 TodoItemInput<\/em>\uc744 \ub450\uac1c\uc758 \ucef4\ud3ec\uc800\ube14\ub85c \ubd84\ud574\ud55c \ub2e4\uc74c, \uc0c8\ub85c\uc6b4 TodoItems<\/em>\ub97c \uc785\ub825\ud560 \ub54c\ub9cc \uc720\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 stateful \ucef4\ud3ec\uc800\ube14\uc778 TodoItemEntryInput<\/em>\uc73c\ub85c \uc774\ub984\uc744 \ubcc0\uacbd\ud55c\ub2e4.<\/p>\n\n\n\n

Android Studio\uc5d0\uc11c Refactor->Function(Extract Method)<\/strong> \uba85\ub839\uc744 \uc0ac\uc6a9\ud558\uc5ec \ucf54\ub4dc\ub97c \uc785\ub825\ud558\uc9c0 \uc54a\uace0 \uc774 \ub9ac\ud329\ud130\ub9c1\uc744 \uc218\ud589\ud560 \uc218 \uc788\ub2e4.<\/p>

1. TodoItemInput<\/strong>\uc758 UI \uc77c\ubd80\ub97c \uc120\ud0dd\ud55c\ub2e4 (Column<\/strong>\uacfc \uadf8 \ud558\uc704\uc694\uc18c\ub4e4)<\/p>

2. Refactory -> Function \uc744 \uc120\ud0dd\ud55c\ub2e4.(\uc624\ub978\ucabd \ud074\ub9ad \uba54\ub274\uc5d0\uc11c<\/em> Cmd\/Ctl + Alt + M<\/strong>)<\/p>

\"\"<\/p>

3. \uc0c8 \ud568\uc218\uac00 public<\/strong>\uc778\uc9c0 \ud655\uc778\ud558\uc790 (stateful \ubc0f stateless \ucef4\ud3ec\uc800\ube14\uc744 \ubaa8\ub450 export\ud558\ub824\uace0 \ud568)<\/p>

\"\"<\/p>

4. \uc0c8\ub85c\uc6b4 \ud568\uc218\ub294 TodoItemInput<\/strong>\uc73c\ub85c \uc774\ub984 \uc9d3\ub294\ub2e4.<\/p>

\"\"<\/p>

5. \ub9e4\uac1c\ubcc0\uc218\ub4e4\uc744 \uc7ac\uc815\ub82c\ud558\uc5ec, (value, onValueChnage)<\/strong> \uc30d\uc744 \uc11c\ub85c \uc606\uc5d0 \ub450\ub3c4\ub85d \ud55c\ub2e4.<\/p>

\"\"<\/p>

6. \ub9e4\uac1c\ubcc0\uc218 setText<\/strong> \ubc0f setIcon<\/strong>\uc758 \uc774\ub984\uc744 \uac01\uac01 onTextChange<\/strong> \ubc0f onIconChange<\/strong>\ub85c \ubc14\uafbc\ub2e4.<\/p>

\"\" <\/p>

7. OK<\/p>

\uc798 \ub418\uc5c8\ub2e4\uba74,<\/p>

1. \uc0c8\ub85c\uc6b4 \ud568\uc218 \ud638\ucd9c \uc704\uc5d0\uc11c Alt + Enter<\/strong>\ub97c \uc785\ub825\ud558\uace0 “Add names to call arguments”<\/strong>\ub97c \uc120\ud0dd\ud55c\ub2e4.<\/p>

\"\" <\/p>

2. stateful \ud568\uc218\ub97c TodoItemEntryInput<\/strong>\uc73c\ub85c \uc774\ub984 \ubcc0\uacbd\ud55c\ub2e4.<\/p>

– stateful \ubc0f stateless TodoItemEntry<\/strong> \ucef4\ud3ec\uc800\ube14\ub4e4\uc740 \uc2e4\uc81c\ub85c\ub294 \uac19\uc740 \uc774\ub984\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc774 \ucf54\ub4dc\ub7a9\uc5d0\uc11c\ub294 \uad6c\ubd84\ud558\uae30 \ud3b8\ud558\uac8c \ub2e4\ub974\uac8c \uc9d3\ub294\ub2e4. <\/p><\/blockquote>\n\n\n\n

\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemEntryInput(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}\n\u00a0 \u00a0TodoItemInput(\n\u00a0 \u00a0 \u00a0 \u00a0text = text,\n\u00a0 \u00a0 \u00a0 \u00a0onTextChange = setText,\n\u00a0 \u00a0 \u00a0 \u00a0icon = icon,\n\u00a0 \u00a0 \u00a0 \u00a0onIconChange = setIcon,\n\u00a0 \u00a0 \u00a0 \u00a0submit = submit,\n\u00a0 \u00a0 \u00a0 \u00a0iconsVisible = iconsVisible\n\u00a0 \u00a0)\n}\n\n@Composable\nfun TodoItemInput(\n\u00a0 \u00a0text: String,\n\u00a0 \u00a0onTextChange: (String) -> Unit,\n\u00a0 \u00a0icon: TodoIcon,\n\u00a0 \u00a0onIconChange: (TodoIcon) -> Unit,\n\u00a0 \u00a0submit: () -> Unit,\n\u00a0 \u00a0iconsVisible: Boolean\n) {\n\u00a0 \u00a0Column {\n\u00a0 \u00a0 \u00a0 \u00a0Row(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Modifier\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0.padding(horizontal = 16.dp)\n\u00a0 \u00a0 \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,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0onTextChange,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Modifier\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 \u00a0submit\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0TodoEditButton(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0onClick = submit,\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, onIconChange, 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

\uc774 \ubcc0\ud658\uc740 \ucef4\ud3ec\uc988\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc774\ud574\ud574\uc57c \ud558\ub294 \uc815\ub9d0 \uc911\uc694\ud55c \ubcc0\ud658\uc774\ub2e4. stateful \ucef4\ud3ec\uc800\ube14\uc744 TodoItemInput<\/em>\uc744 \uac00\uc838\uc640 \ub450\uac1c\uc758 \ucef4\ud3ec\uc800\ube14\ub85c \ub098\ub204\uc5c8\ub2e4. \ud558\ub098\ub294 \uc0c1\ud0dc(TodoItemEntryInput<\/em>)\uac00 \uc788\uace0 \ub2e4\ub978 \ud558\ub098\ub294 \uc0c1\ud0dc\uac00 \uc5c6\ub2e4(TodoItemInput<\/em>)<\/p>\n\n\n\n
stateless \ucef4\ud3ec\uc800\ube14\uc5d0\ub294 \ubaa8\ub4e0 UI \uad00\ub828 \ucf54\ub4dc\uac00 \uc788\uace0, stateful \ucef4\ud3ec\uc800\ube14\uc5d0\ub294 UI\uad00\ub828 \ucf54\ub4dc\uac00 \uc5c6\ub2e4.
\uc774\ub807\uac8c \ud558\uba74 \uc0c1\ud0dc\ub97c \ub2e4\ub974\uac8c \uc9c0\uc6d0\ud558\ub824\ub294 \uc0c1\ud669\uc5d0\uc11c UI \ucf54\ub4dc\ub97c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Stateful \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c Stateless \ucef4\ud3ec\uc800\ube14\uc744 \ucd94\ucd9c\ud558\uba74, \ub2e4\ub978 \uc704\uce58\uc5d0\uc11c UI\ub97c \ub354 \uc27d\uac8c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n
\uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub2e4\uc2dc \uc2e4\ud589\ud558\uae30<\/h2>\n\n\n\n
\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub2e4\uc2dc \uc2e4\ud589\ud558\uc5ec todo \uc785\ub825\uc774 \uc5ec\uc804\ud788 \uc791\ub3d9\ud558\ub294\uc9c0 \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n
\ucd95\ud558\ud55c\ub2e4. \uc131\uacf5\uc801\uc73c\ub85c \uc5b4\ub5a0\ud55c API\uc758 \ubcc0\ud654 \uc5c6\uc774 stateless \ucef4\ud3ec\uc800\ube14\uc744 stateful \ucef4\ud3ec\uc800\ube14\ub85c\ubd80\ud130 \ucd94\ucd9c\ud588\ub2e4 <\/p>\n\n\n\n
\ub2e4\uc74c \uc139\uc158\uc5d0\uc11c \uc774\ub97c \ud1b5\ud574 UI\ub97c \uc0c1\ud0dc\uc640 \uc5f0\uacb0\ud558\uc9c0 \uc54a\uace0 \ub2e4\ub978 \uc704\uce58\uc5d0\uc11c UI \ub85c\uc9c1\uc744 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n","protected":false},"excerpt":{"rendered":"
\ub514\uc790\uc774\ub108\uac00 \uc624\ub298 \uc0c8\ub85c\uc6b4 \ub514\uc790\uc778 \ud2b8\ub80c\ub4dc \uc0c1\uc5d0 \uc788\ub2e4. \ub2e8\uc815\ud558\uc9c0 \ubabb\ud55c UI\uc640 \ud3ec\uc2a4\ud2b8 \uba38\ud14c\ub9ac\uc5bc\uc740 \uc0ac\ub77c\uc84c\ub2e4. \uc774\ubc88\uc8fc \ub514\uc790\uc778\uc740 \ub514\uc790\uc778 \ud2b8\ub808\ub4dc\uc778 “\ub124\uc624 \ubaa8\ub358 \uc778\ud130\ub809\ud2f0\ube0c”\ub97c \ub530\ub974\ub294 \uac83\uc774\ub2e4. \ub514\uc790\uc774\ub108\uc5d0\uac8c \uadf8\uac8c \ubb50\ub0d0\uace0 \ubb3c\uc5c8\uace0 \ub300\ub2f5\uc740 \uc774\ubaa8\uc9c0\uac00 \ud3ec\ud568\ud558\uc5ec \uc57d\uac04 \ud63c\ub780\uc2a4\ub7ec\uc6e0\ub2e4. \ud558\uc9c0\ub9cc \uc5b4\uca0c\ub4e0, \uc5ec\uae30\uc5d0 \ubaa9\uc5c5 \ub514\uc790\uc778\uc774 \uc788\ub2e4. Tip: \ub124\uc624 \ubaa8\ub358 \uc778\ud130\ub809\ud2f0\ube0c\ub294 \uc544\ub9c8\ub3c4 \ub514\uc790\uc778 \ud2b8\ub80c\ub4dc\uc77c \uac83\uc774\ub2e4. \ub514\uc790\uc774\ub108\ub294 \uc0c8\ub85c\uc6b4 \ub514\uc790\uc778\uc740 \uc800\uc7a5 \ubc0f \uc644\ub8cc […]<\/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\/45657"}],"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=45657"}],"version-history":[{"count":2,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45657\/revisions"}],"predecessor-version":[{"id":45666,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45657\/revisions\/45666"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}