Deep Dive into Jetpack Compose State

발표 대본 및 질문-답변은 성빈랜드에서 확인 가능합니다.

https://sungbin.land/deep-dive-into-jetpack-compose-state-%EB%B0%9C%ED%91%9C-%EC%9E%90%EB%A3%8C-%EB%B0%8F-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8F%84-%EB%8B%B5%EB%B3%80-4dbea6326b56

Transcript

1. Speaker l 2023 찰스의 안드로이드 컨퍼런스 Little Deep Dive into 
 Jetpack Compose State 지성빈
2. Speaker l 2023 찰스의 안드로이드 컨퍼런스 •성빈랜드 안드로이드 기술 블로그 운영 •보충역 병역특례 취업 준비 중 지성빈
3. 2023 찰스의 안드로이드 컨퍼런스 목표 •스냅샷 시스템의 컨셉을 이해한다. •StateObject와 StateRecord를 이해한다. •Undo/Redo 시스템을 만들 수 있다. •발표의 이해도를 높이기 위해 목표와 무관한 내용은 전체 생략
4. 2023 찰스의 안드로이드 컨퍼런스 Compose Artifacts 🎨 Ui 🛠 Runtime
5. 2023 찰스의 안드로이드 컨퍼런스 Compose Artifacts 🍀 Node 📸 Snapshot
6. 2023 찰스의 안드로이드 컨퍼런스 📸 Snapshot System •컴포즈에서 두 번째로 깊은 계층 •State의 구현체 •리컴포지션의 뼈대
7. 2023 찰스의 안드로이드 컨퍼런스 이걸 왜 알아야 해? •내부 개념인 만큼 컴포즈를 사용한다고 알아야 할 필요는 없다. •컴포즈 런타임 구성으로만 쓰이기엔 아까운 기술이고, 대부분 public api로 
 구현돼 있어서 컴포즈 내부에 관심이 있다면 한 번쯤 봐볼 가치는 있다. •이해하고 있으면 컴포즈의 상태 시스템을 자유자제로 다룰 수 있다.
