{"id":45640,"date":"2021-11-16T20:44:45","date_gmt":"2021-11-16T11:44:45","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45640"},"modified":"2021-11-29T12:22:18","modified_gmt":"2021-11-29T03:22:18","slug":"using-state-in-jetpack-compose-%ec%bb%b4%ed%8f%ac%ec%a6%88-%eb%82%b4%ec%9d%98-%ec%83%81%ed%83%9c","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45640","title":{"rendered":"Using state in Jetpack Compose – \ucef4\ud3ec\uc988 \ub0b4\uc758 \uc0c1\ud0dc"},"content":{"rendered":"\n

\uc9c0\ub09c \uc139\uc158\uc5d0\uc11c \uc5b4\ub5bb\uac8c \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub4e4\uc774 \uba54\ubaa8\ub9ac\ub97c \uac16\ub294\uc9c0 \ubc30\uc6e0\ub2e4. \uc774\uc81c \uadf8 \uba54\ubaa8\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucef4\ud3ec\uc800\ube14\uc5d0 \uc0c1\ud0dc(state)\ub97c \ucd94\uac00 \ud574\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n

\"\"
Todo input (state:expanded(\ud655\uc7a5\ub428))<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Todo input (state:collapsed(\ucd95\uc18c\ub428))<\/strong><\/figcaption><\/figure>\n\n\n\n

\ub514\uc790\uc774\ub108\uac00 \ub2e8\uc815\uce58 \ubabb\ud55c \ub514\uc790\uc778\uc5d0\uc11c \ud3ec\uc2a4\ud2b8 \uba38\ud14c\ub9ac\uc5bc\ub85c \uc804\ud658\ud588\ub2e4. todo \uc785\ub825\uc5d0 \ub300\ud55c \uc0c8\ub85c\uc6b4 \ub514\uc790\uc778\uc740 \uc811\uc744\uc218 \uc788\ub294 \ud5e4\ub354\ub85c\uc368 \uac19\uc740 \uacf5\uac04\uc744 \ucc28\uc9c0\ud55c\ub2e4. \uadf8\ub9ac\uace0 \ud655\uc7a5(expanded) \ubc0f \ucd95\uc18c(collapsed) \ub450\uac1c\uc758 \uc0c1\ud0dc\ub97c \uac16\ub294\ub2e4. \ud14d\uc2a4\ud2b8\uac00 \ube44\uc5b4\uc788\uc9c0 \uc54a\ub2e4\uba74 \ud655\uc7a5\ub41c \uc0c1\ud0dc\ub97c \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

\uc774\uac78 \ub9cc\ub4dc\ub824\uba74, \uc6b0\uc120 \ud14d\uc2a4\ud2b8\uc640 \ubc84\ud2bc\uc744 \ub9cc\ub4e0 \ub4a4, \uc790\ub3d9\uc228\uae40 \uc544\uc774\ucf58\uc744 \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n

UI\uc5d0\uc11c \ud14d\uc2a4\ud2b8\ub97c \uc218\uc815\ud558\ub294 \uac83\uc740 stateful\ud558\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ubb38\uc790\ub97c \uc785\ub825\ud560 \ub54c\ub9c8\ub2e4 \ub610\ub294 \uc120\ud0dd \ud56d\ubaa9\uc744 \ubcc0\uacbd\ud560 \ub54c\uc5d0\ub3c4 \ud604\uc7ac \ud45c\uc2dc\ub41c \ud14d\uc2a4\ud2b8\ub97c \uc5c5\ub370\uc774\ud2b8\ud55c\ub2e4. \uc548\ub4dc\ub85c\uc774\ub4dc View \uc2dc\uc2a4\ud15c\uc5d0\uc11c, state\ub294 EditText<\/em> \ub0b4\ubd80\uc5d0 \uc788\uace0 onTextChanged<\/em> \ub9ac\uc2a4\ub108\ub97c \ud1b5\ud574 \ub178\ucd9c\ub418\uc5c8\ub2e4. \ud558\uc9c0\ub9cc \ucef4\ud3ec\uc800\ub294 \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc5d0 \ub9de\uac8c \uc124\uacc4\ub418\uc5b4 \uc774\ub7f0 \ubc29\uc2dd\uc740 \uc801\ud569\ud558\uc9c0 \uc54a\ub2e4.<\/p>\n\n\n\n

TextField\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub85c \uba38\ud14c\ub9ac\uc5bc\uc758 EditText\uc640 \ub3d9\ub4f1\ud558\ub2e4.<\/p><\/blockquote>\n\n\n\n

\ucef4\ud3ec\uc988\uc758 TextField<\/em>\ub294 stateless\ud55c \ucef4\ud3ec\uc800\ube14\uc774\ub2e4. todo \ubaa9\ub85d\uc758 \ubcc0\uacbd\uc0ac\ud56d\uc744 \ubcf4\uc5ec\uc8fc\ub294 TodoScreen<\/em>\uacfc \uac19\ub2e4. TextField<\/em>\ub294 \uc9c0\uc2dc\ud55c \ub0b4\uc6a9\uc744 \ud45c\uc2dc\ud558\uace0, \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud560 \ub54c \uc774\ubca4\ud2b8\ub97c \ubc1c\uc0dd\uc2dc\ud0a8\ub2e4.<\/p>\n\n\n\n

\ub0b4\uc7a5\ub41c \ucef4\ud3ec\uc800\ube14\ub4e4\uc740 \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc5d0 \ub9de\uac8c \uc124\uacc4\ub418\uc5c8\ub2e4.<\/strong><\/p>

\ub300\ubd80\ubd84\uc758 \ub0b4\uc7a5 \ucef4\ud3ec\uc800\ube14\ub4e4\uc740 \uac01 API\uc5d0 \ub300\ud574 \uc801\uc5b4\ub3c4 \ud558\ub098 \uc774\uc0c1\uc758 stateless\ud55c \ubc84\uc804\uc744 \uc81c\uacf5\ud55c\ub2e4. View \uc2dc\uc2a4\ud15c\uacfc \ube44\uad50\ud574\uc11c, \ub0b4\uc7a5\ub41c \ucef4\ud3ec\uc800\ube14\uc740 \uc218\uc815 \uac00\ub2a5\ud55c \ud14d\uc2a4\ud2b8\uc640 \uac19\uc740 \uc0c1\ud0dc \uc800\uc7a5 UI\uc5d0 \ub300\ud574 \ub0b4\ubd80 \uc0c1\ud0dc\uac00 \uc5c6\ub294 \uc635\uc158\uc744 \uc81c\uacf5\ud55c\ub2e4. \uc774\ub7f0\uc810\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \ucef4\ud3ec\uc800\ube14 \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc774\uc5d0\uc11c state\uc758 \uc911\ubcf5\uc744 \ub9c9\uc544\uc900\ub2e4. \uc608\ub97c \ub4e4\uba74, \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c Checkbox\uc5d0 \ub300\ud55c \uc0c1\ud0dc\ub97c \ub04c\uc5b4\uc62c\ub824 \uc911\ubcf5\ub41c state\uc5c6\uc774 \uc11c\ubc84 \uae30\ubc18\uc758 API\uc5d0 \uc758\uc874\ud558\ub3c4\ub85d \ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n

Stateful \ubc0f Stateless<\/font><\/font><\/strong><\/p>

Stateful\uc740 \uc0c1\ud0dc\uac00 \uc788\uace0, Stateless\ub294 \uc0c1\ud0dc\uac00 \uc5c6\ub294 \uac83\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>

\ucef4\ud3ec\uc988\uc5d0\uc11c\ub294 remember<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac1d\uccb4\ub97c \uc800\uc7a5\ud558\ub294 \ucef4\ud3ec\uc800\ube14\uc740 stateful\ud558\ub2e4\uace0 \ub9d0\ud560 \uc218 \uc788\ub2e4. stateful\ud55c \ucef4\ud3ec\uc800\ube14\uc740 \ud638\ucd9c\uc790\uac00 \uc0c1\ud0dc\ub97c \uc81c\uc5b4 \ubc0f \uc9c1\uc811 \uad00\ub9ac\ud558\uc9c0 \uc54a\uc544\ub3c4 \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uacbd\uc6b0\uc5d0 \uc720\uc6a9\ud558\ub2e4. \uadf8\ub7ec\ub098 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uac16\ub294 \ucef4\ud3ec\uc800\ube14\uc740 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\uc131\uc774 \uc801\uace0 \ud14c\uc2a4\ud2b8\ud558\uae30\uac00 \ub354 \uc5b4\ub824\uc6b4 \uacbd\ud5a5\uc774 \uc788\ub2e4. <\/p>

Stateless\ub294 \uc0c1\ud0dc\ub97c \uac16\uc9c0 \uc54a\ub294 \ucef4\ud3ec\uc800\ube14\uc774\ub2e4. Stateless\ub97c \ub9cc\ub4dc\ub294 \ud55c\uac00\uc9c0 \ubc29\ubc95\uc740 State Hoisting<\/a>\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774\ub2e4.<\/p>

\uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucef4\ud3ec\uc800\ube14\uc744 \uac1c\ubc1c\ud560 \ub54c \ub3d9\uc77c\ud55c \ucef4\ud3ec\uc800\ube14\uc5d0 \ub300\ud574 stateful \ubc84\uc804\uacfc stateless \ubc84\uc804\uc744 \ubaa8\ub450 \ub178\ucd9c\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \uc788\ub2e4. stateful \ubc84\uc804\uc740 \uc0c1\ud0dc\ub97c \uace0\ub824\ud558\uc9c0 \uc54a\ub294 \ud638\ucd9c\uc790\uc5d0\uac8c \ud3b8\ub9ac\ud558\uace0, statelss\ub294 \uc0c1\ud14c\ub97c \uc81c\uc5b4\ud558\uac70\ub098 \ub04c\uc5b4\uc62c\ub824\uc57c \ud558\ub294 \ud638\ucd9c\uc790\uc5d0\uac8c \ud544\uc694\ud558\ub2e4.<\/p><\/blockquote>\n\n\n\n

Stateful\ud55c TextField \ucef4\ud3ec\uc800\ube14 \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n

\ucef4\ud3ec\uc988 \ub0b4 \uc0c1\ud0dc\uc5d0 \ub300\ud574\uc11c \uc54c\uc544\ubcf4\uae30 \uc704\ud574, \uc218\uc815\uac00\ub2a5\ud55c TextField<\/em>\ub97c \ud45c\ud604\ud558\ub294 stateful\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcfc \uac83\uc774\ub2e4.<\/p>\n\n\n\n

stateful \ucef4\ud3ec\uc800\ube14\uc740 \uc2dc\uac04\uc5d0 \ub530\ub77c \ubcc0\uacbd\ub420 \uc218 \uc788\ub294 \uc0c1\ud0dc\ub97c \uc18c\uc720\ud558\ub294 \ucef4\ud3ec\uc800\ube14\uc744 \ub9d0\ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\n

\uc2dc\uc791\ud558\uae30 \uc704\ud574 TodoScreen.kt<\/em>\ub97c \uc5f4\uace0 \ub2e4\uc74c \ud568\uc218\ub97c \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\n

\/\/ TodoScreen.kt\n<\/strong>@Composable\nfun TodoInputTextField(modifier: Modifier) {\n   val (text, setText) = remember { mutableStateOf(\"\") }\n   TodoInputText(text, setText, modifier)\n}<\/code><\/pre>\n\n\n\n
Warning:<\/strong> \uc774 \ud14d\uc2a4\ud2b8 \ud544\ub4dc\ub294 state\ub97c hoist\ud558\uc9c0 \uc54a\ub294\ub2e4. \uc774 \uc139\uc158 \ub098\uc911\uc5d0 \uc774 \ud568\uc218\ub97c \uc81c\uac70 \ud560 \uc608\uc815\uc774\ub2e4.<\/p><\/blockquote>\n\n\n\n
\uc774 \ud568\uc218\ub294 remember\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc790\uae30 \uc790\uc2e0\uc5d0 \uba54\ubaa8\ub9ac\ub97c \ucd94\uac00\ud55c \ub2e4\uc74c, \uba54\ubaa8\ub9ac \ub0b4\uc5d0\uc11c mutableStateof\ub97c \uc800\uc7a5\ud558\uc5ec \uad00\ucc30 \uac00\ub2a5\ud55c state \ud640\ub354\ub97c \uc81c\uacf5\ud558\ub294 \ucef4\ud3ec\uc988 \ub0b4\uc7a5 \ud0c0\uc785\uc778 MutableState<String>\uc744 \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
mutableStateOf<\/strong><\/em> \ub610\ub294 getValue<\/strong>\uac00 \uc815\uc758\ub418\uc9c0 \uc54a\uc558\ub2e4\ub294 \ucef4\ud30c\uc77c\ub7ec \uc624\ub958\uac00 \ubc1c\uc0dd\ud558\uba74 \ub2e4\uc74c import\uac00 \uc788\ub294\uc9c0 \ud655\uc778\ud558\uc790.<\/p>
import androidx.compose.runtime.getValue<\/strong><\/p>
import androidx.compose.runtime.mutableStateOf<\/strong><\/p>
import androidx.compose.runtime.setValue<\/strong><\/p><\/blockquote>\n\n\n\n
\uac12\uacfc setter \uc774\ubca4\ud2b8\ub97c TodoInputText\uc5d0 \uc989\uc2dc \uc804\ub2ec\ud560 \uac83\uc774\uae30 \ub54c\ubb38\uc5d0, MutableState \uac1d\uccb4\ub97c getter\uc640 setter\ub85c \ubd84\ud574\ud55c\ub2e4.<\/p>\n\n\n\n
mutableStateOf\ub294 \ucef4\ud3ec\uc988\uc5d0 \ub0b4\uc7a5\ub418\uc5b4 \uc788\uc73c\uba70 \uad00\ucc30\uac00\ub2a5\ud55c \uc0c1\ud0dc \ud640\ub354\uc778 MutableState<T>\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>
\uc778\ud130\ud398\uc774\uc2a4 MutableState<T> : State<T> { <\/font><\/font>
   \uc7ac\uc815\uc758 var \uac12 : T <\/font><\/font>
}<\/font><\/font><\/p>
value\uc758 \uc5b4\ub5a4 \ubcc0\uacbd\uc0ac\ud56d\uc740 \uc790\ub3d9\uc73c\ub85c \uc774 state\ub97c \ubd88\ub7ec\uc640 \uc5b4\ub5a4 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c \uc7ac\uad6c\uc131\ud55c\ub2e4. <\/p>
\ucef4\ud3ec\uc800\ube14\uc5d0\uc11c 3\uac00\uc9c0 \ubc29\ubc95\uc73c\ub85c MutableState \uac1d\uccb4\ub97c \uc120\uc5b8\ud560 \uc218 \uc788\ub2e4.<\/p>
  1. val state = remember { mutableStateOf(default) }<\/font><\/font><\/p>
  2. val value by remember { mutableStateOf(default) }<\/font><\/font><\/p>
  3. val (value, setValue) = { mutableStateOf(default) } <\/font><\/font><\/p>
\uad6c\uc131(Composition)\uc5d0\uc11c State<T> (\ub610\ub294 \ub2e4\ub978 stateful\ud55c \uac1d\uccb4)\ub97c \uc0dd\uc131\ud560 \ub54c, remember\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4. \uadf8\ub807\uc9c0 \uc54a\uc73c\uba74, \ub9e4\ubc88 \uc0c8\ub85c \uad6c\uc131\ud560 \ub54c\ub9c8\ub2e4 \uc7ac\ucd08\uae30\ud654 \ub41c\ub2e4.<\/p>
MutableState<T>\ub294 MutableLiveData<T><\/em> \ube44\uc2b7\ud558\uc9c0\ub9cc, \ub7f0\ud0c0\uc784\uc5d0 \ucef4\ud3ec\uc988\uc640 \ud1b5\ud569\ub41c\ub2e4. \uad00\ucc30\uac00\ub2a5(observable)\ud558\uae30 \ub54c\ubb38\uc5d0 \uc5c5\ub370\uc774\ud2b8\ub420 \ub54c\ub9c8\ub2e4 compose\uc5d0 \uc54c\ub9ac\ubbc0\ub85c compose\ub294 \uc774\ub97c \uc77d\ub294 \ubaa8\ub4e0 \ucef4\ud3ec\uc800\ube14\ub4e4\uc744 \uc7ac\uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n
TodoInputTextField\ub0b4\uc758 \uc0c1\ud0dc\ub97c \ub9cc\ub4e4\uc5c8\ub2e4. \uc791\ub3d9\ud558\ub294 \ubaa8\uc2b5\uc744 \ubcf4\ub824\uba74 TodoInputTextField\uc640 Button\uc744 \ud45c\uc2dc\ud558\ub294 \ub2e4\ub978 TodoItemInput \ucef4\ud3ec\uc800\ube14\uc744 \uc815\uc758\ud558\uc790.<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemInput(onItemComplete: (TodoItem) -> Unit) {\n   \/\/ onItemComplete\uc740 \uc774\ubca4\ud2b8\ub85c\uc368 \uc0ac\uc6a9\uc790\uc5d0 \uc758\ud574 \uc544\uc774\ud15c\uc774 \uc644\ub8cc \ub420 \ub54c \ud638\ucd9c\ub41c\ub2e4.\n   Column {\n       Row(Modifier\n           .padding(horizontal = 16.dp)\n           .padding(top = 16.dp)\n       ) {\n           TodoInputTextField(Modifier\n               .weight(1f)\n               .padding(end = 8.dp)\n           )\n           TodoEditButton(\n               onClick = { \/* todo *\/ },\n               text = \"Add\",\n               modifier = Modifier.align(Alignment.CenterVertically)\n           )\n       }\n   }\n}<\/code><\/pre>\n\n\n\n
TodoItemInput\ub294 \ub2e8\uc9c0 onItemComplete \uc774\ubca4\ud2b8\ub77c\ub294 \ud558\ub098\uc758 \ub9e4\uac1c\ubcc0\uc218\ub97c \uac16\ub294\ub2e4. \uc0ac\uc6a9\uc790\uac00 TodoItem\uc744 \uc644\ub8cc\ud560 \ub54c \uc774\ubca4\ud2b8\uac00 \ud2b8\ub9ac\uac70 \ub41c\ub2e4. \ub78c\ub2e4\ub97c \uc804\ub2ec\ud558\ub294 \uc774 \ud328\ud134\uc740 \ucef4\ud3ec\uc988\uc5d0\uc11c \ucee4\uc2a4\ud140 \uc774\ubca4\ud2b8\ub97c \uc815\uc758\ud558\ub294 \uc8fc\ub41c \ubc29\ubc95\uc774\ub2e4.<\/p>\n\n\n\n
\ub610\ud55c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc774\ubbf8 \uc815\uc758\ub418\uc5b4 \uc788\ub294 \ubc31\uadf8\ub77c\uc6b4\ub4dc TodoItemInputBackground\uc5d0\uc11c TodoItemInput\uc744 \ud638\ucd9c\ud558\ub3c4\ub85d TodoScreen \ucef4\ud3ec\uc800\ube14\uc744 \uc5c5\ub370\uc774\ud2b8 \ud55c\ub2e4.<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoScreen(\n   items: List<TodoItem>,\n   onAddItem: (TodoItem) -> Unit,\n   onRemoveItem: (TodoItem) -> Unit\n) {\n   Column {\n       \/\/ TodoItemInputBackground \ubc0f TodoItem\uc744 TodoScreen \uc0c1\ub2e8\uc5d0 \ucd94\uac00\ud55c\ub2e4.\n       TodoItemInputBackground(elevate = true, modifier = Modifier.fillMaxWidth()) {\n           TodoItemInput(onItemComplete = onAddItem)\n       }\n...<\/code><\/pre>\n\n\n\n
TodoItemInput \uc2dc\ud5d8\ud574\ubcf4\uae30<\/h2>\n\n\n\n
\ud55c \ud30c\uc77c\uc5d0\uc11c \uc8fc\uc694\ud55c UI \ucef4\ud3ec\uc800\ube14\uc744 \uc815\uc758 \ud574\uc654\ub2e4. \uc5ec\uae30\uc5d0 @Preview<\/em>\ub97c \ucd94\uac00\ud558\ub294\uac83\uc740 \uc88b\uc740 \uc544\uc774\ub514\uc5b4\ub2e4. \uc774\ub294 \ucef4\ud3ec\uc800\ube14\uc740 \ud55c\ub370\ub85c \ubaa8\uc544 \ubcfc \uc218 \uc788\ub3c4\ub85d \ud558\uace0 \ub610\ud55c \uc774 \ud30c\uc77c\uc744 \uc5f4\uc5b4\ubcf4\ub294 \uc0ac\ub78c\ub4e4\uc5d0\uac8c \uc190\uc27d\uac8c \ubbf8\ub9ac\ubcf4\uae30\ub97c \uc81c\uacf5\ud55c\ub2e4.<\/p>\n\n\n\n
TodoScreen.kt<\/em> \uc5d0\uc11c \uc0c8\ub85c\uc6b4 preview \ud568\uc218\ub294 \ud558\ub2e8\uc5d0 \ucd94\uac00\ud574\ubcf4\uc790.<\/p>\n\n\n\n
\/\/ TodoScreen.kt\n@Preview\n@Composable\nfun PreviewTodoItemInput() = TodoItemInput(onItemComplete = { })<\/code><\/pre>\n\n\n\n
\uc774\uc81c interactive preview \ub610\ub294 \uc5d0\ubbac\ub808\uc774\ud130\uc5d0\uc11c \uc774 \ucef4\ud3ec\uc800\ube14\uc744 \uc2e4\ud589\uc2dc\ucf1c \uaca9\ub9ac\ub41c \uc774 \ucef4\ud3ec\uc800\ube14\uc744 \ub514\ubc84\uae45 \ud558\uc790.<\/p>\n\n\n\n
\uadf8\ub807\ub2e4\uba74, \uc0ac\uc6a9\uc790\uac00 \uc218\uc815\ud560 \uc218 \uc788\ub294 \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uac00 \ud654\uba74\uc5d0 \ub098\ud0c0\ub098\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4. \ubb38\uc790 \ud558\ub098\ub97c \uc785\ub825\ud560 \ub54c\ub9c8\ub2e4, \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud45c\uc2dc\ub418\ub294 TextField\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\ub294 \uc7ac\uad6c\uc131\uc744 \ud2b8\ub9ac\uac70\ud558\uc5ec \uc0c1\ud0dc(state)\uac00 \uc5c5\ub370\uc774\ud2b8 \ub41c\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec \uc544\uc774\ud15c \ucd94\uac00\ud558\ub3c4\ub85d \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n
\uc774\uc81c “Add”\ubc84\ud2bc\uc774 \uc2e4\uc81c\ub85c TodoItem<\/em>\uc744 \ucd94\uac00\ud558\ub3c4\ub85d \ub9cc\ub4e4\uc790. \uc774\ub97c \uc704\ud574, TodoInputTextfField<\/em>\uc758 text<\/em>\uc5d0 \uc811\uadfc\ud560 \ud544\uc694\uac00 \uc788\ub2e4.<\/p>\n\n\n\n
TodoItemInput<\/em> \ubd80\ubd84\uc758 \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac\ub97c \ubcf4\uba74, TodoInputTextField<\/em>\uc758 \uc548\ucabd\uc5d0 text<\/em> state\ub97c \uc800\uc7a5\ud558\uace0 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\"\"
TodoItemInput \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac(\ub0b4\uc7a5\ub41c \uc228\uaca8\uc9c4 \ucef4\ud3ec\uc800\ube14)<\/strong><\/figcaption><\/figure>\n\n\n\n
\uc774 \uad6c\uc870\ub294 onClick<\/em>\uc774 text<\/em>\uc758 \ud604\uc7ac \uac12\uc5d0 \uc811\uadfc\ud574\uc57c\ud558\uae30 \ub54c\ubb38\uc5d0, onClick<\/em>\uc744 \uc5f0\uacb0 \ud560 \uc218 \uc5c6\ub2e4. \uc6b0\ub9ac\uac00 \ud558\uace0\uc790 \ud558\ub294 \uac74 TodoItemInput<\/em>\uc5d0 \uc788\ub294 text<\/em> state\ub97c \ub178\ucd9c \uc2dc\ud0a4\uace0, \ub3d9\uc2dc\uc5d0 \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n
Jetpack \ucef4\ud3ec\uc988\ub97c \uc0ac\uc6a9\ud560 \ub54c, \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc740 \uace0\uc218\uc900 \uc544\ud0a4\ud14d\ucc98 \ubc0f \ub2e8\uc77c \ucef4\ud3ec\uc800\ube14 \uc124\uacc4\uc5d0 \ubaa8\ub450 \uc801\uc6a9\ub41c\ub2e4. \uc5ec\uae30\uc5d0\uc11c \uc6b0\ub9ac\ub294 \uc774\ubca4\ud2b8\ub294 \ud56d\uc0c1 \uc704\ub85c \ud750\ub974\uace0 \uc0c1\ud0dc\ub294 \uc544\ub798\ub85c \ud750\ub974\ub3c4\ub85d \ub9cc\ub4e4\uace0 \uc2f6\ub2e4. <\/p>\n\n\n\n
\uc774\ub294 TodoItemInput<\/em>\uc5d0\uc11c\uc758 \uc0c1\ud0dc\ub294 \uc544\ub798\ub85c \ud750\ub974\uace0, \uc774\ubca4\ud2b8\ub97c \uc704\ub85c \ud750\ub974\ub294 \uac83\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>\n\n\n\n
\"\"
TodoItemInput\uc5d0 \ub300\ud55c \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \ub2e4\uc774\uc5b4\uadf8\ub7a8<\/strong><\/figcaption><\/figure>\n\n\n\n
\uc774\ub97c \uc704\ud574, \ud558\uc704 \ucef4\ud3ec\uc800\ube14\uc778 TodoInputTextField<\/em>\ub97c \uc0c1\uc704\uc758 TodoItemInput<\/em>\uc73c\ub85c state\ub97c \uc62e\uaca8\uc57c \ud55c\ub2e4. <\/p>\n\n\n\n
\"\"
state hoisting\uacfc \ud568\uaed8 \ub098\ud0c0\ub0b8 TodoItemInput \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac <\/strong><\/figcaption><\/figure>\n\n\n\n
\uc774 \ud328\ud134\uc740 state hoisting<\/strong>\uc774\ub77c \ubd88\ub9b0\ub2e4. \uc6b0\ub9ac\ub294 \ucef4\ud3ec\uc800\ube14\ub85c\ubd80\ud130 state\ub97c “\ub04c\uc5b4\uc62c\ub824” stateless\ud558\uac8c \ub9cc\ub4e4 \uac83\uc774\ub2e4. State hoisting\uc740 \uc8fc\ub41c \ud328\ud134\uc73c\ub85c \ucef4\ud3ec\uc988\uc5d0\uc11c \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \uc124\uacc4\ub97c \ub9cc\ub4e0\ub2e4.<\/p>\n\n\n\n
State hoisting \uc740 state\ub97c \uc704\ub85c \uc62e\uaca8 \ucef4\ud3ec\ub10c\ud2b8\ub97c stateless\ud558\uac8c \ub9cc\ub4dc\ub294 \uac83\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>
\ucef4\ud3ec\uc800\ube14\uc5d0 \uc774\ub97c \uc801\uc6a9\ud560 \ub54c, \ucef4\ud3ec\uc800\ube14\uc5d0 \ub450\uac1c\uc758 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc885\uc885 \ub3c4\uc785\ud55c\ub2e4.<\/p>
  \u00b7 value: T – \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud55c \ud604\uc7ac\uac12<\/p>
  \u00b7 onValueChange: (T) -> Unit – \uac12 \ubcc0\uacbd\uc744 \uc694\uccad\ud558\ub294 \uc774\ubca4\ud2b8<\/p><\/blockquote>\n\n\n\n
state hoisting\uc744 \uc2dc\uc791\ud558\ub824\uba74, \ucef4\ud3ec\uc800\ube14 \ub0b4\ubd80 \uc0c1\ud0dc T\ub97c (value: T, onValueChange:(T)->Unit) \ub9e4\uac1c\ubcc0\uc218 \uc30d\uc73c\ub85c \ub9ac\ud329\ud1a0\ub9c1 \ud560 \uc218 \uc788\ub530.<\/p>\n\n\n\n
TodoInputTextField\ub97c \uc218\uc815\ud558\uace0 (value, onValueChange) \ub9e4\uac1c\ubcc0\uc218\ub97c \ucd94\uac00\ud558\ub294 \uac83\uc73c\ub85c \uc0c1\ud0dc\ub97c \ub04c\uc5b4\uc62c\ub9ac\uc790.<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\n\/\/ \uc0c1\ud0dc\ub97c \ub04c\uc5b4\uc62c\ub9b0 TodoInputTextField\n@Composable\nfun TodoInputTextField(text: String, onTextChange: (String) -> Unit, modifier: Modifier) {\n   TodoInputText(text, onTextChange, modifier)\n}<\/code><\/pre>\n\n\n\n
\uc774 \ucf54\ub4dc\ub294 value<\/em> \ubc0f onValueChange<\/em> \ub9e4\uac1c\ubcc0\uc218\ub97c TodoInputTextField<\/em>\uc5d0 \ucd94\uac00\ud558\uc600\ub2e4. value<\/em> \ub9e4\uac1c\ubcc0\uc218\ub294 text<\/em> \uc774\uace0, onValueChange<\/em> \ub9e4\uac1c\ubcc0\uc218\ub294 onTextChange<\/em>\ub2e4.<\/p>\n\n\n\n
\uadf8\ub7ec\uba74 state\ub294 \uc774\uc81c \ub04c\uc5b4\uc62c\ub824\uc84c\uc73c\ub2c8, TodoInputTextField<\/em>\uc5d0 \uc788\ub358 remember\ub85c \uc800\uc7a5\ud558\ub358 \uc0c1\ud0dc\ub294 \uc81c\uac70\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\uc774 \ubc29\ubc95\uc73c\ub85c \ub04c\uc5b4\uc62c\ub824\uc9c4 state\ub294 \uba87\uac00\uc9c0 \uc911\uc694\ud55c \uc18d\uc131\uc744 \uac16\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
  • Single source of truth<\/strong> – \uc911\ubcf5\ub41c \uc0c1\ud0dc\ub97c \uac16\ub294 \uac83 \ub300\uc2e0 state\ub97c \uc62e\uae40\uc73c\ub85c\uc368, text\uc5d0 \ub300\ud574 \ub2e8\uc77c source of truth\uc784\uc744 \ud655\uc2e0\ud55c\ub2e4. \uc774\ub294 \ubc84\uadf8 \ubc1c\uc0dd\uc744 \ubc29\uc9c0\ud55c\ub2e4.<\/li>
  • \ucea1\uc290\ud654(Encapsulated)<\/strong> – \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc774 TodoItemInput<\/em>\uc5d0 \uc774\ubca4\ud2b8\ub97c \ubcf4\ub0bc \ub54c, \uc624\uc9c1 TodoItemInput<\/em>\ub9cc state\ub97c \uc218\uc815\ud560 \uc218 \uc788\ub2e4. \uc774\ub807\uac8c \uc0c1\ud0dc\ub97c \ub04c\uc5b4\uc62c\ub9ac\uba74 \ube44\ub85d \uc5ec\ub7ec\uac1c\uc758 \ucef4\ud3ec\uc800\ube14\uc774 \uc774 \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud558\ub354\ub77c\ub3c4,  \uc624\uc9c1 \ud558\ub098\uc758 \ucef4\ud3ec\uc800\ube14\ub9cc\uc774 stateful\ud558\uac8c \ub41c\ub2e4.<\/li>
  • \uacf5\uc720 \uac00\ub2a5\uc131(Shareable)<\/strong>– \ub04c\uc5b4\uc62c\ub824\uc9c4 state\ub294 \ub2e4\uc591\ud55c \ucef4\ud3ec\uc800\ube14\uacfc \ud568\uaed8 \ubcc0\uacbd\uac00\ub2a5\ud55c \uac12\uc73c\ub85c\uc368 \uacf5\uc720\ub41c\ub2e4. \uc5ec\uae30\uc5d0\uc11c\ub294 TodoInputTextField \ubc0f TodoEditButton \ub0b4\uc5d0\uc11c \ud568\uaed8 state\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/li>
  • \uac00\ub85c\ucc44\uae30(Interceptable) <\/strong>– TodoItemInput\uc740 state\uac00 \ubcc0\uacbd\ub418\uae30 \uc804\uc5d0 \uc774\ubca4\ud2b8\ub97c \ubb34\uc2dc\ud558\uac70\ub098 \uc218\uc815\ud560 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uba74, TodoItemInput\uc740 \uc0ac\uc6a9\uc790\uac00 \uc785\ub825 \ud560 \ub54c :emoji-codes:\ub97c \uc774\ubaa8\uc9c0\ub85c \ubcc0\ud658 \ud560 \uc218 \uc788\ub2e4.<\/li>
  • \ubd84\ub9ac\ud558\uae30(Decoupled)<\/strong> – TodoInputTextField\uc5d0 \ub300\ud55c state\ub294 \uc544\ub9c8 \uc5b4\ub518\uac00\uc5d0 \uc800\uc7a5\ub41c\ub2e4. \uc608\ub97c \ub4e4\uc5b4, TodoInputTextField\ub97c \uc218\uc815\ud558\uc9c0 \uc54a\uace0 \ubb38\uc790\ub97c \uc785\ub825\ud560 \ub54c \ub9c8\ub2e4 \uc5c5\ub370\uc774\ud2b8 \ub418\ub294 \uc0c1\ud0dc\ub97c Room \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc800\uc7a5\ud558\ub3c4\ub85d \uc120\ud0dd\ud560 \uc218 \uc788\ub2e4.<\/li><\/ul>\n\n\n\n
    \uc774\uc81c TodoItemInput\ub0b4 \uc0c1\ud0dc\ub97c \ucd94\uac00\ud558\uace0 \uc774\ub97c TodoInputTextField\uc5d0 \uc804\ub2ec\ud558\uc790.<\/p>\n\n\n\n
    \/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemInput(onItemComplete: (TodoItem) -> Unit) {\n   val (text, setText) = remember { mutableStateOf(\"\") }\n   Column {\n       Row(Modifier\n           .padding(horizontal = 16.dp)\n           .padding(top = 16.dp)\n       ) {\n           TodoInputTextField(\n               text = text,\n               onTextChange = setText,\n               modifier = Modifier\n                   .weight(1f)\n                   .padding(end = 8.dp)\n           )\n           TodoEditButton(\n               onClick = { \/* todo *\/ },\n               text = \"Add\",\n               modifier = Modifier.align(Alignment.CenterVertically)\n           )\n       }\n   }\n}<\/code><\/pre>\n\n\n\n
    \uc6b0\ub9ac\ub294 \uc774\uc81c \uc0c1\ud0dc\ub97c \ub04c\uc5b4 \uc62c\ub838\uace0, \ud604\uc7ac \ud14d\uc2a4\ud2b8 \uac12\uc744 \uc0ac\uc6a9\ud558\uc5ec TodoEditButton\uc758 \ub3d9\uc791\uc744 \uc8fc\ub3c4\ud560 \uc218 \uc788\ub2e4. \ucf5c\ubc31\uc744 \uad6c\ud604\uc744 \ub9c8\ubb34\ub9ac \uc9d3\uace0, \ud14d\uc2a4\ud2b8\uac00 \ube44\uc5b4\uc788\uc9c0 \uc54a\uc744 \ub54c\ub9cc \ubc84\ud2bc\uc744 \ud65c\uc131\ud654 \ud558\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
    \/\/ TodoScreen.kt<\/strong>\n\/\/ TodoItemInput \uc218\uc815\ud558\uae30\nTodoEditButton(\n   onClick = {\n       onItemComplete(TodoItem(text)) \/\/ onItemComplete \uc774\ubca4\ud2b8\ub97c \uc704\ub85c \uc804\ub2ec\ud55c\ub2e4.\n       setText(\"\") \/\/ \ub0b4\ubd80 \ud14d\uc2a4\ud2b8\ub97c \uc9c0\uc6b4\ub2e4.\n   },\n   text = \"Add\",\n   modifier = Modifier.align(Alignment.CenterVertically),\n   enabled = text.isNotBlank() \/\/ \ud14d\uc2a4\ud2b8\uac00 \ube44\uc5b4\uc788\uc9c0 \uc54a\uc744 \ub54c \ud65c\uc131\ud654 \ud55c\ub2e4.\n)<\/code><\/pre>\n\n\n\n
    \ub2e4\ub978 \ub450\uac1c\uc758 \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c \uac19\uc740 state \ubcc0\uc218\uc778 text\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4. state\ub97c \ub04c\uc5b4\uc62c\ub9bc\uc73c\ub85c\uc368 \uc774\ub807\uac8c state\ub97c \uacf5\uc720\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4. \uadf8\ub9ac\uace0 TodoItemInput\ub9cc stateful\ud55c \ucef4\ud3ec\uc800\ube14\ub85c \ub9cc\ub4e4\uc5c8\uae30 \ub54c\ubb38\uc5d0 \uc774\ub7f0 \uad00\ub9ac\uac00 \uac00\ub2a5\ud574\uc84c\ub2e4.<\/p>\n\n\n\n
    \ub2e4\uc2dc \uc2e4\ud589\ud574\ubcf4\uae30<\/h2>\n\n\n\n
    \uc571\uc744 \ub2e4\uc2dc \uc2dc\uc791 \ud574\ubcf4\uace0 \uc0c8\ub85c\uc6b4 todo \uc544\uc774\ud15c\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc74c\uc744 \ud655\uc778\ud558\uc790. \ucd95\ud558\ud569\ub2c8\ub2e4 – \uc774\uc81c \ucef4\ud3ec\uc800\ube14\uc5d0 \uc5b4\ub5bb\uac8c state\ub97c \ucd94\uac00\ud574\uc57c\ud558\ub294\uc9c0 \ubc30\uc6e0\uace0 \uc5b4\ub5bb\uac8c \uc0c1\ud0dc\ub97c \ub04c\uc5b4\uc62c\ub9ac\ub294\uc9c0\ub3c4 \ubc30\uc6b0\uac8c \ub418\uc5c8\ub2e4.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \ucf54\ub4dc \uc815\ub9ac<\/h2>\n\n\n\n
    \uacc4\uc18d \uc9c4\ud589\ud558\uae30 \uc804\uc5d0 TodoInputTextField\ud568\uc218 \ub0b4 \ucf54\ub4dc\ub97c TodoItemInput \ud568\uc218 \ub0b4\ub85c \uc9d1\uc5b4 \ub123\uc790. state hoisting(\uc0c1\ud0dc \ub04c\uc5b4\uc62c\ub9ac\uae30)\ub97c \uc54c\uc544\ubcf4\uae30 \uc704\ud574 \uc774 \uc139\uc158\uc5d0\uc11c \ucd94\uac00\ud588\ub358 \uac83 \ubfd0\uc774\ub2e4. \ucf54\ub4dc\ub7a9\uc5d0\uc11c \uc81c\uacf5\ub41c TodoInputText\uc758 \ucf54\ub4dc\ub97c \ub4e4\uc5ec\ub2e4 \ubcf4\uba74, \uc774 \uc139\uc158\uc5d0\uc11c \ub2e4\ub8e8\uc5c8\ub358 \ud328\ud134\uc744 \ub530\ub77c state\ub97c \uc774\ubbf8 \ub04c\uc5b4\uc62c\ub9b0\uac83\uc744 \ubcfc \uc218 \uc788\ub2e4. <\/p>\n\n\n\n
    \ub05d\ub0ac\uc73c\uba74 TodoItemInput\uc740 \ub2e4\uc74c\uacfc \uac19\uc544\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    \/\/ TodoScreen.kt<\/strong>\n@Composable\nfun TodoItemInput(onItemComplete: (TodoItem) -> Unit) {\n   val (text, setText) = remember { mutableStateOf(\"\") }\n   Column {\n       Row(Modifier\n           .padding(horizontal = 16.dp)\n           .padding(top = 16.dp)\n       ) {\n           TodoInputText(\n               text = text,\n               onTextChange = setText,\n               modifier = Modifier\n                   .weight(1f)\n                   .padding(end = 8.dp)\n           )\n           TodoEditButton(\n               onClick = {\n                   onItemComplete(TodoItem(text))\n                   setText(\"\")\n               },\n               text = \"Add\",\n               modifier = Modifier.align(Alignment.CenterVertically),\n               enabled = text.isNotBlank()\n           )\n       }\n   }\n}<\/code><\/pre>\n\n\n\n
    \ub2e4\uc74c \uc139\uc158\uc5d0\uc11c \uc6b0\ub9ac\ub294 \uacc4\uc18d\ud574\uc11c \uc774 \ub514\uc790\uc778\uc744 \ub9cc\ub4e4\uace0 \uc544\uc774\ucf58\uc744 \ucd94\uac00\ud560 \uac83\uc774\ub2e4. \uc774 \uc139\uc158\uc5d0\uc11c \ubc30\uc6b4 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc\ub97c \ub04c\uc5b4\uc62c\ub9ac\uace0 \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc73c\ub85c \ub300\ud654\ud615 UI\ub97c \ub9cc\ub4e0\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
    \uc9c0\ub09c \uc139\uc158\uc5d0\uc11c \uc5b4\ub5bb\uac8c \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub4e4\uc774 \uba54\ubaa8\ub9ac\ub97c \uac16\ub294\uc9c0 \ubc30\uc6e0\ub2e4. \uc774\uc81c \uadf8 \uba54\ubaa8\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucef4\ud3ec\uc800\ube14\uc5d0 \uc0c1\ud0dc(state)\ub97c \ucd94\uac00 \ud574\ubcf4\ub3c4\ub85d \ud558\uc790. \ub514\uc790\uc774\ub108\uac00 \ub2e8\uc815\uce58 \ubabb\ud55c \ub514\uc790\uc778\uc5d0\uc11c \ud3ec\uc2a4\ud2b8 \uba38\ud14c\ub9ac\uc5bc\ub85c \uc804\ud658\ud588\ub2e4. todo \uc785\ub825\uc5d0 \ub300\ud55c \uc0c8\ub85c\uc6b4 \ub514\uc790\uc778\uc740 \uc811\uc744\uc218 \uc788\ub294 \ud5e4\ub354\ub85c\uc368 \uac19\uc740 \uacf5\uac04\uc744 \ucc28\uc9c0\ud55c\ub2e4. \uadf8\ub9ac\uace0 \ud655\uc7a5(expanded) \ubc0f \ucd95\uc18c(collapsed) \ub450\uac1c\uc758 \uc0c1\ud0dc\ub97c \uac16\ub294\ub2e4. \ud14d\uc2a4\ud2b8\uac00 \ube44\uc5b4\uc788\uc9c0 \uc54a\ub2e4\uba74 \ud655\uc7a5\ub41c \uc0c1\ud0dc\ub97c \ubcfc \uc218 \uc788\ub2e4. […]<\/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\/45640"}],"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=45640"}],"version-history":[{"count":3,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45640\/revisions"}],"predecessor-version":[{"id":45794,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45640\/revisions\/45794"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}