{"id":45464,"date":"2021-11-07T12:44:08","date_gmt":"2021-11-07T03:44:08","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45464"},"modified":"2021-11-12T16:30:59","modified_gmt":"2021-11-12T07:30:59","slug":"jetpack-compose-basics-compose%ec%97%90%ec%84%9c%ec%9d%98-%ec%83%81%ed%83%9cstate","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45464","title":{"rendered":"Jetpack Compose basics – Compose\uc5d0\uc11c\uc758 \uc0c1\ud0dc(State)"},"content":{"rendered":"

Compose\uc758 \uc0c1\ud0dc\u00a0<\/h1>\n

\uc9c0\uae08\uae4c\uc9c0\ub294 \uc815\uc801\uc778 \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4e4\uc5c8\uc9c0\ub9cc \uc774\uc81c \uc0ac\uc6a9\uc790 \uc561\uc158\uc5d0 \ubc18\uc751\ud558\ub3c4\ub85d \ub9cc\ub4e4\uc5b4 \ubcf4\uc790.<\/p>\n

\"\"<\/a><\/p>\n

\uc5b4\ub5bb\uac8c \ubc84\ud2bc\uc744 \ud074\ub9ad\uac00\ub2a5\ud558\uac8c \ub9cc\ub4e4\uace0 \uc544\uc774\ud15c\uc758 \uc0ac\uc774\uc988\ub97c \uc870\uc808\ud560 \uc218 \uc788\ub294\uc9c0 \uc54c\uae30 \uc804\uc5d0, \uac01\uac01\uc758 \uc544\uc774\ud15c\uc774 \ud655\uc7a5\ub418\uac70\ub098 \ucd95\uc18c\ub418\ub294 \uc0c1\ud0dc\uac12\uc744 \uc5b4\ub518\uac00\uc5d0 \uc800\uc7a5\ud574\uc57c\ub9cc \ud55c\ub2e4. \uc55e\uc5d0\uc11c \ub9cc\ub4e0 Greeting \ud568\uc218\ubcc4\ub85c \uc774\ub7ec\ud55c \uac12\uc744 \uac00\uc9c8 \ud544\uc694\uac00 \uc788\uae30 \ub54c\ubb38\uc5d0, \ub17c\ub9ac\uc801\uc73c\ub85c \uc0dd\uac01\ud574\ubcf4\uba74 \uc774\ub7ec\ud55c \uac12\uc740 Greeting \ub0b4\uc5d0 \uc788\uc5b4\uc57c \ud55c\ub2e4. \ud558\uc9c0\ub9cc \ub2e4\uc74c\uacfc \uac19\uc740 \ud615\ud0dc\ub85c \uc788\uc73c\uba74 \uc808\ub300 \uc548\ub41c\ub2e4<\/strong>!<\/p>\n

\/\/ \uc774 \ucf54\ub4dc\ub294 \uc0ac\uc6a9\uae08\uc9c0\n@Composable\nprivate fun Greeting(name: String) {\n    var expanded = false \/\/ \uc808\ub300\ub85c \uc774\ub807\uac8c \ud558\uba74 \uc548\ub3fc\uc694!<\/strong>\n\n    Surface(\n        color = MaterialTheme.colors.primary,\n        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)\n    ) {\n        Row(modifier = Modifier.padding(24.dp)) {\n            Column(modifier = Modifier.weight(1f)) {\n                Text(text = \"Hello, \")\n                Text(text = name)\n            }\n            OutlinedButton(\n                onClick = { expanded = !expanded }\n            ) {\n                Text(if (expanded) \"Show less\" else \"Show more\")\n            }\n        }\n    }\n}<\/pre>\n
\uc704\uc758 gif \uc6c0\uc9e4\uc744 \ubcf4\uba74 “show more\/show less” \ubb38\uad6c\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ub418\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub294\ub370, \uc774\ub294 \ub098\uc911\uc5d0 \uc0b4\ud3b4\ubcf4\uc790. \uc544\ubb34\ud2bc \uc704\uc758 \ucf54\ub4dc\ub294 \ub3d9\uc791\ud558\uc9c0 \uc54a\ub294 \uc5c9\ud130\ub9ac \ucf54\ub4dc\ub2e4.\u00a0<\/p>\n\n\n
\n
\uc120\uc5b8\ud615 UI \ud234\ud0b7\uc778 Compose\ub294 composable \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \ub370\uc774\ud130\ub97c UI\ub85c \ubcc0\ud658\ud55c\ub2e4. \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub418\uba74 Compose\ub294 \uc774\ub7ec\ud55c \ud568\uc218\ub4e4\uc744 \uc0c8\ub85c\uc6b4 \ub370\uc774\ud130\uc640 \ud568\uaed8 \ub2e4\uc2dc \uc2e4\ud589\ud558\uc5ec \uc5c5\ub370\uc774\ud2b8\ub41c UI\ub97c \uc0dd\uc131\ud55c\ub2e4. \uc774\ub97c \uc7ac\uad6c\uc131(recomposition)<\/strong>\uc774\ub77c\uace0 \ud55c\ub2e4. <\/span>\ub610\ud55c Compose\ub294 \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub41c composable \uc694\uc18c\ub9cc \uc7ac\uad6c\uc131\ud558\uace0, \uc601\ud5a5\uc744 \ubc1b\uc9c0 \uc54a\uc740 composable\uc758 \uc7ac\uad6c\uc131\uc744 \uac74\ub108\ub6f0\ub3c4\ub85d \uac1c\ubcc4\uc801\uc73c\ub85c composable \ud568\uc218\uc5d0 \ud544\uc694\ud55c \ub370\uc774\ud130\ub97c \ud655\uc778\ud55c\ub2e4. Compose \uc774\ud574<\/a> \ud3b8\uc5d0\uc11c \uc5b8\uae09\ud588\ub4ef\uc774 Composable \ud568\uc218\ub294 \uc790\uc8fc \uc2e4\ud589\ub420 \uc218 \uc788\uace0, \ucf54\ub4dc\uac00 \uc2e4\ud589\ub418\ub294 \uc21c\uc11c\ub098, \uc7ac\uad6c\uc131\ub418\ub294 \ud69f\uc218\uc5d0 \uc758\uc874\ud574\uc11c\ub294 \uc548\ub41c\ub2e4.<\/span><\/p>\n<\/blockquote>\n
Greeting \ud568\uc218\ub0b4\uc758 expanded\uac00 \ubcc0\uacbd\ub418\ub3c4 \uc7ac\uad6c\uc131\uc774 \ud2b8\ub9ac\uac70\ub418\uc9c0 \uc54a\ub294 \uc774\uc720\ub294 Compose\uc5d0\uc11c \uc774\ub97c \ucd94\uc801\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc774\ub2e4. \ub610\ud55c Greeting\uc774 \ud638\ucd9c\ub420 \ub54c\ub9c8\ub2e4 \ubcc0\uc218\ub294 false\ub85c \ucd08\uae30\ud654 \ub41c\ub2e4.<\/p>\n
mutableStateOf \ud568\uc218<\/strong>\ub97c \uc0ac\uc6a9\ud558\uba74 composable \ud568\uc218\uc5d0 \ub0b4\ubd80\uc801\uc73c\ub85c \uc0c1\ud0dc(state)\ub97c \ucd94\uac00 \ud560 \uc218 \uc788\ub2e4. \uc774\ub97c \ud1b5\ud574 Compose\uac00 State\ub97c \uc77d\uace0 \uc7ac\uad6c\uc131 \ud560 \uc218 \uc788\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n
\n
State<\/strong>\uc640 MutableState<\/strong>\ub294 \uc5b4\ub5a4 \uac12\uc744 \uac00\uc9c0\uace0 \uc788\uace0, \uc774 \uac12\uc774 \ubcc0\uacbd \ub420 \ub54c\ub9c8\ub2e4 UI \uac31\uc2e0\uc744 \ud2b8\ub9ac\uac70 \ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uc778\ud130\ud398\uc774\uc2a4<\/strong>\ub2e4.<\/p>\n<\/blockquote>\n\n\n\n
@Composable\nfun Greeting() {\n    val expanded = mutableStateOf(false) \/\/ \uc774\ub807\uac8c \uc0ac\uc6a9\ud558\uba74 \uc548\ub429\ub2c8\ub2e4.\n}<\/code><\/pre>\n\n\n\n
\ud558\uc9c0\ub9cc composable \ud568\uc218\ub0b4\uc5d0\uc11c \ub2e8\uc21c\ud788 mutableStateOf\ud568\uc218\ub97c \uc0ac\uc6a9\ud560 \uc218\ub294 \uc5c6\ub2e4. \uc55e\uc5d0\uc11c \uc124\uba85\ud588\ub4ef\uc774, \uc7ac\uad6c\uc131(recomposition)\uc740 \uc5b8\uc81c\ub4e0\uc9c0 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4. \uc774\ub294 \uc0c1\ud0dc(state)\ub97c \ucd08\uae30\ud654\ud558\uace0 \uc0c8\ub85c\uc6b4 mutable state\uc0dd\uc131\uacfc \ud568\uaed8 false\uac12\uc744 \uac16\uac8c \ub420 \uac83\uc774\ub2e4.<\/p>\n
\uc7ac\uad6c\uc131\uc774 \uc77c\uc5b4\ub0a0 \ub54c \uac12\uc744 \ubcf4\uc874\ud558\uae30 \uc704\ud574 remember<\/strong>\ub77c\ub294 \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
@Composable\nfun Greeting() {\n    val expanded = remember { mutableStateOf(false) }\n}<\/code><\/pre>\n\n\n\n
remember\ub294 \uc7ac\uad6c\uc131\uc73c\ub85c\ubd80\ud130 \ud574\ub2f9 \uac12\uc758 \ubcc0\uacbd\uc744 \ubcf4\ud638\ud558\uc5ec \ucd08\uae30\ud654 \ub418\uc9c0 \uc54a\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n
\ud654\uba74\uc758 \uac01\uac01 \ub2e4\ub978 \ubd80\ubd84\uc5d0\uc11c \ub3d9\uc77c\ud55c composable \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc7ac\uc0ac\uc6a9\ud55c\ub2e4\uba74, \uac01\uac01 \uace0\uc720\ud55c \ubc84\uc804\uc758 \uc0c1\ud0dc\uac00 \uc788\ub294 \ub2e4\ub978 UI \uc694\uc18c\ub97c \uc0dd\uc131\ud558\uac8c \ub418\ub294 \uac83\uc774\ub2e4. \uc989, composable \ud568\uc218\uc5d0 \uc120\uc5b8\ub41c state\ub294 \ub9c8\uce58 \ud074\ub798\uc2a4\uc5d0 \uc120\uc5b8\ub41c private \ubcc0\uc218\ub77c\uace0 \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Composable \ud568\uc218\ub294 \uc790\ub3d9\uc73c\ub85c state\uc5d0 “subscribed” \ub418\uc5b4\uc9c4\ub2e4. \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74, composable \ud568\uc218\ub294 \uc774\ub7ec\ud55c \ud544\ub4dc\ub97c \ubd88\ub7ec\uc640 \uc7ac\uad6c\uc131\ud558\uace0 \ud654\uba74\uc744 \uac31\uc2e0\ud55c\ub2e4.<\/p>\n\n\n\n
Stateless vs Stateful<\/h2>\n\n\n\n