[단축본] 컴포즈 내부로 이해하는 최적화 비법

전체 버전 및 대본: https://speakerdeck.com/jisungbin/keompojeu-naeburo-ihaehaneun-coejeoghwa-bibeob

1. ஹನૉ
   ղࠗ۽
   ੉೧ೞח
   ୭੸ച
   ࠺ߨ ױ୷ࠄ ✨
   ૑ࢿ࠼
2. 👋
   
   ૑ࢿ࠼ 🏠
   
   TVOHCJO
   🏰
   
   TVOHCJOMBOE
   🐙
   
   HJUIVCDPNKJTVOHCJO
3.  /PEF
   4ZTUFN
    $PNQPTF
   6*
    4OBQTIPU
   4ZTUFN
    8SBQVQ 📖
   
   ݾର
4.  /PEF
   4ZTUFN
    $PNQPTF
   6*
    4OBQTIPU
   4ZTUFN
    8SBQVQ 📖
   
   ݾର $PNQPTF
   3VOUJNF $PNQPTF
   6*  +FUQBDL
   $PNQPTF
5. ↟
   ӝળ
   ↟੗ࣁೠ
   ѐ֛
   ࢤۚ 📝
   
   द੘ೞӝ
   ੹ী
6. 1. Node System  *OUSPEVDJOH
   /PEF
   4MPU5BCMF
   
   (SPVQ
   !3FBE0OMZ$PNQPTBCMF
   $PNQPTJUJPO
   3VOUJNF
   
   3FDPNQPTJUJPO
   
   4NBSU
    %POVUIPMF
   TLJQQJOH
7. @Composable fun UiNodes() { Column { repeat(3) { index -> Text(text = "My index is $index") } } } Column Text Text Text
8. @Composable fun UiNodes() { Column { repeat(3) { index -> Text(text = "My index is $index") } } } Ui Node Ui Node Ui Node Ui Node
9. $PNQPTF
   3VOUJNF
   
   /PEF
   JOUFSGBDF
   $PNQPTF
   6*
   
   /PEF
   JNQMFNFOUBUJPO
10. /** * ஹನૉ੄ ݽٚ ؘ੉ఠܳ ੷੢ೞҊ ҙܻೞח ௿ېझੑפ׮. * Gap Buffer ੗ܐҳઑ৬ ےؒ ঘࣁझ۽ ҳഅعҊ, ղࠗ ؘ੉ఠח Array<Any?>ী ੷੢ؾפ׮. */ internal class SlotTable : CompositionData, Iterable<CompositionGroup>
11. Gap Buffer: ࢎਊೡ ҕрٜਸ ޷ܻ ഛࠁ೧ فҊ, ೧׼ ҕрীࢲ ੘সਸ ૓೯ೞח ੗ܐ ҳઑ. ਤఃೖ٣ইীࢲח زੌೠ ਤ஖ Ӕ୊ী ௿۞झఠ݂ػ ബਯ੸ੋ ࢗੑ ߂ ࢏ઁ ੘সਸ ೲਊೞח ز੸ ߓৌ ੉ۄҊ ੿੄ೞҊ ੓णפ׮.
12. Gap Buffer: زੌೠ ਤ஖ Ӕ୊ী ௿۞झఠ݂ػ ബਯ੸ੋ ࢗੑ ߂ ࢏ઁ ੘সਸ ೲਊೞח ز੸ ߓৌ 1, ୡӝ Gap ࢤࢿ: O(N) [(v)_, _, _, _, _, _, _, _, _, _] // _ח Gap, (v)ח അ੤ cursorܳ աఋն
13. Gap Buffer: زੌೠ ਤ஖ Ӕ୊ী ௿۞झఠ݂ػ ബਯ੸ੋ ࢗੑ ߂ ࢏ઁ ੘সਸ ೲਊೞח ز੸ ߓৌ 1, ୡӝ Gap ࢤࢿ: O(N) [(v)_, _, _, _, _, _, _, _, _, _] // _ח Gap, (v)ח അ੤ cursorܳ աఋն 2. 0ߣ૩ ੋؙझী Hi ࢗੑ [(v)H, i, _, _, _, _, _, _, _, _] // ݽف Gapী ࢗੑغ޲۽ ୶о Gap ࢤࢿ੉ ೙ਃೞ૑ ঋই O(1)ী ৮ܐؽ
14. Gap Buffer: زੌೠ ਤ஖ Ӕ୊ী ௿۞झఠ݂ػ ബਯ੸ੋ ࢗੑ ߂ ࢏ઁ ੘সਸ ೲਊೞח ز੸ ߓৌ 1, ୡӝ Gap ࢤࢿ: O(N) [(v)_, _, _, _, _, _, _, _, _, _] // _ח Gap, (v)ח അ੤ cursorܳ աఋն 2. 0ߣ૩ ੋؙझী Hi ࢗੑ [(v)H, i, _, _, _, _, _, _, _, _] // ݽف Gapী ࢗੑغ޲۽ ୶о Gap ࢤࢿ੉ ೙ਃೞ૑ ঋই O(1)ী ৮ܐؽ 3. 1ߣ૩ ੋؙझ੄ i ઁѢ [H, (v)_, _, _, _, _, _, _, _, _] // cursorܳ iо ੓ח ਤ஖۽ ৤ӝӝ ਤ೧ O(N)੉ ѦܻҊ // ੉റ Gapীࢲ ч ઁѢо ૓೯غ޲۽ O(1)݅ী ৮ܐؽ (ч ઁѢח ೧׼ чਸ Gapਵ۽ ߸҃ೞח Ѫਵ۽ ҳഅؾפ׮)
15. Gap Buffer: زੌೠ ਤ஖ Ӕ୊ী ௿۞झఠ݂ػ ബਯ੸ੋ ࢗੑ ߂ ࢏ઁ ੘সਸ ೲਊೞח ز੸ ߓৌ 1, ୡӝ Gap ࢤࢿ: O(N) [(v)_, _, _, _, _, _, _, _, _, _] // _ח Gap, (v)ח അ੤ cursorܳ աఋն 2. 0ߣ૩ ੋؙझী Hi ࢗੑ [(v)H, i, _, _, _, _, _, _, _, _] // ݽف Gapী ࢗੑغ޲۽ ୶о Gap ࢤࢿ੉ ೙ਃೞ૑ ঋই O(1)ী ৮ܐؽ 3. 1ߣ૩ ੋؙझ੄ i ઁѢ [H, (v)_, _, _, _, _, _, _, _, _] // cursorܳ iо ੓ח ਤ஖۽ ৤ӝӝ ਤ೧ O(N)੉ ѦܻҊ // ੉റ Gapীࢲ ч ઁѢо ૓೯غ޲۽ O(1)݅ী ৮ܐؽ (ч ઁѢח ೧׼ чਸ Gapਵ۽ ߸҃ೞח Ѫਵ۽ ҳഅؾפ׮) 4. 0ߣ૩ ੋؙझ੄ H ܳ Bye ۽ ߸҃ [(v)B, y, e, _, _, _, _, _, _, _] // cursorܳ Hо ੓ח ਤ஖۽ ৤ӝӝ ਤ೧ O(N)੉ ѦܻҊ // ੉റ ݽف Gapীࢲ ч সؘ੉౟о ૓೯غ޲۽ O(1)݅ী ৮ܐؽ
16. var isLoading = false @Composable fun Main() { Column { // 1ߣ૩ ਤ஖ (അ੤ cursor) Text(text = "Column Data") if (isLoading) { Text(text = "Loading...") } } } Column Text “Column Data” Gap Gap Gap Gap Gap Gap ߣ૩
    
    ਤ஖
17. var isLoading = true @Composable fun Main() { Column { // 1ߣ૩ ਤ஖ (੉੹ cursor) Text(text = "Column Data") if (isLoading) { // 2ߣ૩ ਤ஖ (അ੤ cursor) Text(text = "Loading...") } } } Column Text “Column Data” Gap Gap Gap Gap Text “Loading…” ߣ૩
    
    ਤ஖ ߣ૩
    
    ਤ஖
18. /** * Gapਸ ޖदೞҊ ౠ੿ ਤ஖੄ ੺؀੸ੋ ੋؙझܳ оܰఃח ېಌੑפ׮. (ےؒ ঘࣁझ ഝࢿച) * * ےؒ ঘࣁझ: ؘ੉ఠܳ ੷੢ೞח ࠶۾ਸ ೠߣী ৈ۞ ѐ ঘࣁझೞח Ѫ੉ ইפۄ * ౠ੿ ਤ஖۽ ߄۽ ੽Ӕೞৈ ೠ ߣী ೞա੄ ࠶۾ਸ ঘࣁझೞח ߑध */ internal class Anchor(loc: Int) { internal var location = loc val valid get() = location != Int.MIN_VALUE fun toIndexFor(slots: SlotTable) = slots.anchorIndex(this) fun toIndexFor(writer: SlotWriter) = writer.anchorIndex(this) }
19. var isLoading = true @Composable fun Main() { Column { Text(text = "Column Data") if (isLoading) { // Anchor۽ ߄۽ ੽Ӕ Text(text = "Loading...") } } } Column “Column Data” Gap Gap Gap Gap Text “Loading…” "ODIPS۽
    ߄۽
    ੽Ӕ Text
20. @Composable fun Main() { Column { Text(text = "Column Data") } } Column Text “Column Data” Gap Gap Gap Gap Gap Gap
21. @Composable fun Main() { Column { Text(text = "Column Data") } } “Column Data” Gap Gap Gap Gap Gap Gap Group Group
22. “Column Data” Gap Gap Gap Gap Gap Gap Group Group 
    3FTUBSUBCMF(SPVQ
    
    3FQMBDFBCMF(SPVQ
    
    .PWBCMF(SPVQ @Composable fun Main() { Column { Text(text = "Column Data") } }
23. // RestartableGroup: ܻஹನ૑࣌੉ ੌযզ ࣻ ੓ח ஹನ੷࠶ // ઱ਤ۽ ࢤࢿػ׮. ߹ب੄ ২࣌੉ হ׮ݶ ݽٚ ஹನ੷࠶ী // ࢤࢿغח Ӓܛ੉Ҋ, ܻஹನ૑࣌ ೞח ߑߨਸ оܰ஘׮. // ݽٚ RestartableGroup਷ ೧׼ ߧਤ ݅ఀ // ੗୓੄ ܻஹನ૑࣌ झ௏೐(RecomposeScope)ܳ ഋࢿೠ׮. @Composable fun RestartableContainer() { Text(text = "SungbinLand") } RestartableGroup “SungbinLand” Gap Gap Gap Gap Gap Gap RestartableGroup 3FTUBSUBCMF$POUBJOFS
    3FDPNQPTF4DPQF 5FYU
    3FDPNQPTF4DPQF
24. // ReplaceableGroup: ࠙ӝী ٮۄ ੤ߓ஖ ؼ ࣻ ੓ח // ஹನ੷࠶ ઱ਤ۽ ࢤࢿػ׮. // Ӓܛਸ Ү୓೧ঠ ೡ ٸ ੘ࢿػ ؘ੉ఠܳ ੿ܻೞח ߑߨਸ оܰ஘׮. @Composable fun ReplaceableContainer(isColumn: Boolean = true) { when (isColumn) { true -> Text(text = "Column") else -> Text(text = "Row") } } RestartableGroup “Column” Gap Gap Gap Gap Gap ReplaceableGroup 3FQMBDFBCMF$POUBJOFS XIFO RestartableGroup 5FYU
25. /** * ஹನ੷࠶੉ ߓ஖ػ ਤ஖о ׳ۄ૑ݶ ਤ஖ ݫݽ੉ઁ੉࣌੄ keyо ׳ۄઉࢲ ؘ੉ఠо ୡӝചؾפ׮. * ؘ੉ఠܳ ਬ૑ೠ ࢚క۽ ਤ஖ܳ ৤ӝӝ ਤ೧ࢶ key ஹನ੷࠶ਸ ੉ਊ೧ * ਤ஖ ݫݽ੉ઁ੉࣌ীࢲ ଵҊೡ keyܳ ૒੽ ੿੄೧ঠ ೤פ׮. * * key ஹನ੷࠶ਸ ੉ਊ೧ ߓ஖ػ ஹನ੷࠶਷ ઱ਤ۽ MovableGroup੉ ࢤࢿؾפ׮. * MovableGroup਷ ஹನ੷࠶੉ ਤ஖ ݫݽ੉ઁ੉࣌ key৬ ؘ੉ఠܳ ೦࢚ ࠁઓೞݴ * ੉زೞח ߑߨਸ оܰ஝פ׮. */ @Composable inline fun <T> key( vararg keys: Any?, block: @Composable () -> T ) @Composable fun MovableContainer() { key(Any()) { Text(text = "Key") } } RestartableGroup “Key” Gap Gap Gap Gap Gap MovableGroup .PWBCMF$POUBJOFS LFZ RestartableGroup 5FYU
26. !3FBE0OMZ$PNQPTBCMF
    object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography @Composable @ReadOnlyComposable get() = LocalTypography.current // … } @Composable @ReadOnlyComposable fun stringResource(@StringRes id: Int): String { val resources = resources() return resources.getString(id) }
27. var isLoading = false @Composable fun Main() { Column { Text(text = "Column Data") if (isLoading) { Text(text = "Loading...") } } } Column Text “Column Data” Gap Gap Gap Gap Gap Gap Composition
28. var isLoading = true @Composable fun Main() { Column { Text(text = "Column Data") if (isLoading) { Text(text = "Loading...") } } } Column Text “Column Data” Gap Gap Gap Gap Text “Loading…” Recomposition
29. @Composable fun Main() { var number by remember { mutableStateOf(0) } Button(onClick = { number++ }) { Text(text = number.toString()) } } Button Function0<Unit> Gap Gap Gap Gap Text “$number” Smart-Recomposition Gap
30. EPOVUIPMF
    TLJQQJOH
    setContent { var number by remember { mutableStateOf(0) } println("setContent recomposition") Text( modifier = Modifier.clickable { number++ }, text = number.toString() ).also { println("Text recomposition") } } /* ܻஹನ૑࣌੉ য٣ী ૓೯ؼөਃ? 1, setContent content ৔৉ 2. Text 3. setContent content ৔৉ + Text */
31. EPOVUIPMF
    TLJQQJOH
    setContent { var number by remember { mutableStateOf(0) } println("setContent recomposition") Text( modifier = Modifier.clickable { number++ }, text = number.toString() ).also { println("Text recomposition") } } /* [first-composition] [re-composition] setContent recomposition setContent recomposition Text recomposition Text recomposition ੉റ زੌ ۽Ӓ ߈ࠂ */
32. EPOVUIPMF
    TLJQQJOH
    setContent { var number by remember { mutableStateOf(0) } println("setContent recomposition") Button(onClick = { number++ }) { Text( text = number.toString() ).also { println("Text recomposition") } }.also { println("Button recomposition") } } /* [first-composition] [re-composition] setContent recomposition Text recomposition Text recomposition ੉റ زੌ ۽Ӓ ߈ࠂ Button recomposition */
33. EPOVUIPMF
    TLJQQJOH
    // ஹ౵ੌ ੹ @Composable fun TextWrapper(text: String) { Text(text = text) } // ஹ౵ੌ റ (೨ब ࠗ࠙݅ ಴द) fun TextWrapper(composer: Composer, text: String) { // ղࠗীࢲ addRecomposeScope() ۽ ܻஹನ૑࣌ झ௏೐ܳ ୶оೞҊ ੓਺ composer.startRestartGroup(-199242123) Text(text = text) composer.endRestartGroup() }
34. EPOVUIPMF
    TLJQQJOH
    setContent { var number by remember { mutableStateOf(0) } println("setContent recomposition") Text( modifier = Modifier.clickable { number++ }, text = number.toString() ).also { println("Text recomposition") } } setContent { var number by remember { mutableStateOf(0) } println("setContent recomposition") Button(onClick = { number++ }) { Text( text = number.toString() ).also { println("Text recomposition") } }.also { println("Button recomposition") } } Text RecomposeScope 
 Text RecomposeScope 

35. EPOVUIPMF
    TLJQQJOH
    setContent { var number by remember { mutableStateOf(0) } println("setContent recomposition") Button(onClick = { number++ }) { Text( text = number.toString() ).also { println("Text recomposition") } }.also { println("Button recomposition") } } Text RecomposeScope 
 Button RecomposeScope
36. 2. Compose UI  %SBXJOH
    1SPDFTT
    
    .PEJGJFS
    PQUJNJ[F
     $PNQPTJUJPO
    6*
37. Composition Layout Draw @Composable fun Main() { Text( modifier = Modifier .clickable { getOne() }, text = "Hello, World!" ) } fun getOne() = 1
38. @Composable fun Main() { Text( modifier = Modifier .clickable { getOne() }, text = "Hello, World!" ) } fun getOne() = 1 RestartableGroup Function0<Int> Gap Gap Composition Layout Draw “Hello, World!” Gap Gap Gap Gap
39. Modifier.offset { IntOffset(x = 0, y = 0) } Modifier.layout { measurable, constraints -> val placeable = measurable.measure(constraints) layout(width = 0, height = 0) { placeable.place(x = 0, y = 0, zIndex = 1f) } } Modifier.graphicsLayer { scaleX = 1f; rotationX = 0f; clip = false shape = RectangleShape; translationX = 0f alpha = 1f; shadowElevation = 0f } SomeGroup Function0<Unit> Gap Composition Layout Draw Function0<Unit> Gap Gap Gap Gap Function0<Unit>
40. Modifier.offset { IntOffset(x = 0, y = 0) } Modifier.layout { measurable, constraints -> val placeable = measurable.measure(constraints) layout(width = 0, height = 0) { placeable.place(x = 0, y = 0, zIndex = 1f) } } Modifier.graphicsLayer { scaleX = 1f; rotationX = 0f; clip = false shape = RectangleShape; translationX = 0f alpha = 1f; shadowElevation = 0f } SomeGroup Function0<Unit> Gap Composition Layout Draw Function0<Unit> Gap Gap Gap Gap Function0<Unit> Skippable
41. RestartableGroup Function0<Int> Gap Gap Composition Layout Draw “Hello, World!” Text Int “Hello, World!” 
    ۨ੉ইਓ
    ઁড
    ઑѤ DPOTUSBJOUT
    ҅࢑
    
    ठܶ
    ప੉࠶
    ч
    ҅࢑
    JOWPLF
    
    6*
    ౟ܻ
    ҳ୷
42. Composition Layout Draw Text Int “Hello, World!”
43. @Composable fun Main() { Text( modifier = Modifier .clickable { getOne() }, text = "Hello, World!” ) } fun getOne() = 1 RestartableGroup Function0<Int> Gap Gap Composition Layout Draw “Hello, World!” Gap Gap Gap Gap
44. Composition Layout (SPVQ
    ѐ
45. Composition Layout (SPVQ
    ѐ ҅࢑೧ঠ
    ೞח
    (SPVQ
    ѐ
    
    $PNQPTJUJPO
    ௼ӝী
    ٮۄ
    0 /
    ૐо
46. Composition Layout Draw SubComposition 
    ࠗݽ੄
    ઁড
    ઑѤ
    ֢୹
    
    ן਷
    ୡӝച
47. Composition Layout Draw Composition DPOTUSBJOUT 
    ࠗݽ੄
    ઁড
    ઑѤ
    ֢୹ @Stable interface BoxWithConstraintsScope : BoxScope { val constraints: Constraints val minWidth: Dp val maxWidth: Dp val minHeight: Dp val maxHeight: Dp }
48. Composition Layout Draw 
    ן਷
    ୡӝച @Composable fun LazyLayout() @Composable fun LazyRow() @Composable fun LazyColumn() -B[Z-BZPVU਷
    ചݶী
    աఋաӝ
    ߄۽
    ੹ী
    -BZPVU
    
    %SBX
    ૓೯
49. Composition SubComposition  
50. Composition SubComposition SubComposition SubComposition SubComposition 😅
51. 3. Snapshot System  *OUSPEVDJOH
    4OBQTIPU
     5JNF
    $PNQMFYJUZ
     $PNQPTJUJPO-PDBM
52. State<T> CompositionLocal SnapshotStateList<T>
53. 4OBQTIPU
54. 4OBQTIPU ஹನ੷࠶਷
    प೯غח
    ࣽࢲо
    ੿೧ઉ
    ੓૑
    ঋ׮
    
    ೞա੄
    4UBUFо
    زदী
    ߸҃ؼ
    ࣻ
    ੓਺
    
    ࢚క
    ୽ج
55. 4OBQTIPU ݒ
    ࢚క
    ߸҃ਸ
    ೧׼
    DBMMTJUFী
    Ҋ݀غѱ
    ૓೯ೞҊ
    ୶റ
    Ҋ݀ػ
    ߸҃ਸ
    ਗࠄ
    ࢚కী
    ߈৔ೞח
    ӝࣿ
    
    ࢚క
    ߸҃੄
    Ҋ݀ࢿ
    दझమ
56. 4OBQTIPU 
57. 4OBQTIPU  🤔
58. 
    4OBQTIPU  SomeGroup 1 Snapshot Gap Gap Gap Gap Gap Gap Gap
59. 
    4OBQTIPU  SomeGroup 1 Snapshot Gap Gap Gap Gap Gap Gap 
    4OBQTIPU 2 Snapshot
60. 
    4OBQTIPU  SomeGroup 1 Snapshot Gap Gap Gap Gap Gap 
    4OBQTIPU 2 Snapshot 
    4OBQTIPU 3 Snapshot
61. /
    4OBQTIPU  SomeGroup 1 Snapshot 4 Snapshot 6 Snapshot 2 Snapshot 3 Snapshot 5 Snapshot N Snapshot 7 Snapshot
62. SomeGroup 1 Snapshot 4 Snapshot 6 Snapshot 2 Snapshot 3 Snapshot 5 Snapshot N Snapshot 7 Snapshot 
    4OBQTIPU
    3FBE
    
    4OBQTIPU
    8SJUF 
63. SomeGroup px - snapshot px4 - snapshot px2 - snapshot px3 - snapshot @Composable fun Main() { val px = 1.dp.px val px2 = 2.dp.px val px3 = 3.dp.px val px4 = 4.dp.px } inline val Dp.px @Composable @ReadOnlyComposable get() = with(LocalDensity.current) { toPx() } Gap Gap Gap Gap
64. SomeGroup density - snapshot @Composable fun Main() { val density = LocalDensity.current val px = with(density) { 1.dp.toPx() } val px2 = with(density) { 2.dp.toPx() } val px3 = with(density) { 3.dp.toPx() } val px4 = with(density) { 4.dp.toPx() } } Gap Gap Gap Gap Gap Gap Gap
65. DPNQPTJUJPO-PDBM0G
    val LocalTextSelectionColors = compositionLocalOf { DefaultTextSelectionColors } val LocalTextStyle = compositionLocalOf { TextStyle.Default } val LocalConfiguration = compositionLocalOf<Configuration>( neverEqualPolicy() 
 ) { noLocalProvidedFor("LocalConfiguration") } val LocalContentAlpha = compositionLocalOf { 1f } SomeGroup CompositionLocal CompositionLocal Composable CompositionLocal CompositionLocal Composable Composable Composable
66. TUBUJD$PNQPTJUJPO-PDBM0G
    val LocalContext = staticCompositionLocalOf<Context> { noLocalProvidedFor("LocalContext") } val LocalClipboardManager = staticCompositionLocalOf<ClipboardManager> { noLocalProvidedFor("LocalClipboardManager") } val LocalDensity = staticCompositionLocalOf<Density> { noLocalProvidedFor("LocalDensity") } val LocalFocusManager = staticCompositionLocalOf<FocusManager> { noLocalProvidedFor("LocalFocusManager") } StaticCompositionLocal Composable Composable Composable Composable Composable SomeGroup Composable Composable
67. ↟ೣԋ
    ࠁݶ
    જਸ
    ੗ܐ 4. Wrap-up  -BNCEB
    0QUJNJ[JOH
     -JWF-JUFSBM
     $PNQJMFS
    .FUSJDT
     4OBQTIPU
    4ZTUFN
    XJUI
    .7$$
     #BTFMJOF
    1SPGJMFT
     $PNQPTBCMF
    (SPVQT
     4UBCJMJUZ
    4ZTUFN
68. хࢎ೤פ׮ ஹನૉ ղࠗ ௏٘ח cs.android.comীࢲ оઉ৳णפ׮. ੉ ೐ۨઃప੉࣌ীח షझ౱ীࢲ ઁҕೠ షझಕ੉झо ੸ਊغয ੓णפ׮. QnA
    
    🙋