2023년 4월 1일에 GDG Korea Android에서 주최한 super.init(version = 4) 행사에서 Compose 발표 자료입니다.

1. 선언형 UI가 대세임을 선언합니다
Compose 학습부터 실제 적용까지
이현우 Mathpresso Inc.
Android/React Native Developer

2. Compose, 그 시작
어떤 계기로 Compose를 시작했는가?
어떻게 공부를 했는가?

3. #Android Dev Challenge

4. #Android Dev Challenge

5. Compose 걸음마 떼기
Compose가 Stable Release 된 이후
Devfest Codelab과 같은 커뮤니티 스터디를 활용하여
Compose Codelab을 간단하게나마 훑어보기
QANDA에 도입된 Compose 코드와 디자인 시스템 코드를
활용하여 Compose UI/디자인 이해하기

6. Am I Stuck?
Compose로 하나의 앱을 만들어나갈 때
Compose로 하나의 기능 제작할 때
Compose Codelab 마칠 때

7. React Native
<->
Jetpack Compose
React Native 개발을 하면서 알게 된 지식 Jetpack Compose에서 사용되는 지식

8. 사이드 프로젝트에 적용해보기

9. Why Compose?
Declarative UI/Recomposition
State Hoisting

10. 선언형 UI

11. 선언형 UI
State에 맞춰서 UI가 그려진다
개발자가 직접 State를 설정할 필요가 없어져
Human Error의 가능성이 현저히 떨어짐
Android Composable 함수들의 호출로 새로운 UI
Component가 만들어짐
빠르게 본인이 원하는 형태의 UI를 그릴 수 있음

12. Recomposition
Composable 함수를 구성하는 State가 변경될 때, Composable을 갱신시키는 것

13. Recomposition

14. Recomposition

15. Smart Recomposition

16. Smart Recomposition
Smart Recomposition이 보장되어있지 않다

17. @
Stable
Use
@
Stable annotation to make skippable state

18. @
Immutable,
@
StableMarker
Use
@
StableMarker annotations to make skippable state

19. State Hoisting
State
->
UI 공통적으로 사용하는 State는 최소 공통 조상 LCA 에게 할당

20. Side Effect
Declarative UI Function & Side Effect

21. 선언형 UI
F STATE
=
UI
함수는 상태 STATE 에 따라 UI를 그려주는 액션을 취함

22. 그렇다면…
F STATE
=
UI
그러면 UI를 그려주는 동작 이외의 것들은?

23. Side Effect
Composable 함수의 목적 UI 렌더링 이외의
앱 상태의 변경사항

24. React React Native 에서는?

25. React React Native 에서는?
학생들의 정보를 DataSource 서버, 로컬 저장소 등
에서 가져오기 위한 함수

26. React React Native 에서는?
classId가 변하는 경우에만 위의 함수를 호출한다 Dependency Key
Dependency Array가 비어있는 경우, UI Component가 올라왔을 때 한 번만 호출

27. React React Native 에서는?
UI Component가 화면에 올라올 때 함수가 호출됨

28. React React Native 에서는?
UI Component가 화면에서 안 보일 때 자동으로 함수가 종료됨

29. React React Native 에서는?
매 Re rendering Recomposition 마다 호출

30. 그럼 Compose에서는?
함수 scope 내에서 suspend function 호출 가능

31. LaunchedEffect
useEffect에서 Dependency Array가 비어있는 경우
=>
Composable 함수가 처음 불릴 때 호출

32. LaunchedEffect
useEffect에서의 Dependency Array
=>
isSuccess, progress가
변경되면 내부 호출

33. DisposableEffect
isSuccess, progress가 변경될 때에만 호출

34. DisposableEffect
isSuccess, progress가 변경될 때에만 호출
Composable이 화면에서 안보일경우 자동으로 해제

35. SideEffect
매 Recomposition마다 호출함

36. 이외에도
produceState
derivedStateOf
snapshotFlow
rememberCoroutineScope

37. Conclusion
And Then…

38. F STATE
=
UI

39. F STATE
=
UI
Compose로 UI 구현하기
Layout/Modifier/Animation
Style Design System

40. F STATE
=
UI
UI 상태 관리하기
State/State Hoisting/Architecture Layering
CompositionLocal

41. F STATE
=
UI
App 품질 관리/유지보수
Performance Recomposition/Stability
Side Effect/Architecture Layering
Testing/Accessibility

42. Compose Your Self

43. Compose, Your Development

44. 이현우 Mathpresso Inc.
Android/React Native Developer