Jetpack Compose (10) 썸네일형 리스트형 [Jetpack Compose] Donut-hole Skipping을 통한 최적화 Defer Read(지연 읽기)지연 읽기라는 개념은 Compose에만 국한되지는 않는다. 다만, Compose에서 불필요한 Recomposition을 최적화하기 위한 방법으로 활용할 수 있다. 이를 이해하기 위해서는 몇 가지 사전 개념에 대한 이해가 필요하다.Recomposition의 범위상태가 변하면 Recomposition이 일어나면서 UI를 다시 그린다. Composable은 UI 트리 형태로 그려지기 때문에 상태가 변경되면 그 중 가장 가까운(바로 상위의) Composable Scope만 invalidation이 일어난다. 다음 코드를 보자. 매우 흔하게 사용되는 패턴으로 ViewModel에서 state를 결정하고 Screen에서 구독하고 있는 형태이다. 이 상태에서 uiState의 값이 변하면 .. [Jetpack Compose] Compose 수명 주기 Composable 수명 주기컴포저블의 수명 주기는 컴포지션 시작, 0회 이상 재구성 및 컴포지션 종료로 이루어진다.1. Composition 생성(Initial Composition)초기에 생성된 컴포지션을 수정할 수 있는 유일한 방법은 리컴포지션을 통하는 것이다. 처음으로 Composable 함수가 실행될 때 발생하는 단계로, 이 때 Compose는 Composable 트리(UI 트리)를 구성하고, 내부적으로 상태나 recomposition을 추적할 수 있는 객체들을 설정한다.2. Recomposition(재구성)Compose는 변경된 값에만 반응해서 필요한 부분만 다시 실행하며 UI를 업데이트하기 때문에 매우 효율적이다. UI에 영향을 미치는 상태 값이 변경될 경우 발생한다. 따라서 변경이 필요한.. [Jetpack Compose] UI State 저장 방법에 대하여 서론 Compose에서는 State를 이용해 상태를 추적하고 관리합니다. 이로 인해 recomposition 여부가 결정되며 사용자에게 보여지는 화면의 UI가 결정되기도 합니다. 요구사항에 맞춰 구현을 하다보니 A Screen에서 B Screen으로 이동했다가 다시 A Screen으로 이동했을 때 State가 유지되어야 하는 경우가 발생해 Compose에서 UI State를 저장하는 방식에 대해 알아보려고 합니다. rememberSaveable rememerSaveable은 UI State를 Bundle에 저장합니다. Bundle은 String 타입을 key로 가지는 Map 형태의 데이터 묶음인데, 안드로이드에서 상태의 저장 및 복구에 사용됩니다. 기본적으로 key에 대응하는 value 값으로 int, .. [Jetpack Compose] Compose 성능 최적화 서론 Compose로 만들어진 앱은 recomposition을 통해 다시 Composable이 그려지면서 UI를 변하게 할 수 있습니다. 구현에 급급하다보니 일단 문제가 없어보이면 불필요한 recomposition이 있는지 확인하거나 이를 줄이기 위한 작업이 없이 넘어갔습니다. 따라서 Compose의 recomposition이 언제 일어나는지, Compose의 성능을 최적화하기 위해서는 어떻게 해야 하는지에 대해 알아보려고 합니다. recomposition 먼저 Compose의 recomposition부터 짚고 넘어가야 합니다. recomposition은 Composable 내부의 원소가 변경이 되었을 때 Compose가 다시 계산되어 UI가 화면에 다시 그려지는 것을 의미합니다. Compose가 화면에.. [Jetpack Compose Side-effects] 6.SideEffect / produceState SideEffect SideEffect는 Composable에서 recomposition이 일어날 때마다 실행됩니다. Compose의 State를 Compose에서 관리하지 않는 객체와 공유할 때 사용합니다. 구글 공식 문서에서는 사용자 유형을 애널리틱스 라이브러리에 전달할 때, 사용자 유형의 값을 업데이트하기 위해서 SideEffect를 사용하는 예제를 보여주고 있습니다. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics: FirebaseAnalytics = remember { /* ... */ } // 리컴포지션이 성공적으로 일어날 때마다 실행됩니다 SideEffect { analytics.setUserPr.. [Jetpack Compose Side-effects] 5. LifecycleEventEffect 서론 구현 요구사항 중 앱이 백그라운드에서 포그라운드 상태로 진입하는 경우를 판단해야 하는 사항이 있었습니다. 리서치 결과 Activity의 Lifecycle의 변화에 따라 원하는 작업을 수행하고자 했습니다. 따라서 Activity의 Lifecycle과 Composable을 연결해야 했고, 앞서 포스팅한 DisposableEffect를 이용하는 것이 보편적인 방법인 듯 했습니다. 하지만 스택오버플로우 답변을 보고 새로운 Side-effects를 이용해 보다 간단하게 문제를 해결할 수 있음을 알게 되었습니다. LifecycleEventEffect 먼저 해당 Side-effects를 사용하기 위해서는 다음과 같이 lifecycle-runtime-compose:2.7.0-alpha01 이상을 implement.. [Jetpack Compose Side-effects] 4. DisposableEffect DisposableEffect Activity의 Lifecycle에서 onDestroy가 될 때 observer나 리소스를 정리했던 것처럼 Compose에서는 Composable이 화면에서 사라지면서 observer나 리소스를 정리해야 하는 경우 DisposableEffect를 활용할 수 있습니다. 앞서 살펴보았던 LaunchedEffect와 마찬가지로 최초로 화면에 Composable이 그려질 때 DisposableEffectScope이 호출됩니다. 따라서 해당 영역에서 observer나 리소스를 초기화할 수 있습니다. 또한 DisposableEffect 역시 인자로 key를 받게 되는데, LaunchedEffect가 key 값의 변화에 따라 재호출되었던 것처럼 DisposableEffect도 key가.. [Jetpack Compose Side-effects] 3. rememberUpdatedState rememberUpdatedState remember는 recomposition이 일어날 때 상태를 관리하기 위해서 사용합니다. remember의 상태를 변경하는 유일한 방법은 value 키워드를 이용해 직접 수정해주는 것 입니다. 따라서 상위 Composable에서 값이 변경되어도 하위 Composable에서 remember로 변수가 만들어졌다면 바뀐 State를 내려주어도, value 키워드로 수정해준 것이 아니기 때문에 하위 Composable에서 변수의 value가 바뀌지 않습니다. 아래의 코드를 살펴보면 하위 Composable인 ResultText에서 input을 인자로 받아 rememberResult 변수를 remeber를 활용해 초기화하고 있습니다. 이렇게 remember를 활용한 경우, .. 이전 1 2 다음
