2024 컴포즈 정원사

https://festa.io/events/5701

Transcript

1. 2024 Compose Gardener Compose Runtime으로 나만의 UI 만들기
3. Ji Sungbin ji@sungb.in github.com/jisungbin sungb.in __ . (*). /\-| -;-| (*) |___
4. 컴포즈 런타임의 동작 방식을 이해하고 UI와 어떻게 연결되는지 알아봅니다 Introducing the 
 Jetpack Compose Runtime __ . (*). /\-| -;-| (*) |___
5. T opics Applier UI 노드 순회 담당 Recomposer UI 노드 새로고침 담당 Composition UI 노드 관리 담당 __ . (*). /\-| -;-| (*) |___
6. T opics Applier UI 노드 순회 담당 Recomposer UI 노드 새로고침 담당 Composition UI 노드 관리 담당 __ . (*). /\-| -;-| (*) |___
7. __ . (*). /\-| -;-| (*) |___
8. Material (Card) @Composable @Composable (content: () -> Unit) {
 ( Modifier. (...)) {
 content()
 }
 } fun Card surface Box modifier = __ . (*). /\-| -;-| (*) |___
9. Material (Card) F oundation (Box) @Composable @Composable (content: BoxScope.() -> Unit) { ( { BoxScopeInstance.content() } ) } fun Box Layout content = __ . (*). /\-| -;-| (*) |___
10. Material (Card) F oundation (Box) Ui (Layout) @Composable @Composable (content: () -> Unit) {
 (
 ComposeUiNode. ,
 content
 )
 } fun Layout ComposeNode factory = content = Constructor __ . (*). /\-| -;-| (*) |___
11. Material (Card) F oundation (Box) Ui (Layout) Runtime (ComposeNode) @Composable @Composable < (
 factory: () -> ,
 content: () -> Unit
 ) {
 .startNode()
 .createNode(factory)
 content()
 .endNode()
 } fun T> ComposeNode T currentComposer currentComposer currentComposer __ . (*). /\-| -;-| (*) |___
12. Column __ . (*). /\-| -;-| (*) |___
13. Header Image Column __ . (*). /\-| -;-| (*) |___
14. Header Image Row Column __ . (*). /\-| -;-| (*) |___
15. Header Image Title Icon Row Column __ . (*). /\-| -;-| (*) |___
16. Description Header Image Title Row Icon Column __ . (*). /\-| -;-| (*) |___
17. Description Row Header Image Title Row Icon Column __ . (*). /\-| -;-| (*) |___
18. Description Header Image Title Row Icon Topic Topic Row Column __ . (*). /\-| -;-| (*) |___
19. Description Header Image Title Row Icon Topic Topic Row Column Column HeaderImage Row Title Icon Description Row Topic Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 ()
 }
 } __ . (*). /\-| -;-| (*) |___
