2021 ComposeFest2021-Using state in Jetpack Compose

2021 Devfest Korea Android
Jetpack Compose 코드랩 중 Using state in Jetpack Compose 설명 자료입니다.
(https://developer.android.com/codelabs/jetpack-compose-state#0)

Transcript

1. Using state in Jetpack Compose ߓ೙઱ GDG Korea Android [Korea Android]
2. Codelab উղ
3. https://github.com/gdgand/ComposeFest2021 Repo fork೧ࢲ, ѐੋ ࠳ے஖ীࢲ ૓೯ೞҊ, ௏٘۽ ԙ թӝӝ! ޷ܻ Fork ߉ই֬ਵन ٜ࠙਷ ୭नചܳ ೠߣ ࠗఌ٘۰ਃ! Repo উղ week 2-2-Using state in Jetpack Compose
4. https://github.com/gdgand/ComposeFest2021
6. Compose੄ ইఃఫ୊
7. 7 TextView Button LinearLayout findViewById() tv.text b.visibility vg.addView() xml layout Acitvity / Fragment Ѿ೤بо ֫׮ ӝઓ ইఃఫ୊
8. ࢶ঱ഋ UI ݽ؛ ߂ ױߑೱ ؘ੉ఠ ൒ܴਵ۽ ੹ജ
9. State ۆ? 1. ֎౟ਕ௼ োѾਸ ೡ ࣻ হਸ ٸ ࠁৈ઱ח झճ߄ 2. ࠶۽Ӓ ನझ౟৬ ҙ۲ ؆Ӗ 3. ௿ܼೡٸ ੤ࢤغח ripple গפݫ੉࣌ 4. ࢎਊ੗о ੉޷૑ ਤী Ӓܾ ࣻ ੓ח झ౭ழ दр੉ ૑թী ٮۄ ߸҃ؼ ࣻ ੓ח ݽٚ ч https://developer.android.com/jetpack/compose/state CodeLab / 3. Understanding Unidirectional Data Flow
10. ױߑೱ ؘ੉ఠ ൒ܴ Unidirectional Data Flow
11. ੌ߈੸ੋ ੉߮౟ ൒ܴ CodeLab / 3. Understanding Unidirectional Data Flow
12. ױߑೱ ؘ੉ఠ ൒ܴ CodeLab / 3. Understanding Unidirectional Data Flow
13. Memory in Compose
14. Composeীࢲ ೐۽Ӓې߁ ೡٸ ঌইঠ ೡ ࢎ೦ 1. Compose ೣࣻח ࣽࢲ৬ ҙ҅হ੉ प೯ оמ 2. Composeח زदী प೯ оמ 3. Recomposition਷ ߸҃ػ ҳࢿ ਃࣗ݅ प೯ 4. э਷ ؘ੉ఠۄݶ زੌೠ Ѿҗ 5. Compose ೣࣻח UIীࢲ ݒ਋ ੗઱ प೯ؼ ࣻ ੓਺ https://developer.android.com/jetpack/compose/mental-model
15. Recomposition @Composabl e fun TodoRow(todo: TodoItem, onItemClicked: (TodoItem) -> Unit, modifier: Modifier = Modifier) { Row(. . .) { Text(todo.task ) val iconAlpha = randomTint( ) Icon ( imageVector = todo.icon.imageVector , tint = LocalContentColor.current.copy(alpha = iconAlpha), . . . ) } } CodeLab / 5. Memory in Compose
16. Recomposition val iconAlpha = randomTint() @Composabl }
17. Recomposition val iconAlpha = randomTint() ؘ੉ఠо ߸҃ؼ ٸ Compose Treeܳ সؘ੉౟ ೞӝ ਤ೧ زੌೠ Composableਸ ׮द प೯ Composable਷ recompositionਸ ૑ਗೞӝ ਤ೧ ೦࢚ Ѿҗо زੌ೧ঠ ೤פ׮. CodeLab / 5. Memory in Compose
18. Remember val iconAlpha = randomTint() val iconAlpha: Float = remember(todo.id) { randomTint() } CodeLab / 5. Memory in Compose
19. Remember val iconAlpha: Float = remember(todo.id) { randomTint() } Stateful Stateless Rememberܳ ࢎਊ೧ࢲ ղࠗ State ࢤࢿ Stateܳ ы૑ ঋח Composable https://developer.android.com/jetpack/compose/state#stateful-vs-stateless CodeLab / 5. Memory in Compose
20. Stateful Stateless • Rememberܳ ࢎਊ೧ࢲ ղࠗ State ࢤࢿ • ഐ୹ೞח ଃীࢲ Stateܳ ҙܻೞ૑ ঋ਺ • ੤ࢎਊ оמࢿ ੸਺ • పझ౟ ೞӝ য۰਑ • Stateܳ ы૑ ঋח Composable • Stateܳ ഐ୹೧ঠ ೞח Ҕীࢲ ઁয State hoisting https://developer.android.com/jetpack/compose/state#stateful-vs-stateless CodeLab / 6. State in Compose
21. State hoisting
22. CodeLab / 6. State in Compose
23. Add Buttonীࢲ Text чী ੽Ӕ ೙ਃ? CodeLab / 6. State in Compose
24. State Hoisting CodeLab / 6. State in Compose
25. State Hoisting CodeLab / 6. State in Compose
26. State Hoisting ೡٸ য٣۽ оঠೞח૑ ঌইղחؘ ب਑੉ غח ࣁ о૑ ӏ஗ • Stateח Stateܳ ࢎਊೞח ݽٚ Composable੄ ୭ࣗ ҕా ࢚ਤ ೦ݾਵ۽ • Stateח ୭ࣗೠ ࣻ੿ ೡ ࣻ ੓ח ୭Ҋ ࣻળਵ۽ • زੌೠ ੉߮౟ী ؀ೠ ਽׹ਵ۽ ف Stateо ߸҃غݶ ೣԋ
27. 2઱ର 2ߣ૩ ૑Әࠗఠ द੘ೞࣁਃ