Compose. StateFlow + List 를 활용하여 Recomposition 할 때 Tips

오픈 카톡방에서 질문이 올라와서 공유를 위해 작성해둡니다.

 

List(MutableList)를 사용할 때, 갯수가 동일하고 특정 요소의 프로퍼티만 변경하는 경우 StateFlow 의 setValue 까지는 동작하지만, Recomposition 이 발생하지 않아 화면이 업데이트 되지 않는 경우가 존재 합니다.

 

이는 기본적으로 Kotlin의 List를 Compose 컴파일러는 불안정한 자료구조로 보기 때문에, 사이즈가 동일하고, 한 프로퍼티만 변경된 경우라면, 리스트 자체는 바뀌지 않은 것으로 간주되어 Compose가 이를 감지하지 못할 수 있습니다 그래서 따로 핸들링 해줘야 합니다. (Stable 과 흡사합니다.)

 

그런 경우 검색해보면,

https://velog.io/@jsoh/Jetpack-Compose-StateFlow-%EA%B0%92-%EB%B3%80%EA%B2%BD%EC%8B%9C-%EC%A3%BC%EC%9D%98-%EC%A0%90

[Jetpack Compose] StateFlow 값 변경시 주의 점

https://stackoverflow.com/questions/69711167/jetpack-compose-no-recomposition-happening-when-updating-list-element-contents

Jetpack Compose: No recomposition happening, when updating list element contents

 

와 같이 처리하라는 글을 보게 됩니다.

 

위처럼 처리할 수도 있지만, Android 에서는 더 나은 방법을 제공하고 있습니다.

 

바로 Android Compose 코드랩에도 나와있는 방법으로, SnapShotStateList 를 활용하는 방법 입니다.

https://developer.android.com/codelabs/jetpack-compose-state?hl=ko#10  (관찰 가능한 MutableList)

Jetpack Compose의 상태  |  Android Developers

 

문서 설명

 

따라서 SnapshotStateList 를 제공하는 mutableStateListOf 로 해결해볼 수 있습니다.

 

위 문제는 해결되지만, 은탄환은 없는 것처럼  올바른 방식으로 활용하지 않는다면 좀더 잦은 Recomposition 이 일어나게 되고 UI 관련 성능이 문제가 될 수 있습니다. 따라서 @Immutable 과 @Stable 같은 Recomposition 을 Skip 하는데 도움이 되는 어노테이션의 활용이 필요합니다. 또한 Mutable 하게 됨으로써 오는 단점들도 존재합니다. 

 

그럼 20000