20. Applier 사용된 컴포저블을 트리 구조로 배치하고 순회하는 방법을 정의합니다. current: 현재 컴포저블 down(): 현재 컴포저블의 다음 자식 컴포저블로 이동 insert(): 현재 컴포저블에 자식 컴포저블 추가 up(): 현재 컴포저블의 부모 컴포저블로 이동 __ . (*). /\-| -;-| (*) |___
21. Column current Column {
 HeaderImage()
 Row {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
22. Header Image insert() Column Column HeaderImage {
 ()
 Row {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
23. Header Image down() Column Column HeaderImage {
 ()
 Row {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
24. Header Image Column Column HeaderImage {
 ()
 Row {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
25. up() Header Image Column Column HeaderImage {
 ()
 Row {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
26. Header Image Column Column HeaderImage {
 ()
 Row {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
27. Header Image Row insert() Column Column HeaderImage Row {
 ()
 {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
28. Header Image Row Column Column HeaderImage Row {
 ()
 {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } down() __ . (*). /\-| -;-| (*) |___
29. Header Image Row Column Column HeaderImage Row {
 ()
 {
 Title()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
30. Header Image insert() Title Row Column Column HeaderImage Row Title {
 ()
 {
 ()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
31. Header Image down() Title Row Column Column HeaderImage Row Title {
 ()
 {
 ()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
32. Header Image Title Row Column Column HeaderImage Row Title {
 ()
 {
 ()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
33. Header Image Title Row Column Column HeaderImage Row Title {
 ()
 {
 ()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } up() __ . (*). /\-| -;-| (*) |___
34. Header Image Title Row Column Column HeaderImage Row Title {
 ()
 {
 ()
 Icon()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
35. Header Image insert() Title Column Icon Row Column HeaderImage Row Title Icon {
 ()
 {
 ()
 ()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
36. Header Image down() Title Column Icon Row Column HeaderImage Row Title Icon {
 ()
 {
 ()
 ()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
37. Header Image Title Column Icon Row Column HeaderImage Row Title Icon {
 ()
 {
 ()
 ()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
38. Header Image Title Column Icon Row Column HeaderImage Row Title Icon {
 ()
 {
 ()
 ()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } up() __ . (*). /\-| -;-| (*) |___
39. Header Image Title Column Icon Row Column HeaderImage Row Title Icon {
 ()
 {
 ()
 ()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
40. Header Image Title Column Icon Row Column HeaderImage Row Title Icon {
 ()
 {
 ()
 ()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } up() __ . (*). /\-| -;-| (*) |___
41. Header Image Title Column Icon Row Column HeaderImage Row Title Icon {
 ()
 {
 ()
 ()
 }
 Description()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
42. Header Image Title Icon Row Description Column insert() Column HeaderImage Row Title Icon Description {
 ()
 {
 ()
 ()
 }
 ()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
43. Header Image Title Icon Row Description Column down() Column HeaderImage Row Title Icon Description {
 ()
 {
 ()
 ()
 }
 ()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
44. Header Image Title Icon Row Description Column Column HeaderImage Row Title Icon Description {
 ()
 {
 ()
 ()
 }
 ()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
45. Header Image Title Icon Row Description Column Column HeaderImage Row Title Icon Description {
 ()
 {
 ()
 ()
 }
 ()
 Row {
 Topic()
 Topic()
 }
 } up() __ . (*). /\-| -;-| (*) |___
46. Header Image Title Icon Row Description Column Column HeaderImage Row Title Icon Description {
 ()
 {
 ()
 ()
 }
 ()
 Row {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
47. Header Image Title Icon Row Description Row Column Column HeaderImage Row Title Icon Description Row {
 ()
 {
 ()
 ()
 }
 ()
 {
 Topic()
 Topic()
 }
 } insert() __ . (*). /\-| -;-| (*) |___
48. Header Image Title Icon Row Description Row Column Column HeaderImage Row Title Icon Description Row {
 ()
 {
 ()
 ()
 }
 ()
 {
 Topic()
 Topic()
 }
 } down() __ . (*). /\-| -;-| (*) |___
49. Header Image Title Icon Row Description Row Column Column HeaderImage Row Title Icon Description Row {
 ()
 {
 ()
 ()
 }
 ()
 {
 Topic()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
50. Header Image Title Icon Row Description Column Topic Row insert() Column HeaderImage Row Title Icon Description Row Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
51. Header Image Title Icon Row Description Column Topic Row down() Column HeaderImage Row Title Icon Description Row Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
52. Header Image Title Icon Row Description Column Topic Row Column HeaderImage Row Title Icon Description Row Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
53. Header Image Title Icon Row Description Column Topic Row Column HeaderImage Row Title Icon Description Row Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 Topic()
 }
 } up() __ . (*). /\-| -;-| (*) |___
54. Header Image Title Icon Row Description Column Topic Row Column HeaderImage Row Title Icon Description Row Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 Topic()
 }
 } __ . (*). /\-| -;-| (*) |___
55. Header Image Title Icon Row Description insert() Column Topic Topic Row Column HeaderImage Row Title Icon Description Row Topic Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 ()
 }
 } __ . (*). /\-| -;-| (*) |___
56. Header Image Title Icon Row Description down() Column Topic Topic Row Column HeaderImage Row Title Icon Description Row Topic Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 ()
 }
 } __ . (*). /\-| -;-| (*) |___
57. Header Image Title Icon Row Description Column Topic Topic Row Column HeaderImage Row Title Icon Description Row Topic Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 ()
 }
 } __ . (*). /\-| -;-| (*) |___
58. Header Image Title Icon Row Description Column Topic Topic Row Column HeaderImage Row Title Icon Description Row Topic Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 ()
 }
 } up() __ . (*). /\-| -;-| (*) |___
59. Header Image Title Icon Row Description Column Topic Topic Row Column HeaderImage Row Title Icon Description Row Topic Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 ()
 }
 } __ . (*). /\-| -;-| (*) |___
60. Header Image Title Icon Row Description Column Topic Topic Row Column HeaderImage Row Title Icon Description Row Topic Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 ()
 }
 } up() __ . (*). /\-| -;-| (*) |___
61. Column HeaderImage Row Title Icon Description Row Topic Topic {
 ()
 {
 ()
 ()
 }
 ()
 {
 ()
 ()
 }
 } Header Image Title Icon Row Description Column Topic Topic Row __ . (*). /\-| -;-| (*) |___
62. Description Header Image Title Row Icon Topic Topic Row Column __ . (*). /\-| -;-| (*) |___
63. Applier 컴포저블 노드를 트리 구조로 배치하고 순회하는 방법을 정의합니다. current: 현재 노드 down(): 현재 노드의 다음 자식 노드로 이동 insert(): 현재 노드에 자식 노드 추가 up(): 현재 노드의 바로 앞(위) 부모 노드로 이동 __ . (*). /\-| -;-| (*) |___
64. current: 현재 노드 down(): 현재 노드의 다음 자식 노드로 이동 up(): 현재 노드의 바로 앞(위) 부모 노드로 이동 insertTopDown(): 현재 노드에 하향식 방법으로 자식 노드 추가 insertBottomUp(): 현재 노드에 상향식 방법으로 자식 노드 추가 remove(): 특정 위치에 있는 노드 제거 move(): 특정 위치에 있는 노드를 다른 위치로 이동 clear(): 모든 노드 제거 Applier __ . (*). /\-| -;-| (*) |___
65. Compose Ui Applier -> UiApplie U 상향식인 insertBottomUp() 사용 Node -> LayoutNod4  LayoutNode#foldedChildren에 자식 노드 추  자식 노드도 LayoutNode로 동일 __ . (*). /\-| -;-| (*) |___
66. T opics Applier UI 노드 순회 담당 Recomposer UI 노드 새로고침 담당 Composition UI 노드 관리 담당 __ . (*). /\-| -;-| (*) |___
67. State의 변경이 감지되면, 
 해당 State를 읽는 LayoutNode의 새로고침을 예약합니다. Recomposer#runRecomposeAndApplyChanges Recomposer __ . (*). /\-| -;-| (*) |___
68. suspend fun while runRecomposeAndApplyChanges() { ( ) { awaitStateChanged() / whenNewFrameRequested { } } } shouldKeepRecomposing / State에 변경이 감지될 때까지 suspend로 대기 // 새로운 프레임이 요청될 때까지 suspend로 대기 // LayoutNode 새로고침 __ . (*). /\-| -;-| (*) |___
69. T opics Applier UI 노드 순회 담당 Recomposer UI 노드 새로고침 담당 Composition UI 노드 관리 담당 __ . (*). /\-| -;-| (*) |___
70. Applier가 작동할 트리를 생성하고, 생명주기에 맞게 트리 인스턴스를 관리합니다. Composition#setContent Composition __ . (*). /\-| -;-| (*) |___
71. Applier + Recomposer -> Composition // ComponentActivity#setContent의 최종 호출 함수 (요약됨) // Applier와 Recomposer를 사용하여 빈 트리 생성 // 생성된 트리에 first-composition 진행 (컴포저블 초기 상태 배치)
 fun val doSetContent(content: () -> Unit) { composition = Composition(UiApplier(), Recomposer()) composition.setContent(content) } @Composable __ . (*). /\-| -;-| (*) |___
72. composition.setContent { { ( ) ( ) { ( ) ( ) } } } < , > (factory: () -> ) {
 .startNode()
 .createNode(factory)
 .endNode()
 } // 모든 컴포저블이 결국 ComposeNode<LayoutNode, UiApplier>()로 Runtime에게 전달됨
 // insert(), down()
 // insert(), down(), up()
 // insert(), down(), up() // insert(), down() // insert(), down(), up() // insert(), down(), up() // up()
 // up() Column Text Text Row Text Text "Hello" "World!" "Jetpack" "Compose" @Composable fun Node Applier Node ComposeNode currentComposer currentComposer currentComposer __ . (*). /\-| -;-| (*) |___
73. Column {
 Text("Hello")
 Text("World!")
 Row {
 Text("Jetpack")
 Text("Compose")
 }
 } Column 루트 컴포저블인 Column으로 Composition 시작
 -> 초기 UI 트리 생성 __ . (*). /\-| -;-| (*) |___
74. Column Text {
 ( )
 "Hello" Text("World!")
 Row {
 Text("Jetpack")
 Text("Compose")
 }
 } Column “Hello“ __ . (*). /\-| -;-| (*) |___
75. Column “World!” “Hello“ Column Text Text {
 ( )
 ( )
 "Hello" "World!" Row {
 Text("Jetpack")
 Text("Compose")
 }
 } __ . (*). /\-| -;-| (*) |___
76. Column “World!” “Hello“ Row Column Text Text Row {
 ( )
 ( )
 "Hello" "World!" {
 Text("Jetpack")
 Text("Compose")
 }
 } __ . (*). /\-| -;-| (*) |___
77. Column “Jetpack” “World!” “Hello“ Row Column Text Text Row Text {
 ( )
 ( )
 {
 ( )
 "Hello" "World!" "Jetpack" Text("Compose")
 }
 } __ . (*). /\-| -;-| (*) |___
78. Column “Jetpack” “World!” “Hello“ “Compose” Row Column Text Text Row Text Text {
 ( )
 ( )
 {
 ( )
 ( )
 "Hello" "World!" "Jetpack" "Compose" }
 } __ . (*). /\-| -;-| (*) |___
79. Column “Jetpack” “World!” “Hello“ “Compose” Row Column Text Text Row Text Text {
 ( )
 ( )
 {
 ( )
 ( )
 }
 } "Hello" "World!" "Jetpack" "Compose" __ . (*). /\-| -;-| (*) |___
80. Column “Jetpack” “World!” “Hello“ “Compose” Row Hello World! Jetpack Compose __ . (*). /\-| -;-| (*) |___
81. 여기까지가 Compose Runtime의 핵심 Applier 컴포저블 노드를 트리 구조로 배치하고
 순회하는 방법을 정의합니다. Recomposer State의 변경이 감지되면, 
 해당 State를 읽는 LayoutNode의
 새로고침을 예약합니다. Composition Applier가 작동할 트리를 생성하고, 생명주기에 맞게 트리 인스턴스를 관리합니다. __ . (*). /\-| -;-| (*) |___
82. Compose Runtime 매우 잘 설계된 노드 순회/관리 라이브러리 (안드로이드 의존 X) __ . (*). /\-| -;-| (*) |___
83. Compose Ui Runtime에서 관리하는 노드를 안드로이드 UI로 해석하는 라이브러리 __ . (*). /\-| -;-| (*) |___
84. 나만의 Applier로 UI 라이브러리를 만들어 봅니다 Playing with the 
 Jetpack Compose Runtime __ . (*). /\-| -;-| (*) |___
85.  TexÆ  List (ordered) Hello Markdown! This is my list& $# First ite6 !# Second ite6 %# Third item Goodbye Markdown! __ . (*). /\-| -;-| (*) |___
86. 이제 같이 해봐요 __ . (*). /\-| -;-| (*) |___
87. https://is.gd/2024cgt __ . (*). /\-| -;-| (*) |___
88. 끝까지 함께 해주셔서 감사합니다! Finish \.-"-./ \( ^▼^)/ @ |‾‾‾‾‾| *|@ ///,\\.// ";-----, @|* \\\//.\\
89. https://is.gd/composeppt __ . (*). /\-| -;-| (*) |___
90. https://is.gd/composecli __ . (*). /\-| -;-| (*) |___
91. https://is.gd/composemd __ . (*). /\-| -;-| (*) |___
92. 2024. 11. 02. (생각보다 쉬운) Kotlin Compiler Plugin으로 리컴포지션 추적기 만들기 이때도 와주실거죠?