8. 2023 찰스의 안드로이드 컨퍼런스 1. What is Snapshot System?
9. 2023 찰스의 안드로이드 컨퍼런스 📸 Snapshot System 컨셉 컴포지션은 특정 순서에 구애받지 않고 무작위 병렬로 실행된다. → 하나의 State에 여러 컴포지션이 동시에 접근할 수 있으며, 동시성 문제에 빠질 수 있음
10. 2023 찰스의 안드로이드 컨퍼런스 📸 Snapshot System 컨셉 💡 모든 State 연산을 고립되게 진행하자! 컴포지션은 특정 순서에 구애받지 않고 무작위 병렬로 실행된다. → 하나의 State에 여러 컴포지션이 동시에 접근할 수 있으며, 동시성 문제에 빠질 수 있음
11. class StringPrinter { private var value: String? = null fun delayedPrint(value: String, delay: Long = 1000L) { this.value = value Thread.sleep(delay) println(this.value) } }
12. fun main() { val stringPrinter = StringPrinter() thread { stringPrinter.delayedPrint("A") } thread { stringPrinter.delayedPrint("B") } }
13. fun main() { val stringPrinter = StringPrinter() thread { stringPrinter.delayedPrint("A") } thread { stringPrinter.delayedPrint("B") } } // result: B, B
14. class StringPrinter { private val value = ThreadLocal<String>() fun delayedPrint(value: String, delay: Long = 1000L) { this.value.set(value) Thread.sleep(delay) println(this.value.get()) } } // result: A, B
15. class StringPrinter { private val value = ThreadLocal<String>() fun delayedPrint(value: String, delay: Long = 1000L) { this.value.set(value) Thread.sleep(delay) println(this.value.get()) } } // result: A, B Snapshot
16. class StringPrinter { private val value = ThreadLocal<String>() fun delayedPrint(value: String, delay: Long = 1000L) { this.value.set(value) Thread.sleep(delay) println(this.value.get()) } } // result: A, B Snapshot “Snapshot System”
17. @Composable fun main(state: MutableState<Int>) { // 0 state.value = 1 state.value = 2 } 0 📸 1 2
18. @Composable fun main(state: MutableState<Int>) { // 0 state.value = 1 state.value = 2 // recomposition! } 0 📸 1 2
19. @Composable fun main(state: MutableState<Int>) { // 0 -> 10 state.value = 1 state.value = 2 
 // ৻ࠗ੄ ৔ೱਵ۽ state ਗࠄ ч੉ // زदী ߄Պ } 0 📸 1 2 10
20. @Composable fun main(state: MutableState<Int>) { // 0 -> 10 state.value = 1 state.value = 2 
 // recomposition! } 0 📸 1 2 10
21. 2023 찰스의 안드로이드 컨퍼런스 2. Snapshot System API
22. class StringPrinter { private val value = ThreadLocal<String>() fun delayedPrint(value: String, delay: Long = 1000L) { this.value.set(value) Thread.sleep(delay) println(this.value.get()) } } ` StateObject StateRecord
23. val state = mutableStateOf(0) state.value = 1 state.value = 2 state.value = 3 ` StateObject StateRecord
24. StateObject - StateRecord LinkedList // StateRecord LinkedList੄ द੘੼ val firstStateRecord: StateRecord
25. StateRecord // ׮਺ਵ۽ োѾػ ۨ௏٘ var next: StateRecord?
26. StateRecord // ࢜۽਍ StateRecord ࢤࢿ fun create(): StateRecord
27. StateRecord // ઱য૓ StateRecordীࢲ ч ࠂࢎ fun assign(value: StateRecord)
28. StateRecord // mutableೠ о੢ ୭न ۨ௏٘ী ੘স ࣻ೯ fun <R> writable( state: StateObject, block: StateRecord.() -> R, ): R
29. StateRecord // о੢ ୭न ۨ௏٘ী ੘স ࣻ೯ fun <R> withCurrent( block: (record: StateRecord) -> R, ): R
30. 2023 찰스의 안드로이드 컨퍼런스 3. Undo/Redo System
31. 2023 찰스의 안드로이드 컨퍼런스 Undo/Redo 시스템 1. 상태가 변경될 때마다 새로운 상태 값 저장 2. Undo 요청 시 이전 값으로 상태 복원 3. Redo 요청 시 다음 값으로 상태 복원
32. // അ੤ ೐ۨ੐ ੋؙझ var currentFrame = 0 // пп ೐ۨ੐߹ ࢚క ч(StateRecord) val frames = mutableListOf<StateRecord>()
33. // ч(StateRecord) ߸҃ਸ ୶੸ೡ ࢚క(StateObject) var target: StateObject? = null
34. // ୶੸ ઺ੋ ࢚క੄ ч(StateRecord)ਸ ೐ۨ੐ ߓৌী ੷੢ fun saveFrame() { frames += target!!.copyCurrentRecord() currentFrame++ }
35. // ઱য૓ ࢚కী ೡ׼ػ ч(StateRecord)ਸ ࠂࢎೞৈ ߈ജ fun StateObject.copyCurrentRecord(): StateRecord { val newRecord = firstStateRecord.create() firstStateRecord.withCurrent { current -> newRecord.assign(current) } return newRecord }
36. // ઱য૓ State੄ ࢚క ߸҃ਸ ୶੸ೞب۾ ૑੿ fun <T> MutableState<T>.track(): MutableState<T> { target = this as StateObject return this }
37. 2023 찰스의 안드로이드 컨퍼런스 Undo/Redo 시스템 1. 상태가 변경될 때마다 새로운 상태 값 저장 2. Undo 요청 시 이전 값으로 상태 복원 3. Redo 요청 시 다음 값으로 상태 복원
38. // ୶੸ ઺ੋ ࢚క੄ чਸ ੉੹ ೐ۨ੐ਵ۽ ࠂਗ fun undo() { if (currentFrame - 1 in frames.indices) { target!!.restoreFrom(frames[--currentFrame]) } }
39. // ࢚క੄ чਸ ઱য૓ ч(StateRecord)ਵ۽ ૑੿ fun StateObject.restoreFrom(record: StateRecord) { firstStateRecord.writable(this) { assign(record) } }
40. // ୶੸ ઺ੋ ࢚క੄ чਸ ׮਺ ೐ۨ੐ਵ۽ ࠂਗ fun redo() { if (currentFrame + 1 in frames.indices) { target!!.restoreFrom(frames[++currentFrame]) } }
41. 2023 찰스의 안드로이드 컨퍼런스 Undo/Redo 시스템 1. 상태가 변경될 때마다 새로운 상태 값 저장 2. Undo 요청 시 이전 값으로 상태 복원 3. Redo 요청 시 다음 값으로 상태 복원
42. 2023 찰스의 안드로이드 컨퍼런스 지금까지 만든 Undo/Redo 시스템 1. saveFrame(): 현재 프레임의 상태 값(StateRecord) 저장 2. track(): 추적할 상태(StateObject) 지정 3. undo(): 이전 프레임으로 상태 값(StateRecord) 복원 4. redo(): 다음 프레임으로 상태 값(StateRecord) 복원
43. 2023 찰스의 안드로이드 컨퍼런스 이제 만들 Undo/Redo 시스템 1. saveFrame() 호출 시점 2. 과거 프레임에서 신규 프레임을 저장했을 때 프레임 처리 정책
44. 2023 찰스의 안드로이드 컨퍼런스 saveFrame() 호출 시점 • 추적 중인 상태(StateObject)에 값(StateRecord)이 작성됐을 때 🙆 • undo()와 redo()로 상태 값(StateRecord)이 복원됐을 때 🙅
45. // StateObjectী StateRecordо ੘ࢿؼ ٸ ഐ୹غח ௒ߔ ١۾ // Set<Any>: ੘ࢿػ StateObject ݽ਺ context(Snapshot) fun registerApplyObserver( observer: (Set<Any>, Snapshot) -> Unit, ): ObserverHandle
46. // registerApplyObserver۽ ١۾ೠ ௒ߔਸ ೧ઁೞח ೩ٜ fun interface ObserverHandle { fun dispose() }
47. // ࢚క ч(StateRecord) ߸҃ ୶੸ਸ ஂࣗೞח ೩ٜ var handle: ObserverHandle? = null
48. // ୶੸ ઺ੋ ࢚కо ߸ೡ ٸ݃׮ saveFrame() ഐ୹ द੘ fun startRecording() { handle = Snapshot.registerApplyObserver { states, _ -> if (states.any { it == target }) { saveFrame() } } }
49. // ୶੸ ઺ੋ ࢚కо ߸ೡ ٸ݃׮ saveFrame() ഐ୹ ઺૑ fun stopRecording() { handle!!.dispose() }
50. // ઱য૓ State੄ ࢚క ߸҃ਸ ୶੸ೞب۾ ૑੿ fun <T> MutableState<T>.track(): MutableState<T> { target = this as StateObject startRecording() return this }
51. 2023 찰스의 안드로이드 컨퍼런스 saveFrame() 호출 시점 • 추적 중인 상태(StateObject)에 값(StateRecord)이 작성됐을 때 🙆 • undo()와 redo()로 상태 값(StateRecord)이 복원됐을 때 🙅
52. // ୶੸ ઺ੋ ࢚క੄ чਸ ੉੹ ೐ۨ੐ਵ۽ ࠂਗ fun undo() { stopRecording() if (currentFrame - 1 in frames.indices) { target!!.restoreFrom(frames[--currentFrame]) } startRecording() }
53. // ୶੸ ઺ੋ ࢚క੄ чਸ ׮਺ ೐ۨ੐ਵ۽ ࠂਗ fun redo() { stopRecording() if (currentFrame + 1 in frames.indices) { target!!.restoreFrom(frames[++currentFrame]) } startRecording() }
54. 2023 찰스의 안드로이드 컨퍼런스 이제 만들 Undo/Redo 시스템 1. saveFrame() 호출 시점 2. 과거 프레임에서 신규 프레임을 저장했을 때 프레임 처리 정책
55. 2023 찰스의 안드로이드 컨퍼런스 프레임 처리 정책 과거 프레임에서 신규 프레임을 저장하면 
 과거와 현재 사이의 모든 프레임 제거 후 신규 프레임 저장
56. // ୶੸ ઺ੋ ࢚క੄ ч(StateRecord)ਸ ೐ۨ੐ ݾ۾ী ੷੢ fun saveFrame() { if (currentFrame < frames.lastIndex) { frames.removeRange(start = currentFrame + 1, 
 end = frames.size) } frames += target!!.copyCurrentRecord() currentFrame++ }
57. 2023 찰스의 안드로이드 컨퍼런스 Undo/Redo System 완성! ✌ (전체 코드는 60줄)
58. var currentFrame = 0 val frames = mutableListOf<StateRecord>() var target: StateObject? = null var handle: ObserverHandle? = null
59. fun StateObject.copyCurrentRecord(): StateRecord { val newRecord = firstStateRecord.create() firstStateRecord.withCurrent { current -> newRecord.assign(current) } return newRecord }
60. fun saveFrame() { if (currentFrame < frames.lastIndex) { frames.removeRange(currentFrame + 1, frames.size) } frames += target!!.copyCurrentRecord() currentFrame++ }
61. fun startRecording() { handle = Snapshot.registerApplyObserver { states, _ -> if (states.any { it == target }) { saveFrame() } } }
62. fun stopRecording() { handle!!.dispose() }
63. fun <T> MutableState<T>.track(): MutableState<T> { target = this as StateObject startRecording() return this }
64. fun StateObject.restoreFrom(record: StateRecord) { firstStateRecord.writable(this) { assign(record) } }
65. fun undo() { stopRecording() if (currentFrame - 1 in frames.indices) { target!!.restoreFrom(frames[--currentFrame]) } startRecording() }
66. fun redo() { stopRecording() if (currentFrame + 1 in frames.indices) { target!!.restoreFrom(frames[++currentFrame]) } startRecording() }
67. 2023 찰스의 안드로이드 컨퍼런스
68. 2023 찰스의 안드로이드 컨퍼런스
69. // duckie-team/quack-quack-android Text( modifier = Modifier.span( texts = listOf("QuackQuack"), style = SpanStyle(color = Orange), ), text = "QuackQuack is an awesome ui kit.", typography = Body1, )
70. 2023 찰스의 안드로이드 컨퍼런스 감사합니다. jisungbin/SimpleStateHistory