{"id":45679,"date":"2021-11-17T20:47:46","date_gmt":"2021-11-17T11:47:46","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45679"},"modified":"2021-11-17T20:49:10","modified_gmt":"2021-11-17T11:49:10","slug":"using-state-in-jetpack-compose-%ed%99%94%eb%a9%b4-%ec%84%b9%ec%85%98%ec%9d%84-%ec%a0%84%eb%8b%ac%ed%95%98%ea%b8%b0-%ec%9c%84%ed%95%b4-slot-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45679","title":{"rendered":"Using state in Jetpack Compose – \ud654\uba74 \uc139\uc158\uc744 \uc804\ub2ec\ud558\uae30 \uc704\ud574 slot \uc0ac\uc6a9\ud558\uae30"},"content":{"rendered":"\n

\ubcf5\uc7a1\ud55c UI\ub97c \ud45c\uc2dc\ud558\ub294 stateless \ucef4\ud3ec\uc800\ube14\uc5d0\ub294 \ub9ce\uc740 \ub9e4\uac1c\ubcc0\uc218\uac00 \ud3ec\ud568\ub420 \uc218 \uc788\ub2e4. \ub9e4\uac1c\ubcc0\uc218\uac00 \ub9ce\uc9c0 \uc54a\uace0, \ub9e4\uac1c\ubcc0\uc218\uac00 \uc9c1\uc811\uc801\uc73c\ub85c \ucef4\ud3ec\uc800\ube14\uc744 \uc124\uc815\ud558\ub294 \uacbd\uc6b0, \uc774\uac74 \uad1c\ucc2e\ub2e4. \uadf8\ub7ec\ub098 \ub54c\ub85c\ub294 \ud558\uc704 \ucef4\ud3ec\uc800\ube14\uc744 \uc124\uc815\ud558\uae30 \uc704\ud574 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc804\ub2ec\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\uc6b0\ub9ac\uc758 \ub124\uc624-\ubaa8\ub358 \uc778\ud130\ub809\ud2f0\ube0c \ub514\uc790\uc778\uc5d0\uc11c\ub294 \ub514\uc790\uc774\ub108\uac00 Add \ubc84\ud2bc\uc744 \uc0c1\ub2e8\uc5d0 \uc720\uc9c0\ud558\uace0, \uc778\ub77c\uc778 \uc5d0\ub514\ud130\uc5d0\ub294 \ub450\uac1c\uc758 \uc774\ubaa8\uc9c0 \ubc84\ud2bc\uc73c\ub85c \uad50\uccb4\ud558\uae30\ub97c \uc6d0\ud55c\ub2e4. \uc774 \uacbd\uc6b0\ub97c \ucc98\ub9ac\ud558\uae30 \uc704\ud574 TodoItemInput\uc5d0 \ub354 \ub9ce\uc740 \ub9e4\uac1c\ubcc0\uc218\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc774\uac83\uc774 \uc2e4\uc81c\ub85c TodoItemInput\uc758 \ucc45\uc784\uc778\uc9c0\ub294 \ud655\uc2e4\ud558\uc9c0 \uc54a\ub2e4.<\/p>\n\n\n\n

\uc6b0\ub9ac\uc5d0\uac8c \ud544\uc694\ud55c \uac83\uc740 \ucef4\ud3ec\uc800\ube14\uc774 \ubbf8\ub9ac \uad6c\uc131\ub41c \ubc84\ud2bc \uc139\uc158\uc744 \uac00\uc838\uc624\ub294 \ubc29\ubc95\uc774\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \ud638\ucd9c\uc790\uac00 \ubc84\ud2bc\uc744 \uad6c\uc131\ud560 \uc218 \uc788\uc9c0\ub9cc TodoItemInput\uc73c\ub85c \uad6c\uc131\ud558\ub294 \ub370 \ud544\uc694\ud55c \ubaa8\ub4e0 state\ub97c \uacf5\uc720\ud558\uc9c0 \uc54a\uace0\ub3c4 \ubc84\ud2bc\uc744 \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

\uc774\ub807\uac8c \ud558\uba74 \uc0c1\ud0dc stateless \ucef4\ud3ec\uc800\ube14\uc5d0 \uc804\ub2ec\ub418\ub294 \ub9e4\uac1c\ubcc0\uc218\uc758 \uc218\ub97c \uc904\uc774\uace0 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\uc131\uc744 \ub192\uc77c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

\ubbf8\ub9ac \uad6c\uc131\ub41c \uc139\uc158\uc744 \uc804\ub2ec\ud558\ub294 \ud328\ud134\uc73c\ub85c slot\uc774 \uc788\ub2e4. slot\uc740 \ucef4\ud3ec\uc800\ube14\uc5d0 \ub300\ud55c \ub9e4\uac1c\ubcc0\uc218\ub85c, \ud638\ucd9c\uc790\uac00 \ud654\uba74\uc758 \ud55c \uc139\uc158\uc744 \ud615\uc131\ud560 \uc218 \uc788\ub3c4\ub85d \ud55c\ub2e4. \ub0b4\uc7a5\ub41c \ucef4\ud3ec\uc800\ube14 API\ub97c \ud1b5\ud574 slot \uc608\uc81c\ub97c \ucc3e\uc744 \uc218 \uc788\ub2e4. \uac00\uc7a5 \uc77c\ubc18\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uc608\uc81c\uc911 \ud558\ub098\ub294 Scaffold\ub2e4.<\/p>\n\n\n\n

Scaffold\ub294 \ud654\uba74\uc758 topBar, bottomBar, body\uc640 \uac19\uc740 Material \ub514\uc790\uc778\uc758 \uc804\uccb4 \ud654\uba74\uc744 \uc124\uba85\ud558\uae30 \uc704\ud55c \ucef4\ud3ec\uc800\ube14\uc774\ub2e4.<\/p>\n\n\n\n

\ud654\uba74\uc758 \uac01 \uc139\uc158\uc744 \uad6c\uc131\ud558\uae30 \uc704\ud574 \uc218\ubc31 \uac1c\uc758 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc81c\uacf5\ud558\ub294 \ub300\uc2e0 Scaffold\ub294 \uc6d0\ud558\ub294 \ucef4\ud3ec\uc800\ube14\ub85c \ucc44\uc6b8 \uc218 \uc788\ub294 slot\uc744 \ub178\ucd9c\uc2dc\ud0a8\ub2e4. \uc774\ub294 Scaffold\uc5d0 \ub300\ud55c \ub9e4\uac1c\ubcc0\uc218\uc758 \uc218\ub97c \uc904\uc774\uace0, \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc778\ub2e4. \ucee4\uc2a4\ud140 topBar\ub97c \ub9cc\ub4e4\uace0 \uc2f6\ub2e4\uba74 Scaffold\uac00 \uae30\uaebc\uc774 \ud45c\ud604\ud574\uc900\ub2e4.<\/p>\n\n\n\n

@Composable
fun Scaffold(
   \/\/ ..
   topBar: @Composable (() -> Unit)? = null,
   bottomBar: @Composable (() -> Unit)? = null,
   \/\/ ..
   bodyContent: @Composable (PaddingValues) -> Unit
) {<\/code><\/pre>\n\n\n\n
Slot\uc740 \ud638\ucd9c\uc790\uac00 \ud654\uba74\uc758 \ud55c \uc139\uc158\uc744 \ud45c\ud604\ud558\ub3c4\ub85d \ud558\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218 \ub9e4\uac1c\ubcc0\uc218\ub4e4\uc774\ub2e4.<\/p>
slot\uc740 \ub9e4\uac1c\ubcc0\uc218 \ud0c0\uc785\uc774 @Composable() -> Unit \uacfc \ud568\uaed8 \uc120\uc5b8\ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\n
TodoItemInput \uc5d0 slot \uc815\uc758\ud558\uae30<\/h2>\n\n\n\n
\/\/ TodoScreen.kt\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\u00a0 \u00a0buttonSlot: @Composable () -> Unit<\/strong>\n) {\n\u00a0 \/\/ ... <\/code><\/pre>\n\n\n\n
\uc774\uac83\uc740 \ud638\ucd9c\uc790\uac00 \uc6d0\ud558\ub294 \ubc84\ud2bc\uc73c\ub85c \ucc44\uc6b8 \uc218 \uc788\ub294 \uc77c\ubc18\uc801\uc778 slot\uc774\ub2e4. \ud5e4\ub354 \ubc0f \uc778\ub77c\uc778 \uc5d0\ub514\ud130\uc5d0\uc11c \ub2e4\ub978 \ubc84\ud2bc\uc744 \uc9c0\uc815\ud558\ub294\ub370 \uc0ac\uc6a9\ud560 \uac83\uc774\ub2e4.<\/p>\n\n\n\n
buttonSlot\uc758 \ub0b4\uc6a9 \ubcf4\uc5ec\uc8fc\uae30<\/h2>\n\n\n\n
TodoEditButton\uc5d0 \ub300\ud55c \ud638\ucd9c\uc744 slot\uc758 \ub0b4\uc6a9\uc73c\ub85c \uad50\uccb4\ud55c\ub2e4.<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\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\u00a0 \u00a0buttonSlot: @Composable() () -> Unit,\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\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ \uc0c8\ub85c\uc6b4 \ucf54\ub4dc: TodoEditButton\uc5d0 \ub300\ud55c \ud638\ucd9c\uc744 slot\uc758 \ub0b4\uc6a9\uc73c\ub85c \uad50\uccb4\ud55c\ub2e4\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Spacer(modifier = Modifier.width(8.dp))\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Box(Modifier.align(Alignment.CenterVertically)) { buttonSlot() }\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ \uc0c8\ub85c\uc6b4 \ucf54\ub4dc\uc758 \ub05d\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
buttonSlot()\uc744 \uc9c1\uc811\uc801\uc73c\ub85c \ud638\ucd9c\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc, align<\/em>\uc744 \uc911\uc559\uc5d0 \uc815\ub82c\uc744 \uc720\uc9c0\ud574\uc57c \ud558\uae30 \ub54c\ubb38\uc5d0 Box\ub0b4\uc5d0 slot\uc744 \ubc30\uce58\ud55c\ub2e4.<\/p>\n\n\n\n
Slot\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 stateful\ud55c TodoItemEntryInput \uc218\uc815\ud558\uae30<\/h2>\n\n\n\n
\uc774\uc81c buttonSlot\uc744 \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud638\ucd9c\ud558\ub294 \ucabd\uc744 \uc218\uc815\ud574\uc57c \ud55c\ub2e4. \uba3c\uc800 TodoItemEntryInput\uc744 \uc218\uc815\ud558\ub3c4\ub85d \ud558\uc790<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemEntryInput(onItemComplete: (TodoItem) -> Unit) {\n\u00a0 \u00a0val (text, onTextChange) = remember { mutableStateOf(\"\") }\n\u00a0 \u00a0val (icon, onIconChange) = remember { mutableStateOf(TodoIcon.Default)}\n\u00a0 \u00a0\n\u00a0 \u00a0val submit = {\n\u00a0 \u00a0 \u00a0 \u00a0 if (text.isNotBlank()) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onItemComplete(TodoItem(text, icon))\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onTextChange(\"\")\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onIconChange(TodoIcon.Default)\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0}\n\u00a0 \u00a0TodoItemInput(\n\u00a0 \u00a0 \u00a0 \u00a0text = text,\n\u00a0 \u00a0 \u00a0 \u00a0onTextChange = onTextChange,\n\u00a0 \u00a0 \u00a0 \u00a0icon = icon,\n\u00a0 \u00a0 \u00a0 \u00a0onIconChange = onIconChange,\n\u00a0 \u00a0 \u00a0 \u00a0submit = submit,\n\u00a0 \u00a0 \u00a0 \u00a0iconsVisible = text.isNotBlank()\n\u00a0 \u00a0) {\n\u00a0 \u00a0 \u00a0 \u00a0TodoEditButton(onClick = submit, text = \"Add\", enabled = text.isNotBlank())\n\u00a0 \u00a0}<\/strong>\n}<\/code><\/pre>\n\n\n\n
buttonSlot\uc740 TodoItemInput\uc758 \ub9c8\uc9c0\ub9c9 \ub9e4\uac1c\ubcc0\uc218\uc774\ubbc0\ub85c \ud6c4\ud589 \ub78c\ub2e4 \uad6c\ubb38\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c \ub78c\ub2e4\uc5d0\uc11c \uc774\uc804\ucc98\ub7fc TodoEditButton\uc744 \ud638\ucd9c\ud55c\ub2e4.<\/p>\n\n\n\n
Slot\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 TodoItemInlineEditor \uc218\uc815\ud558\uae30<\/h2>\n\n\n\n
\ub9ac\ud329\ud130\ub9c1\uc744 \uc644\ub8cc\ud558\ub824\uba74 TodoItemInlineEditor\ub3c4 slot\uc744 \uc0ac\uc6a9\ud558\ub3c4\ub85d \ubcc0\uacbd\ud574\uc57c\ud55c\ub2e4.<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemInlineEditor(\n\u00a0 \u00a0item: TodoItem,\n\u00a0 \u00a0onEditItemChange: (TodoItem) -> Unit,\n\u00a0 \u00a0onEditDone: () -> Unit,\n\u00a0 \u00a0onRemoveItem: () -> Unit\n) = TodoItemInput(\n\u00a0 \u00a0text = item.task,\n\u00a0 \u00a0onTextChange = { onEditItemChange(item.copy(task = it)) },\n\u00a0 \u00a0icon = item.icon,\n\u00a0 \u00a0onIconChange = { onEditItemChange(item.copy(icon = it)) },\n\u00a0 \u00a0submit = onEditDone,\n\u00a0 \u00a0iconsVisible = true,\n\u00a0 \u00a0buttonSlot = {\n\u00a0 \u00a0 \u00a0 \u00a0Row {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0val shrinkButtons = Modifier.widthIn(20.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0TextButton(onClick = onEditDone, modifier = shrinkButtons) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Text(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0text = \"\\uD83D\\uDCBE\", \/\/ floppy disk\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0textAlign = TextAlign.End,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0modifier = Modifier.width(30.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0TextButton(onClick = onRemoveItem, modifier = shrinkButtons) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Text(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0text = \"\u274c\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0textAlign = TextAlign.End,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0modifier = Modifier.width(30.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0 \u00a0 \u00a0}\n\u00a0 \u00a0}<\/strong>\n)<\/code><\/pre>\n\n\n\n
\uc5ec\uae30\uc11c\ub294 buttonSlot\uc744 \uc774\ub984\uc774 \uc788\ub294 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ud588\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c buttonSlot\uc5d0\uc11c \uc778\ub77c\uc778 \ud3b8\uc9d1\uae30 \ub514\uc790\uc778\uc744 \uc704\ud55c \ub450 \uac1c\uc758 Button\uc744 \ud3ec\ud568\ud558\ub294 Row\ub97c \ub9cc\ub4e0\ub2e4.<\/p>\n\n\n\n
\uc571 \ub2e4\uc2dc \uc2dc\uc791\ud558\uae30<\/h2>\n\n\n\n
\uc571\uc744 \ub2e4\uc2dc \uc2e4\ud589\ud558\uace0 \uc778\ub77c\uc778 \ud3b8\uc9d1\uae30\ub97c \uc0ac\uc6a9\ud574\ubcf4\uc790.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\uc790\uc138\ud788 \ubcf4\uba74 \ud3b8\uc9d1\uae30\uc5d0 \ub4e4\uc5b4\uac00\uace0 \ub098\uac08 \ub54c \uc544\uc774\ucf58 \ud22c\uba85\ub3c4 \uc0c9\uc0c1\uc774 \ubcc0\uacbd\ub418\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4. \uc774\ub294 \ud22c\uba85\ub3c4 \uc0c9\uc0c1\uc774 TodoRow\uc5d0 \uae30\uc5b5\ub418\uc5b4 \ud3b8\uc9d1\uae30\ub97c \uc5f4 \ub54c \uc81c\uac70\ub418\uc5c8\ub2e4\uac00 \ucef4\ud3ec\uc9c0\uc158\uc5d0 \ub2e4\uc2dc \ucd94\uac00\ub418\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>
\uc774 \uc0c9\uc0c1\uc774 \ubcc0\uacbd\ub418\uc9c0 \uc54a\ub3c4\ub85d \ud558\ub824\uba74 ViewModel\ub85c state\ub97c hoisting\ud558\uba74\ub41c\ub2e4.<\/p><\/blockquote>\n\n\n\n
\uc774 \uc139\uc158\uc5d0\uc11c\ub294 \ud638\ucd9c\uc790\uac00 \ud654\uba74\uc758 \uc139\uc158\uc744 \uc81c\uc5b4\ud560 \uc218 \uc788\ub294 slot\uc744 \uc0ac\uc6a9\ud558\uc5ec stateless \ucef4\ud3ec\uc800\ube14\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud588\ub2e4. slot\uc744 \uc0ac\uc6a9\ud558\uc5ec, \ucd94\ud6c4\uc5d0 \ucd94\uac00\ub420 \uc218 \uc788\ub294 \ubaa8\ub4e0 \ub2e4\ub978 \ub514\uc790\uc778\uacfc TodoItemInput\uac00 \ud568\uaed8 \uacb0\ud569(coupling)\ub418\ub294 \uac83\uc744 \ubc29\uc9c0\ud588\ub2e4.<\/p>\n\n\n\n
stateless \ucef4\ud3ec\uc800\ube14\uc5d0 \ub9e4\uac1c\ubcc0\uc218\ub97c \ucd94\uac00\ud558\uc5ec \ud558\uc704\uc694\uc18c\ub97c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ud558\ub294 \uacbd\uc6b0 slot\uc774 \ub354 \ub098\uc740 \ub514\uc790\uc778\uc778\uc9c0 \ud3c9\uac00\ud574\ubcf4\uc790. slot\uc740 \ub9e4\uac1c\ubcc0\uc218\uc758 \uc218\ub97c \uad00\ub9ac \uac00\ub2a5\ud55c \uc0c1\ud0dc\ub85c \uc720\uc9c0\ud558\uba74\uc11c \ucef4\ud3ec\uc800\ube14\uc744 \ub354 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ub9cc\ub4dc\ub294 \uacbd\ud5a5\uc774 \uc788\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
\ubcf5\uc7a1\ud55c UI\ub97c \ud45c\uc2dc\ud558\ub294 stateless \ucef4\ud3ec\uc800\ube14\uc5d0\ub294 \ub9ce\uc740 \ub9e4\uac1c\ubcc0\uc218\uac00 \ud3ec\ud568\ub420 \uc218 \uc788\ub2e4. \ub9e4\uac1c\ubcc0\uc218\uac00 \ub9ce\uc9c0 \uc54a\uace0, \ub9e4\uac1c\ubcc0\uc218\uac00 \uc9c1\uc811\uc801\uc73c\ub85c \ucef4\ud3ec\uc800\ube14\uc744 \uc124\uc815\ud558\ub294 \uacbd\uc6b0, \uc774\uac74 \uad1c\ucc2e\ub2e4. \uadf8\ub7ec\ub098 \ub54c\ub85c\ub294 \ud558\uc704 \ucef4\ud3ec\uc800\ube14\uc744 \uc124\uc815\ud558\uae30 \uc704\ud574 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc804\ub2ec\ud574\uc57c \ud55c\ub2e4. \uc6b0\ub9ac\uc758 \ub124\uc624-\ubaa8\ub358 \uc778\ud130\ub809\ud2f0\ube0c \ub514\uc790\uc778\uc5d0\uc11c\ub294 \ub514\uc790\uc774\ub108\uac00 Add \ubc84\ud2bc\uc744 \uc0c1\ub2e8\uc5d0 \uc720\uc9c0\ud558\uace0, \uc778\ub77c\uc778 \uc5d0\ub514\ud130\uc5d0\ub294 \ub450\uac1c\uc758 \uc774\ubaa8\uc9c0 \ubc84\ud2bc\uc73c\ub85c \uad50\uccb4\ud558\uae30\ub97c \uc6d0\ud55c\ub2e4. \uc774 \uacbd\uc6b0\ub97c \ucc98\ub9ac\ud558\uae30 \uc704\ud574 TodoItemInput\uc5d0 […]<\/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\/45679"}],"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=45679"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45679\/revisions"}],"predecessor-version":[{"id":45684,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45679\/revisions\/45684"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}