{"id":45631,"date":"2021-11-16T10:07:33","date_gmt":"2021-11-16T01:07:33","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45631"},"modified":"2021-11-16T12:37:26","modified_gmt":"2021-11-16T03:37:26","slug":"using-state-in-jetpack-compose-memory-in-compose","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45631","title":{"rendered":"Using state in Jetpack Compose – Memory in Compose"},"content":{"rendered":"\n

\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574 \ucef4\ud3ec\uc988\ub97c ViewModel\uacfc \ud568\uaed8 \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud574\uc57c \ud558\ub294\uc9c0 \uc54c\uc544\ubcf4\uc558\ub2e4. \uc9c0\uae08\ubd80\ud130 \ucef4\ud3ec\uc988\uac00 \ub0b4\ubd80\uc801\uc73c\ub85c state\uc640 \uc5b4\ub5bb\uac8c \uc0c1\ud638\uc791\uc6a9\ud558\ub294\uc9c0 \uc54c\uc544\ubcf4\uc790.<\/p>\n\n\n\n

\uc9c0\ub09c \uc139\uc158\uc5d0\uc11c\ub294 \ucef4\ud3ec\uc800\ube14\uc744 \ub2e4\uc2dc \ud638\ucd9c\ud558\uc5ec \ucef4\ud3ec\uc988\uac00 \ud654\uba74\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\ub294\uac83\uc744 \ubcf4\uc558\ub2e4. \uc774\ub7ec\ud55c \ucc98\ub9ac\ub97c recomposition(\uc7ac\uad6c\uc131)\uc774\ub77c \ud55c\ub2e4. TodoScreen<\/em>\uc744 \ub2e4\uc2dc \ud638\ucd9c\ud558\uc5ec \ub3d9\uc801\uc778 \ubaa9\ub85d\uc744 \ubcf4\uc5ec\uc904 \uc218 \uc788\uc5c8\ub2e4.<\/p>\n\n\n\n

\uc774 \uc139\uc158\uacfc \ub2e4\uc74c \uc139\uc158\uc5d0\uc11c\ub294 \ucef4\ud3ec\uc800\ube14\uc744 stateful<\/strong>\ud558\uac8c \ub9cc\ub4e4\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574\uc11c \uc0b4\ud3b4\ubcf8\ub2e4.<\/p>\n\n\n\n

stateful \ucef4\ud3ec\uc800\ube14\uc740 \uc790\uae30 \uc790\uc2e0\uc774 \uc2dc\uac04\uc5d0 \ub530\ub77c \ubcc0\uacbd\ub420 \uc218 \uc788\ub294 state \uc77c\ubd80\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ucef4\ud3ec\uc800\ube14\uc744 \ub9d0\ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\n

\uc774 \uc139\uc158\uc5d0\uc11c \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc5d0 \uc5b4\ub5a4\uc2dd\uc73c\ub85c state\ub97c \uae30\uc5b5\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294\uc9c0 \uc0b4\ud3b4\ubcf8\ub2e4.<\/p>\n\n\n\n

Dishelveled Design<\/h2>\n\n\n\n

<\/p>\n\n\n\n

\"\"
\ub514\uc790\uc774\ub108\ub85c \ubd80\ud130 \ubc1b\uc740 \ubaa9\uc5c5 \ub514\uc790\uc778<\/strong><\/figcaption><\/figure>\n\n\n\n

\uc774 \uc139\uc158\uc5d0\uc11c\ub294, \ud300\uc758 \uc0c8\ub85c\uc6b4 \ub514\uc790\uc774\ub108\uac00 \ub098\uc5d0\uac8c \uc704\uc640 \uac19\uc740 \uc774\ubbf8\uc9c0\uac00 \ucd5c\uc2e0 \ub514\uc790\uc778 \ud2b8\ub80c\ub4dc\ub77c\uba70, \ub2e8\uc815\ud558\uc9c0 \ubabb\ud55c \ub514\uc790\uc778(disheveled design)\uc744 \uc92c\ub2e4.<\/p>\n\n\n\n

\ub2e8\uc815\ud558\uc9c0 \ubabb\ud55c \ub514\uc790\uc778\uc758 \ud575\uc2ec \uc6d0\uce59\uc740 \uc88b\uc740 \ub514\uc790\uc778\uc744 \ucde8\ud558\uace0, \uac89\uc73c\ub85c \ubcf4\uc774\ub294 \ubb34\uc791\uc704 \ubcc0\uacbd\uc0ac\ud56d\uc744 \ucd94\uac00\ud558\uc5ec “\ud765\ubbf8\ub86d\uac8c” \ub9cc\ub4dc\ub294 \uac83\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>\n\n\n\n

\uc774 \ub514\uc790\uc778\uc5d0\uc11c \uac01 \uc544\uc774\ucf58\uc740 0.3\uc5d0\uc11c 0.9\uc0ac\uc774\uc758 \ub79c\ub364\ud55c \ud22c\uba85\ub3c4\ub97c \uac16\ub294\ub2e4.<\/p>\n\n\n\n

Tip : <\/strong>Disheveled design\uc740 \uc2e4\uc81c \ub514\uc790\uc778 \ud2b8\ub80c\ub4dc\uac00 \uc544\ub2c8\ub2e4.<\/p><\/blockquote>\n\n\n\n

\ucef4\ud3ec\uc800\ube14\uc5d0 \ubb34\uc791\uc704\ub85c \ucd94\uac00\ud558\uae30<\/h2>\n\n\n\n

\uc2dc\uc791\ud558\uae30 \uc704\ud574, TodoScreen.kt\ub97c \uc5f4\uace0 TodoRow \ucef4\ud3ec\uc800\ube14\uc744 \ucc3e\ub294\ub2e4. \uc774 \ucef4\ud3ec\uc800\ube14\uc740 todo \ubaa9\ub85d\uc758 \ub2e8\uc77c \ud589(row)\uc744 \ud45c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n

iconAlpha\ub294 \ud604\uc7ac \ubc84\uadf8\uac00 \uc788\ub294\ub370 \ub098\uc911\uc5d0 \uc218\uc815\ub420 \uc608\uc815\uc774\ub2e4. \ub9e4\ubc88 \ubaa9\ub85d\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 tint \uc0c9\uc0c1\uc744 \ubcc0\uacbd\ud558\uac8c \ub41c\ub2e4.<\/em><\/p><\/blockquote>\n\n\n\n

\uc0c8\ub85c\uc6b4 val iconAlpha<\/em>\ub97c randomTint()<\/em> \uac12\uacfc \ud568\uaed8 \uc815\uc758\ud55c\ub2e4. \uc774\ub294 \ub514\uc790\uc774\ub108\uac00 \uc694\uad6c\ud55c 0.3 \uc5d0\uc11c 0.9 \uc0ac\uc774\uc758 float \ud615\uc2dd\uc774\ub2e4. \uadf8\ub7f0 \ub4a4, \uc544\uc774\ucf58\uc758 tint\ub97c \uc124\uc815\ud558\uc790.<\/p>\n\n\n\n

\/\/TodoScreen.kt<\/strong>\n@Composable\nfun TodoRow(todo: TodoItem, onItemClicked: (TodoItem) -> Unit, modifier: Modifier = Modifier) {\n   Row(\n       modifier = modifier\n           .clickable { onItemClicked(todo) }\n           .padding(horizontal = 16.dp, vertical = 8.dp),\n       horizontalArrangement = Arrangement.SpaceBetween\n   ) {\n       Text(todo.task)\n       val iconAlpha = randomTint()<\/strong>\n       Icon(\n           imageVector = todo.icon.imageVector,\n           tint = LocalContentColor.current.copy(alpha = iconAlpha),\n           contentDescription = stringResource(id = todo.icon.contentDescription)\n       )\n   }\n}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\ub97c \ub2e4\uc2dc \ud655\uc778\ud558\uba74, \uc544\uc774\ucf58 \ud22c\uba85\ub3c4\uac00 \ubb34\uc791\uc704\ub85c \uc124\uc815\ub418\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
LocalContentColor.current\ub780 \ubb34\uc5c7\uc778\uac00?<\/strong><\/p>
LocalContentColor<\/a>\ub294 \uc544\uc774\ucf58 \ubc0f \uc11c\uccb4\uc640 \uac19\uc740 \ucf58\ud150\uce20\uc5d0 \uc54c\ub9de\ub294 \uc0c9\uc0c1\uc744 \uc81c\uacf5\ud55c\ub2e4. \ubc30\uacbd\uc744 \uadf8\ub9ac\ub294 Surface<\/em>\uc640 \uac19\uc740 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc758\ud574 \ubcc0\uacbd\ub41c\ub2e4.<\/p><\/blockquote>\n\n\n\n
\uc7ac\uad6c\uc131 \uc0b4\ud3b4\ubcf4\uae30<\/h2>\n\n\n\n
\uc571\uc744 \ub2e4\uc2dc \uc2dc\uc791\ud574\uc11c \uc0c8\ub85c\uc6b4 disheveled design\uc744 \ud14c\uc2a4\ud2b8 \ud574\ubcf4\uba74, \ud22c\uba85\ub3c4 \uc0c9\uc0c1\uc774 \ub9e4\ubc88 \ubc14\ub00c\ub294 \uac83\uc744 \uc54c\uc544\ucc28\ub9b4 \uc218 \uc788\ub2e4. \ub514\uc790\uc774\ub108\uac00 \ubb34\uc791\uc704\ub85c \uacc4\uc18d \ubc14\ub00c\ub294\uac78 \ubcf4\uace0, “\uc774\uac74 \uc880 \ub108\ubb34\ud558\uc9c0 \uc54a\ub098”\ub77c\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n
\"\"
\ubaa9\ub85d\uc774 \ubcc0\uacbd\ub420 \ub54c \uc571 \uc544\uc774\ucf58 \uc0c9\uc0c1 \ubcc0\uacbd\ud558\uae30<\/strong><\/figcaption><\/figure>\n\n\n\n
\ub0b4\ubd80\uc5d0\uc11c \ubb34\uc2a8\uc77c\uc774 \uc77c\uc5b4\ub098\uace0 \uc788\ub294\uac83\uc77c\uae4c? \ud654\uba74\uc0c1 \ubaa9\ub85d\uc758 \uac01 \ud589\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4, \uc7ac\uad6c\uc131(recomposition)\ucc98\ub9ac\uac00 randomTint<\/em>\ub97c \ud638\ucd9c\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n
\uc7ac\uad6c\uc131(Recomposition)<\/strong>\uc740 \ucef4\ud3ec\uc800\ube14\uc744 \ub2e4\uc2dc \ud638\ucd9c\ud558\uc5ec \uc0c8\ub85c\uc6b4 \uc785\ub825\uac12\uc744 \ubc1b\uace0 \ucef4\ud3ec\uc988 \ud2b8\ub9ac\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\ub294 \ucc98\ub9ac\ub97c \ub9d0\ud55c\ub2e4. \uc774 \uacbd\uc6b0 TodoScreen<\/em>\uc774 \uc0c8\ub85c\uc6b4 \ubaa9\ub85d\uacfc \ud568\uaed8 \ub2e4\uc2dc \ud638\ucd9c\ub420 \ub54c, LazyColumn<\/strong>\uc740 \ud654\uba74\uc0c1\uc5d0 \ubaa8\ub4e0 \ud558\uc704\uc694\uc18c\ub97c \uc7ac\uad6c\uc131\ud55c\ub2e4. \uc774\ub294 TodoRow<\/em>\ub97c \ub2e4\uc2dc \ud638\ucd9c\ud558\uace0, \uc0c8\ub86d\uac8c \ubb34\uc791\uc704\ub85c \ud22c\uba85\ud55c \uac12\uc744 \uc0dd\uc131\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
Recompositon<\/strong>\uc740 \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub420 \ub54c \ud2b8\ub9ac\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uae30 \uc704\ud574 \ub3d9\uc77c\ud55c \ucef4\ud3ec\uc800\ube14\uc744 \ub2e4\uc2dc \uc2e4\ud589\ud558\ub294 \ud504\ub85c\uc138\uc2a4\ub2e4.<\/p><\/blockquote>\n\n\n\n
\ucef4\ud3ec\uc988\ub294 \ud2b8\ub9ac\ub97c \uc0dd\uc131\ud55c\ub2e4. \uc548\ub4dc\ub85c\uc774\ub4dc View \uc2dc\uc2a4\ud15c\uc5d0\uc11c UI \ud2b8\ub9ac\ub97c \uad6c\uc131\ud558\ub294 \uac83\uacfc \ube44\uc2b7\ud574 \ubcf4\uc774\uc9c0\ub9cc \uc870\uae08 \ub2e4\ub974\ub2e4. UI \uc704\uc82f \ud2b8\ub9ac \ub300\uc2e0, \ucef4\ud3ec\uc988\ub294 \ucef4\ud3ec\uc800\ube14 \ud2b8\ub9ac\ub97c \uc0dd\uc131\ud55c\ub2e4. TodoScreen<\/em>\uc744 \uac00\uc2dc\ud654 \ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\"\"
TodoScreen \ud2b8\ub9ac<\/strong><\/figcaption><\/figure>\n\n\n\n
\ucef4\ud3ec\uc988\uac00 \uad6c\uc131(composition)\uc744 \ucc98\uc74c\ud560 \ub54c, \ucef4\ud3ec\uc988\ub294 \ubaa8\ub4e0 \ucef4\ud3ec\uc800\ube14\uc744 \ud638\ucd9c\ud558\uc5ec \ud2b8\ub9ac\ub97c \ub9cc\ub4e0\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c, \uc7ac\uad6c\uc131\ud560 \ub54c\ub294 \uc0c8\ub86d\uac8c \ud638\ucd9c\ub418\ub294 \ucef4\ud3ec\uc800\ube14\uacfc \ud568\uaed8 \ud2b8\ub9ac\ub97c \uc5c5\ub370\uc774\ud2b8 \ud55c\ub2e4.<\/p>\n\n\n\n
TodoRow<\/strong>\ub97c \uc7ac\uad6c\uc131 \ub420 \ub54c\ub9c8\ub2e4 \uc544\uc774\ucf58\ub4e4\uc774 \uc5c5\ub370\uc774\ud2b8 \ub418\ub294 \uc774\uc720\ub294 TodoRow<\/strong>\ub294 \uc228\uaca8\uc9c4 \ubd80\uc791\uc6a9(side-effect)<\/strong>\uc744 \uac00\uc9c0\uace0 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4. \ubd80\uc791\uc6a9\uc774\ub780 \ucef4\ud3ec\uc800\ube14 \ud568\uc218 \uc2e4\ud589 \ubc14\uae65\uc5d0 \uc5b4\ub5a4 \ubcc0\uacbd\uc0ac\ud56d\uc774 \ub4dc\ub7ec\ub09c\ub2e4\ub294 \uc810\uc774\ub2e4.<\/p>\n\n\n\n
Random.nextFloat()<\/em>\uc744 \ud638\ucd9c\ud558\ub294 \uac83\uc740 \uc758\uc0ac-\ub09c\uc218 \uc0dd\uc131\uae30(pseudo-random number generator)\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubb34\uc791\uc704 \ubcc0\uc218\ub97c \uc5c5\ub370\uc774\ud2b8\ud55c\ub2e4. \uc774\uac83\uc774 Random<\/em>\uc774 \ub9e4\ubc88 \uc694\uccad\ud558\ub294 \ub09c\uc218\ub97c \ubc18\ud658\ud558\ub294 \ubc29\ubc95\uc774\ub2e4.<\/p>\n\n\n\n
\ubd80\uc791\uc6a9\uc740 \ucef4\ud3ec\uc800\ube14 \ud568\uc218 \uc678\ubd80\uc5d0 \ub098\ud0c0\ub098\ub294 \uc5b4\ub5a4 \ubcc0\uacbd\uc0ac\ud56d\uc744 \ub9d0\ud55c\ub2e4.<\/p>
\ucef4\ud3ec\uc800\ube14\uc744 \uc7ac\uad6c\uc131\ud558\ub294 \uac83\uc740 \ubd80\uc791\uc6a9\uc774 \uc5c6\uc5b4\uc57c\ub9cc \ud55c\ub2e4.<\/p>
\uc608\ub97c \ub4e4\uc5b4, ViewModel<\/strong>\ub0b4\uc758 state\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\ub294 \uac83, Random.next()<\/strong>\ub97c \ud638\ucd9c\ud558\ub294 \uac83, \ub610\ub294 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc4f0\ub294 \uac83\ub4e4\uc744 \uc804\ubd80 \ubd80\uc791\uc6a9\uc774\ub77c\uace0 \ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n
\ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc5d0 \uba54\ubaa8\ub9ac \ub3c4\uc785\ud558\uae30<\/h2>\n\n\n\n
\uc6b0\ub9ac\ub294 TodoRow\uac00 \uc7ac\uad6c\uc131\ub420 \ub54c\ub9c8\ub2e4 \uc544\uc774\ucf58 \ud22c\uba85\ub3c4\uac00 \ubcc0\uacbd\ub418\ub294 \uac83\uc744 \uc6d0\uce58 \uc54a\ub294\ub2e4. \uadf8\ub807\uac8c \ud558\ub824\uba74, \uc6b0\ub9ac\uac00 \uc9c0\ub09c \uad6c\uc131\uc5d0\uc11c \uc0ac\uc6a9\ud55c \uc0c9\uc0c1 \uc815\ubcf4\ub97c \uae30\uc5b5\ud574\uc57c\ud55c\ub2e4. \ucef4\ud3ec\uc988\ub294 \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac\uc5d0\uc11c \uac12\ub4e4\uc744 \uc800\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uae30 \ub54c\ubb38\uc5d0, \uc6b0\ub9ac\ub294 TodoRow\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uace0 iconAlpha\uac12\uc744 \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac\uc5d0 \uc800\uc7a5 \ud560 \uc218 \b\uc788\ub2e4. <\/p>\n\n\n\n
remember<\/a>\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc5d0 \uba54\ubaa8\ub9ac\ub97c \uc81c\uacf5\ud55c\ub2e4.<\/p>
remember<\/a>\uc5d0 \uc758\ud574 \uacc4\uc0b0\ub41c \uac12\uc740 \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac \ub0b4\uc5d0 \uc800\uc7a5\ub418\uace0, remember<\/a>\uc5d0 \ub300\ud55c \ud0a4\ub4e4\uc774 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc2dc \uc7ac\uacc4\uc0b0 \ub41c\ub2e4.<\/p>
private val <\/strong>\ud504\ub85c\ud37c\ud2f0\uac00 \ud558\ub294 \ubc29\uc2dd\uacfc \ub3d9\uc77c\ud558\uac8c, remember<\/a>\ub294 \ud568\uc218\uc5d0 \ub2e8\uc77c \uac1d\uccb4\ub97c \uc704\ud574 \uc8fc\uc5b4\uc9c4 \uc800\uc7a5\uc18c\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \ub41c\ub2e4.<\/p><\/blockquote>\n\n\n\n
TodoRow\ub97c \uc218\uc815\ud558\uace0, randomTint\ub97c remember\ub85c \ub2e4\uc74c\uacfc \uac19\uc774 \uac10\uc2fc\ub2e4.<\/p>\n\n\n\n
\/\/ TodoScreen.kt<\/strong>\nval iconAlpha: Float = remember(todo.id) { randomTint() }\nIcon(\n   imageVector = todo.icon.imageVector,\n   tint = LocalContentColor.current.copy(alpha = iconAlpha),\n   contentDescription = stringResource(id = todo.icon.contentDescription)\n)<\/code><\/pre>\n\n\n\n
TodoRow \uc5d0 \ub300\ud55c \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\uc988 \ud2b8\ub9ac\ub97c \ubcf4\uba74, iconAlpha\uac00 \ucef4\ud3ec\uc988 \ud2b8\ub9ac\uc5d0 \ucd94\uac00 \ub41c \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\"\"
remember\ub97c \uc0ac\uc6a9\ud55c TodoRow \ud2b8\ub9ac <\/strong><\/figcaption><\/figure>\n\n\n\n
\uc571\uc744 \ub2e4\uc2dc \uc2dc\uc791\ud558\uba74, \ud22c\uba85\ub3c4 \uc0c9\uc0c1\uc774 \ubaa9\ub85d\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \ub354 \uc774\uc0c1 \ubcc0\uacbd\ub418\uc9c0 \uc54a\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4. \ub300\uc2e0\uc5d0, \uc7ac\uad6c\uc131\uc774 \ubc1c\uc0dd\ud560 \ub54c \uc774\uc804\uc5d0 \uc800\uc7a5\ub41c \uac12\uc774 remember\uc5d0 \uc758\ud574 \ubc18\ud658\ub41c\ub2e4.<\/p>\n\n\n\n
remember \ud638\ucd9c\ud558\ub294 \ucabd\uc744 \uc790\uc138\ud788 \ubcf4\uba74, todo.id\ub97c \ud0a4(key)\ub85c \uc804\ub2ec\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
remember(todo.id<\/strong>) { randomTint() }<\/code><\/pre>\n\n\n\n
rememeber \ud638\ucd9c\uc740 \ud06c\uac8c \ub450\uac00\uc9c0 \ubd80\ubd84\uc73c\ub85c \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
  1. \ud0a4 \uc778\uc790(key arguments)<\/strong> – remember\uac00 \uc0ac\uc6a9\ud558\ub294 ‘\ud0a4’\ub294 \uad04\ud638 \uc548\uc5d0 \uc804\ub2ec\ub418\ub294 \ubd80\ubd84\uc73c\ub85c, \uc5ec\uae30\uc11c \uc6b0\ub9ac\ub294 todo.id<\/em>\ub97c \ud0a4\ub85c\uc368 \uc804\ub2ec\ud558\uace0 \uc788\ub2e4.<\/li>
  2. \uacc4\uc0b0(calculation)<\/strong> – \uc800\uc7a5 \ub420 \uc0c8\ub85c\uc6b4 \uac12\uc744 \uacc4\uc0b0\ud558\ub294 \ub78c\ub2e4\ub294 \ud6c4\ud589 \ub78c\ub2e4\ub85c \uc804\ub2ec\ub41c\ub2e4. \uc5ec\uae30\uc11c \uc6b0\ub9ac\ub294 \ubb34\uc791\uc704 \uac12\uc744 randomTint()<\/em>\uc640 \ud568\uaed8 \uacc4\uc0b0\ud55c\ub2e4.<\/li><\/ol>\n\n\n\n
    \ucc98\uc74c \uc774\uac83\uc744 \uad6c\uc131\ud560 \ub54c, remember<\/em>\ub294 \ud56d\uc0c1 randomTint<\/em>\ub97c \ud638\ucd9c\ud558\uace0, \ub2e4\uc74c \uc7ac\uad6c\uc131\uc744 \uc704\ud574 \uc774 \uacb0\uacfc\ub97c \uae30\uc5b5\ud55c\ub2e4. \uc804\ub2ec \ub41c todo.id<\/em> \ub610\ud55c \ucd94\uc801\ud558\uac8c \ub41c\ub2e4. \uadf8\ub7f0 \ub4a4, \uc7ac\uad6c\uc131\ud560 \ub54c randomTint<\/em> \ud638\ucd9c\ud558\ub294 \uac83\uc744 \uac74\ub108\ub6f0\uace0, TodoRow<\/em>\uc5d0 \uc0c8\ub85c\uc6b4 todo.id<\/em>\uac00 \uc804\ub2ec\ub418\uc9c0 \uc54a\ub294 \ud55c \uc774\ubbf8 \uc800\uc7a5\ud558\uace0 \uc788\ub294 \uac12\uc744 \ubc18\ud658\ud55c\ub2e4.<\/p>\n\n\n\n
    \uad6c\uc131(\ucef4\ud3ec\uc9c0\uc158)\ub0b4\uc5d0 \uc800\uc7a5\ub41c(\uae30\uc5b5\ub41c) \uac12\ub4e4\uc740 \ucef4\ud3ec\uc9c0\uc158 \ud2b8\ub9ac\ub85c\ubd80\ud130 \ucef4\ud3ec\uc800\ube14\uc774 \uc81c\uac70\ub418\uc790 \ub9c8\uc790 \ud568\uaed8 \uc81c\uac70\ub41c\ub2e4(\uc78a\ud600\uc9c4\ub2e4)<\/p>
    \ud2b8\ub9ac\uc5d0\uc11c \ucef4\ud3ec\uc800\ube14\uc744 \ud638\ucd9c\ud560 \ub54c \uadf8\uac83\ub4e4\uc740 \uc7ac-\ucd08\uae30\ud654\ub97c \ud55c\ub2e4. LazyColumn<\/strong>\ub0b4\uc5d0\uc11c \uac00\uc7a5 \uc0c1\ub2e8\uc758 \uc544\uc774\ud15c\ub4e4\uc744 \uc9c0\uc6b0\ub294 \uac83\uc73c\ub85c \uc774 \ubb38\uc81c\ub97c \uc7ac\ud604\uc2dc\ucf1c\ubcfc \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n
    \uba71\ub4f1\uc6d0(idempotent)<\/strong>\uc740 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\uc5d0\ub2e4\uac00 \uac19\uc740 \uc785\ub825(\ub9e4\uac1c\ubcc0\uc218)\uc744 \ub123\uc73c\uba74, \uadf8\uc5d0 \ub300\ud574\uc11c \ud56d\uc0c1 \uac19\uc740 \uacb0\uacfc(UI)\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uac83\uc744 \uc758\ubbf8 \ud55c\ub2e4.. \uadf8\ub9ac\uace0 \ucef4\ud3ec\uc988\ub294 \uc7ac\uad6c\uc131\uc2dc\uc5d0\ub3c4 \ubd80\uc791\uc6a9\uc774 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\uc544\uc57c \ud55c\ub2e4.<\/p>
    \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub294 \ubc18\ub4dc\uc2dc \uc7ac\uad6c\uc131\uc744 \uc9c0\uc6d0\ud558\ub294 \uba71\ub4f1\uc6d0<\/strong>\uc774\uc5ec\uc57c \ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\n
    \ucef4\ud3ec\uc800\ube14\uc758 \uc7ac\uad6c\uc131\uc740 \ubc18\ub4dc\uc2dc \uba71\ub4f1\uc6d0<\/strong>\uc774\uc5ec\uc57c \ud55c\ub2e4. remember<\/em>\ub85c randomTint<\/em>\ub97c \uac10\uc2f8\uba74, todo \ud56d\ubaa9\uc774 \ubcc0\uacbd\ub418\uc9c0 \uc54a\ub294 \ud55c \uc7ac\uad6c\uc131 \uc2dc random \ud638\ucd9c\uc744 \uac74\ub108\ub6f4\ub2e4. \uadf8\ub7ec\ud55c \uacb0\uacfc\ub85c, TodoRow<\/em>\ub294 \ubd80\uc791\uc6a9\uc774 \uc5c6\uc73c\uba70, \ub3d9\uc77c\ud55c \uc785\ub825\uc73c\ub85c \uc7ac\uad6c\uc131\ud560 \ub54c\ub9c8\ub2e4 \uac19\uc740 \uacb0\uacfc\ub97c \ub098\ud0c0\ub0b4\uace0, \uc774\ub294 \uba71\ub4f1\uc6d0\uc774\ub2e4.<\/p>\n\n\n\n
    \uc800\uc7a5\ub41c \uac12\uc744 \uc81c\uc5b4\ud560 \uc218 \uc788\uac8c \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n
    \uc9c0\uae08 \uc571\uc744 \uc2e4\ud589\ud558\uba74, \uac01 \uc544\uc774\ucf58\uc774 \ub79c\ub364\ud55c \ud22c\uba85\ub3c4 \uc0c9\uc0c1\uc744 \uac16\ub294\uac83\uc744 \ubcfc \uc218 \uc788\ub2e4. \uc774\uc81c \ub514\uc790\uc774\ub108\uac00 dishelved \ub514\uc790\uc778 \uc6d0\uce59\uc744 \ub530\ub978 \uc774 \uacb0\uacfc\ubb3c\uacfc \ud568\uaed8 \uae30\ubed0\ud558\uba70, \uc571\uc5d0 \ub514\uc790\uc778 \uc801\uc6a9\uc744 \uc2b9\uc778\ud55c\ub2e4.<\/p>\n\n\n\n
    \ud558\uc9c0\ub9cc \uc810\uac80\ud558\uae30 \uc804 \uc0ac\uc18c\ud55c \ucf54\ub4dc \ubcc0\uacbd\uc774 \uc5ec\uae30\uc5d0 \ud558\ub098 \uc788\ub2e4. \uc9c0\uae08 \ub2f9\uc7a5\uc740 TodoRow<\/em>\ub97c \ud638\ucd9c\ud558\ub294 \ucabd\uc774 \uc544\uc774\ucf58\uc5d0 \ub300\ud55c \ud22c\uba85\ub3c4 \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud560 \ubc29\ubc95\uc774 \uc5c6\ub2e4. \uc774\uac8c \ud544\uc694\ud55c \ub9ce\uc740 \uc774\uc720\uac00 \uc788\ub294\ub370, \uc608\ub97c \ub4e4\uc5b4 \uc81c\ud488 \ub2f4\ub2f9 \ubd80\uc0ac\uc7a5\uc774 \uc774 \ud654\uba74\uc744 \ubcf4\uace0 \uc571\uc744 \ucd9c\uc2dc\ud558\uae30 \uc9c1\uc804\uc5d0 \ud750\ud2b8\ub7ec\uc9c4 \ubd80\ubd84\uc744 \uc81c\uac70\ud558\uae30 \uc704\ud574 \ud56b\ud53d\uc2a4\ub97c \uc694\uad6c\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \ud638\ucd9c\uc790\uac00 \uc774 \uac12\uc744 \uc81c\uc5b4\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub824\uba74, \uc0c8 iconAlpha<\/em> \ub9e4\uac1c\ubcc0\uc218\uc758 \uae30\ubcf8 \uc778\uc790\ub85c remember \ud638\ucd9c\uc744 \uc774\ub3d9\ud558\uae30\ub9cc \ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n
    @Composable\nfun TodoRow(\n   todo: TodoItem,\n   onItemClicked: (TodoItem) -> Unit,\n   modifier: Modifier = Modifier,\n   iconAlpha: Float = remember(todo.id) { randomTint() }<\/strong>\n) {\n   Row(\n       modifier = modifier\n           .clickable { onItemClicked(todo) }\n           .padding(horizontal = 16.dp)\n           .padding(vertical = 8.dp),\n       horizontalArrangement = Arrangement.SpaceBetween\n   ) {\n       Text(todo.task)\n       Icon(\n            imageVector = todo.icon.imageVector,\n            tint = LocalContentColor.current.copy(alpha = iconAlpha)<\/strong>,\n            contentDescription = stringResource(id = todo.icon.contentDescription)\n        )\n   }\n}<\/code><\/pre>\n\n\n\n
    \uc774\uc81c \ud638\ucd9c\uc790\ub294 \uae30\ubcf8\uac12\uc73c\ub85c TodoRow\uac00 randomTint\ub97c \uacc4\uc0b0\ud558\ub294 \ub3d9\uc791\uc744 \uac16\uc9c0\ub9cc, \uc6d0\ud558\ub294 \ud22c\uba85\ub3c4\ub97c \uc9c0\uc815\ud560 \uc218 \uc788\uace0 alphaTint\ub97c \uc81c\uc5b4\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc774 \ucef4\ud3ec\uc800\ube14\uc744 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \ub2e4\ub978 \ud654\uba74\uc5d0\uc11c \ub514\uc790\uc774\ub108\ub294 \ubaa8\ub4e0 \uc544\uc774\ucf58\uc744 0.7 \ud22c\uba85\ub3c4\ub85c \ud45c\uc2dc\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n
    \ucef4\ud3ec\uc800\ube14\uc5d0 \uba54\ubaa8\ub9ac\ub97c \ucd94\uac00\ud560 \ub54c, \ud56d\uc0c1 \uc790\uc2e0\uc5d0\uac8c \ubb3b\ub3c4\ub85d \ud558\uc790. “\uc5b4\ub5a4 \ud638\ucd9c\uc790(caller)\uac00 \uc774\ub97c \uc81c\uc5b4\ud558\uace0 \uc2f6\uc744\uae4c?”<\/p>
    \ub9cc\uc57d \ub300\ub2f5\uc774 yes<\/strong>\uba74, \ub9e4\uac1c\ubcc0\uc218\ub97c \ucd94\uac00\ud558\uace0,<\/p>
    \ub9cc\uc57d \ub300\ub2f5\uc774 no<\/strong>\uba74, \uc9c0\uc5ed \ubcc0\uc218\ub85c \uc774\ub97c \uc720\uc9c0\ud558\uc790.<\/p><\/blockquote>\n\n\n\n
    \ub610\ud55c remember \uc0ac\uc6a9\ud560 \ub54c \uc544\uc8fc \ubbf8\ubb18\ud55c \ubc84\uadf8\uac00 \uc788\ub2e4. “Add random todo”<\/strong>\ub97c \ubc18\ubcf5\uc801\uc73c\ub85c \ud074\ub9ad\ud55c \ub2e4\uc74c \uc2a4\ud06c\ub864\ud558\uc5ec \ud654\uba74\uc5d0\uc11c \uba87 \uac1c \uc2a4\ud06c\ub864\ud560 \uc218 \uc788\ub3c4\ub85d, todo \ud589\uc744 \ucda9\ubd84\ud788 \ucd94\uac00\ud574 \ubcf4\uc790. \uc2a4\ud06c\ub864 \ud558\uace0 \ub2e4\uc2dc \uc6d0\ub798\uc758 \uc704\uce58\ub85c \uc2a4\ud06c\ub864\ud560 \ub54c\ub9c8\ub2e4 \ud22c\uba85\ub3c4\uac00 \ubcc0\uacbd\ub418\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    remember\ub294 \ucef4\ud3ec\uc9c0\uc158\uc5d0 \uac12\uc744 \uc800\uc7a5\ud558\uace0, remember\ub97c \ud638\ucd9c \ud55c \ucef4\ud3ec\uc800\ube14\uc774 \uc81c\uac70\ub418\uba74 \ud574\ub2f9 \uac12\uc744 \uc78a\ub294\ub2e4.<\/p>
    \uc774\ub7f0 \ubd80\ubd84\uc740 LazyColumn\uacfc \uac19\uc774 \ud558\uc704\uc694\uc18c\ub4e4\uc744 \ucd94\uac00\ud558\uace0 \uc81c\uac70\ud558\ub294 \ucef4\ud3ec\uc800\ube14 \ub0b4\ubd80\uc5d0 \uc911\uc694\ud55c \uac83\uc744 \uc800\uc7a5\ud558\uba74 \uc548\ub41c\ub2e4\ub294 \uac83\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>
    \uc608\ub97c \ub4e4\uc5b4, \uc9e7\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud55c \uc560\ub2c8\uba54\uc774\uc158 \uc0c1\ud0dc\ub294 LazyColumn\uc758 \ud558\uc704\uc694\uc18c\uc5d0\uc11c remember\ub784 \uc0ac\uc6a9\ud558\uc5ec \uc800\uc7a5\ud558\uae30\uc5d0 \uc548\uc804\ud558\ub2e4. \ud558\uc9c0\ub9cc Todo \uc791\uc5c5\uc758 \uc644\ub8cc \uc0c1\ud0dc\ub97c remember\ub97c \uc0ac\uc6a9\ud558\uc5ec LazyColumn\ub0b4\uc5d0 \uc800\uc7a5\ud588\ub2e4\uba74, \uc2a4\ud06c\ub864\uc2dc\uc5d0 \uc644\ub8cc \uc0c1\ud0dc\uac00 \ub0a0\uc544\uac00 \ubc84\ub9b0\ub2e4.<\/p><\/blockquote>\n\n\n\n
    \ub2e4\uc74c \uc139\uc158\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubc84\uadf8\ub4e4\uc744 \uace0\uce60 \uc218 \uc788\ub294 \ub3c4\uad6c\ub97c \uc81c\uacf5\ud558\ub294 state \ubc0f state hoisting\uc5d0 \ub300\ud574\uc11c \uc0b4\ud3b4\ubcf4\uc790. <\/p>\n","protected":false},"excerpt":{"rendered":"
    \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574 \ucef4\ud3ec\uc988\ub97c ViewModel\uacfc \ud568\uaed8 \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud574\uc57c \ud558\ub294\uc9c0 \uc54c\uc544\ubcf4\uc558\ub2e4. \uc9c0\uae08\ubd80\ud130 \ucef4\ud3ec\uc988\uac00 \ub0b4\ubd80\uc801\uc73c\ub85c state\uc640 \uc5b4\ub5bb\uac8c \uc0c1\ud638\uc791\uc6a9\ud558\ub294\uc9c0 \uc54c\uc544\ubcf4\uc790. \uc9c0\ub09c \uc139\uc158\uc5d0\uc11c\ub294 \ucef4\ud3ec\uc800\ube14\uc744 \ub2e4\uc2dc \ud638\ucd9c\ud558\uc5ec \ucef4\ud3ec\uc988\uac00 \ud654\uba74\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\ub294\uac83\uc744 \ubcf4\uc558\ub2e4. \uc774\ub7ec\ud55c \ucc98\ub9ac\ub97c recomposition(\uc7ac\uad6c\uc131)\uc774\ub77c \ud55c\ub2e4. TodoScreen\uc744 \ub2e4\uc2dc \ud638\ucd9c\ud558\uc5ec \ub3d9\uc801\uc778 \ubaa9\ub85d\uc744 \ubcf4\uc5ec\uc904 \uc218 \uc788\uc5c8\ub2e4. \uc774 \uc139\uc158\uacfc \ub2e4\uc74c \uc139\uc158\uc5d0\uc11c\ub294 \ucef4\ud3ec\uc800\ube14\uc744 stateful\ud558\uac8c \ub9cc\ub4e4\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574\uc11c […]<\/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\/45631"}],"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=45631"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45631\/revisions"}],"predecessor-version":[{"id":45638,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45631\/revisions\/45638"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}