본문 바로가기

Jetpack Compose

(8)
[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를 활용한 경우, ..
[Jetpack Compose Side-effects] 2. rememberCoroutineScope rememberCoroutineScope Compose에서는 rememberCoroutineScope을 통해 해당 Composable의 Lifecylce을 따르는 CoroutineScope를 제공합니다. 여기까지만 보면 LaunchedEffect에서 제공하는 CoroutineScope과 동일한 기능을 하는 것처럼 보입니다. 하지만 LaunchedEffect는 Composable이기 때문에 다른 Composable 내부에서만 사용할 수 있습니다. remeberCoroutineScope을 활용하면 특정 Composable의 CoroutineScope을 하위의 다른 Composable에서도 이용할 수 있습니다. 아래 코드를 보면 SideEffectScreen()의 CoroutineScope을 remeberCo..
[Jetpack Compose Side-effects] 1. LaunchedEffect 서론 최근 팀원 한 분이 코드 리뷰로 derivedStateOf를 사용해 코드의 중복 제거와 상태 관리를 안전하고 편하게 하는 방법을 알려주셔서 Compose의 Side-effects를 잘 알아두고 적재적소에 활용하면 불필요한 리컴포지션을 줄이고 코드를 간결하게 만들 수 있을 것 같아 정리해보려고 합니다. 자주 사용하는 LaunchedEffect 부터 생소한 snapshotFlow 등 다양한 Side-effects 들을 다룰 예정입니다. Side-effects 란? 먼저 Side-effects가 무엇인지부터 알고 넘어가려고 합니다. Compose에서는 데이터의 값이 변하면 새로운 데이터 값을 이용해 Composable을 다시 호출합니다. 다시 호출하면서 함수가 recomposition 되며, 새로운 데이..