Tweet
Tweet

Slide 1

Slide 1 text

Using state in Jetpack Compose ߓ೙઱ GDG Korea Android [Korea Android]

Slide 2

Slide 2 text

Codelab উղ

Slide 3

Slide 3 text

https://github.com/gdgand/ComposeFest2021 Repo fork೧ࢲ, ѐੋ ࠳ے஖ীࢲ ૓೯ೞҊ, ௏٘۽ ԙ թӝӝ! ޷ܻ Fork ߉ই֬ਵन ٜ࠙਷ ୭नചܳ ೠߣ ࠗఌ٘۰ਃ! Repo উղ week 2-2-Using state in Jetpack Compose

Slide 4

Slide 4 text

https://github.com/gdgand/ComposeFest2021

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Compose੄ ইఃఫ୊

Slide 7

Slide 7 text

7 TextView Button LinearLayout findViewById() tv.text b.visibility vg.addView() xml layout Acitvity / Fragment Ѿ೤بо ֫׮ ӝઓ ইఃఫ୊

Slide 8

Slide 8 text

ࢶ঱ഋ UI ݽ؛ ߂ ױߑೱ ؘ੉ఠ ൒ܴਵ۽ ੹ജ

Slide 9

Slide 9 text

State ۆ? 1. ֎౟ਕ௼ োѾਸ ೡ ࣻ হਸ ٸ ࠁৈ઱ח झճ߄ 2. ࠶۽Ӓ ನझ౟৬ ҙ۲ ؆Ӗ 3. ௿ܼೡٸ ੤ࢤغח ripple গפݫ੉࣌ 4. ࢎਊ੗о ੉޷૑ ਤী Ӓܾ ࣻ ੓ח झ౭ழ दр੉ ૑թী ٮۄ ߸҃ؼ ࣻ ੓ח ݽٚ ч https://developer.android.com/jetpack/compose/state CodeLab / 3. Understanding Unidirectional Data Flow

Slide 10

Slide 10 text

ױߑೱ ؘ੉ఠ ൒ܴ Unidirectional Data Flow

Slide 11

Slide 11 text

ੌ߈੸ੋ ੉߮౟ ൒ܴ CodeLab / 3. Understanding Unidirectional Data Flow

Slide 12

Slide 12 text

ױߑೱ ؘ੉ఠ ൒ܴ CodeLab / 3. Understanding Unidirectional Data Flow

Slide 13

Slide 13 text

Memory in Compose

Slide 14

Slide 14 text

Composeীࢲ ೐۽Ӓې߁ ೡٸ ঌইঠ ೡ ࢎ೦ 1. Compose ೣࣻח ࣽࢲ৬ ҙ҅হ੉ प೯ оמ 2. Composeח زदী प೯ оמ 3. Recomposition਷ ߸҃ػ ҳࢿ ਃࣗ݅ प೯ 4. э਷ ؘ੉ఠۄݶ زੌೠ Ѿҗ 5. Compose ೣࣻח UIীࢲ ݒ਋ ੗઱ प೯ؼ ࣻ ੓਺ https://developer.android.com/jetpack/compose/mental-model

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Recomposition val iconAlpha = randomTint() @Composabl }

Slide 17

Slide 17 text

Recomposition val iconAlpha = randomTint() ؘ੉ఠо ߸҃ؼ ٸ Compose Treeܳ সؘ੉౟ ೞӝ ਤ೧ زੌೠ Composableਸ ׮द प೯ Composable਷ recompositionਸ ૑ਗೞӝ ਤ೧ ೦࢚ Ѿҗо زੌ೧ঠ ೤פ׮. CodeLab / 5. Memory in Compose

Slide 18

Slide 18 text

Remember val iconAlpha = randomTint() val iconAlpha: Float = remember(todo.id) { randomTint() } CodeLab / 5. Memory in Compose

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

State hoisting

Slide 22

Slide 22 text

CodeLab / 6. State in Compose

Slide 23

Slide 23 text

Add Buttonীࢲ Text чী ੽Ӕ ೙ਃ? CodeLab / 6. State in Compose

Slide 24

Slide 24 text

State Hoisting CodeLab / 6. State in Compose

Slide 25

Slide 25 text

State Hoisting CodeLab / 6. State in Compose

Slide 26

Slide 26 text

State Hoisting ೡٸ য٣۽ оঠೞח૑ ঌইղחؘ ب਑੉ غח ࣁ о૑ ӏ஗ • Stateח Stateܳ ࢎਊೞח ݽٚ Composable੄ ୭ࣗ ҕా ࢚ਤ ೦ݾਵ۽ • Stateח ୭ࣗೠ ࣻ੿ ೡ ࣻ ੓ח ୭Ҋ ࣻળਵ۽ • زੌೠ ੉߮౟ী ؀ೠ ਽׹ਵ۽ ف Stateо ߸҃غݶ ೣԋ

Slide 27

Slide 27 text

2઱ର 2ߣ૩ ૑Әࠗఠ द੘ೞࣁਃ