들어가며
UI인 Compose와 UI 요소인 상태 가 결합되어야 비로소 유저에게 보여지는 UI가 완성됩니다.
그렇기에 상태를 효과적으로 관찰하고 관리하여 UI를 업데이트하는 것이 중요합니다.
그렇다면 어떻게 State를 관찰할 수 있을까요? 지금부터 State를 관찰하는 방법에 대해 다루겠습니다.
State 관찰에 따른 로직
State를 관찰하여 무엇을 업데이트 해야하는지에 따라 관찰 방법이 크게 2가지로 나뉘어집니다.
- State의 변화에 따라 UI를 업데이트 해야하는 경우
- State가 변해도 UI를 업데이트하지 않고, 비즈니스 로직을 수행해야하는 경우
적절한 경우에 맞춰 로직을 수행하여, UI를 효율적으로 업데이트해야 합니다.
State의 변화에 따라 UI 업데이트: derivedStateOf
Jetpack Compose에서는 자주 변하는 State를 관찰하는 방법에 대해 제시하고 있습니다. 이런 상황에서는 Derived State를 사용해야 하는데요, 그렇다면 Derived State는 무엇일까요?
Derived State는 State에 대한 계산의 결과값이 달라졌을 때만 Recomposition이 일어나도록 하는 객체입니다. derivedStateOf 를 사용해 State를 감싸면, State의 특정 변화를 관찰하여 효율적으로 UI를 업데이트 할 수 있습니다.
Derived State를 왜 사용할까요? Recomposition은 컴포저블 input과 state의 변화에 따라 발생합니다. 하지만 모든 state와 input의 변화에 따라 UI를 업데이트를 하면 불필요한 Recomposition이 발생하는 경우가 있습니다. 예를 들어서, 특정 지점에서의 text값에 따라 UI를 업데이트 해야하는 경우가 있습니다. 이런 경우 Derived State를 활용하면 효율적으로 상태를 관찰하여 UI를 변경할 수 있습니다.
이 차이를 그림으로 한눈에 보면 다음과 같습니다.
remember를 사용하는 경우:
derivedStateOf를 사용하는 경우:
다만, derivedStateOf 는 리소스 비용이 크기 때문에, 정말 필요한 상황에서만 사용하는 것이 좋습니다.
State의 변화에 따라 비즈니스 로직 업데이트: snapshotFlow
그렇다면 State의 변화에 따라 비즈니스 로직을 수행하고, UI를 업데이트하지 않는 경우에는 어떻게 해야할까요? Android Compose에서는 이에 대한 대안으로 snapshotFlow를 제시하고 있습니다.
snapshotFlow 는 State 객체를 cold Flow로 변환시킵니다. snapshotFlow 람다 내에서 읽은 State 객체 중 하나가 변경될 때, 새로운 값이 이전 값과 다를 경우에만 값을 방출합니다.
이는 Flow.distinctUntilChanged와 유사합니다.
그렇기 때문에 snapshotFlow 는 Flow 연산자의 장점을 이용할 수 있으며, Recomposition없이 State의 변화에 따른 로직을 수행할 수 있습니다.
출처
https://medium.com/androiddevelopers/jetpack-compose-when-should-i-use-derivedstateof-63ce7954c11b
