Compose 학습부터 실제 적용까지
선언형 UI가 대세임을 선언합니다Compose 학습부터 실제 적용까지이현우 Mathpresso Inc.Android/React Native Developer
View Slide
Compose, Ӓ दযڃ ҅ӝ۽ Composeܳ द೮חо?যڌѱ ҕࠗܳ ೮חо?
#Android Dev Challenge
Compose 걸음마 떼기Compose가 Stable Release 된 이후Devfest Codelab과 같은 커뮤니티 스터디를 활용하여Compose Codelab을 간단하게나마 훑어보기QANDA에 도입된 Compose 코드와 디자인 시스템 코드를활용하여 Compose UI/디자인 이해하기
Am I Stuck?Compose۽ ೞա জਸ ٜ݅যաт ٸCompose۽ ೞա ӝמ ઁೡ ٸCompose Codelab ݃ச ٸ
React Native<- >Jetpack ComposeReact Native 개발을 하면서 알게 된 지식 Jetpack Compose에서 사용되는 지식
사이드 프로젝트에 적용해보기
Why Compose?Declarative UI/RecompositionState Hoisting
선언형 UI
선언형 UIState에 맞춰서 UI가 그려진다개발자가 직접 State를 설정할 필요가 없어져Human Error의 가능성이 현저히 떨어짐Android Composable 함수들의 호출로 새로운 UIComponent가 만들어짐빠르게 본인이 원하는 형태의 UI를 그릴 수 있음
RecompositionComposable 함수를 구성하는 State가 변경될 때, Composable을 갱신시키는 것
Recomposition
Smart Recomposition
Smart RecompositionSmart Recomposition이 보장되어있지 않다
@StableUse@Stable annotation to make skippable state
@Immutable,@StableMarkerUse@StableMarker annotations to make skippable state
State HoistingState->UI 공통적으로 사용하는 State는 최소 공통 조상 LCA 에게 할당
Side EffectDeclarative UI Function & Side Effect
선언형 UIF STATE=UI함수는 상태 STATE 에 따라 UI를 그려주는 액션을 취함
그렇다면…F STATE=UI그러면 UI를 그려주는 동작 이외의 것들은?
Side EffectComposable 함수의 목적 UI 렌더링 이외의앱 상태의 변경사항
React React Native 에서는?
React React Native 에서는?학생들의 정보를 DataSource 서버, 로컬 저장소 등에서 가져오기 위한 함수
React React Native 에서는?classId가 변하는 경우에만 위의 함수를 호출한다 Dependency KeyDependency Array가 비어있는 경우, UI Component가 올라왔을 때 한 번만 호출
React React Native 에서는?UI Component가 화면에 올라올 때 함수가 호출됨
React React Native 에서는?UI Component가 화면에서 안 보일 때 자동으로 함수가 종료됨
React React Native 에서는?매 Re rendering Recomposition 마다 호출
그럼 Compose에서는?함수 scope 내에서 suspend function 호출 가능
LaunchedEffectuseEffect에서 Dependency Array가 비어있는 경우=>Composable 함수가 처음 불릴 때 호출
LaunchedEffectuseEffect에서의 Dependency Array=>isSuccess, progress가변경되면 내부 호출
DisposableEffectisSuccess, progress가 변경될 때에만 호출
DisposableEffectisSuccess, progress가 변경될 때에만 호출Composable이 화면에서 안보일경우 자동으로 해제
SideEffect매 Recomposition마다 호출함
이외에도produceStatederivedStateOfsnapshotFlowrememberCoroutineScope
ConclusionAnd Then…
F STATE=UI
F STATE=UICompose로 UI 구현하기Layout/Modifier/AnimationStyle Design System
F STATE=UIUI 상태 관리하기State/State Hoisting/Architecture LayeringCompositionLocal
F STATE=UIApp 품질 관리/유지보수Performance Recomposition/StabilitySide Effect/Architecture LayeringTesting/Accessibility
Compose Your Self
Compose, Your Development
이현우 Mathpresso Inc.Android/React Native Developer