Compose. StateFlow + List 를 활용하여 Recomposition 할 때 Tips
오픈 카톡방에서 질문이 올라와서 공유를 위해 작성해둡니다.
List(MutableList)를 사용할 때, 갯수가 동일하고 특정 요소의 프로퍼티만 변경하는 경우 StateFlow 의 setValue 까지는 동작하지만, Recomposition 이 발생하지 않아 화면이 업데이트 되지 않는 경우가 존재 합니다.
이는 기본적으로 Kotlin의 List를 Compose 컴파일러는 불안정한 자료구조로 보기 때문에, 사이즈가 동일하고, 한 프로퍼티만 변경된 경우라면, 리스트 자체는 바뀌지 않은 것으로 간주되어 Compose가 이를 감지하지 못할 수 있습니다 그래서 따로 핸들링 해줘야 합니다. (Stable 과 흡사합니다.)
그런 경우 검색해보면,
[Jetpack Compose] StateFlow 값 변경시 주의 점
StateFlow의 값을 변경했을 때 컴포즈에 통지가 되는데 List의 경우 갯수가 동일하고 특정 요소의 프로퍼티만 변경하는 경우 안 되는 예되는 예. 객체를 갈아끼우면 됨
velog.io
Jetpack Compose: No recomposition happening, when updating list element contents
I am experimenting with Android's Jetpack Compose. For simple use cases everything is working as expected, but I am having some trouble with missing recompositions for a more advanced case. My Mode...
stackoverflow.com
와 같이 처리하라는 글을 보게 됩니다.
위처럼 처리할 수도 있지만, Android 에서는 더 나은 방법을 제공하고 있습니다.
바로 Android Compose 코드랩에도 나와있는 방법으로, SnapShotStateList 를 활용하는 방법 입니다.
https://developer.android.com/codelabs/jetpack-compose-state?hl=ko#10 (관찰 가능한 MutableList)
Jetpack Compose의 상태 | Android Developers
이 Codelab에서는 상태를 관리하여 다양한 기능의 대화형 Compose 애플리케이션을 빌드하는 방법을 알아봅니다.
developer.android.com
따라서 SnapshotStateList 를 제공하는 mutableStateListOf 로 해결해볼 수 있습니다.
위 문제는 해결되지만, 은탄환은 없는 것처럼 올바른 방식으로 활용하지 않는다면 좀더 잦은 Recomposition 이 일어나게 되고 UI 관련 성능이 문제가 될 수 있습니다. 따라서 @Immutable 과 @Stable 같은 Recomposition 을 Skip 하는데 도움이 되는 어노테이션의 활용이 필요합니다. 또한 Mutable 하게 됨으로써 오는 단점들도 존재합니다.
그럼 20000