들어가며
이 글을 보는 당신, 변경 가능한 객체(예: ArrayList 혹은 mutableListOf)가 변경되었을 때 Recomposition이 일어나지 않아 당황하고 있나요?
데이터는 변경되었는데 UI가 업데이트 되지 않아 당황하고 있나요?
지금부터 이 문제를 함께 해결해 봅시다.
왜 UI가 업데이트 되지 않을까요?
Compose에서는 State가 어떻게 동작하는지 제대로 이해 못 할 경우, 많은 버그와 의도치 않은 동작이 발생할 수 있습니다.
@Composable
fun FeedsScreen(){
val feeds by remember { mutableListOf<Feed>() }
LazyColumn {
// ...
}
}위의 예시에서 feeds의 일부 파라미터가 변경되더라도 Recomposition이 발생하지 않습니다. State가 MutableList와 같은 mutable data type일 경우, 변화를 감지하지 못하기 때문입니다.
stateful한 데이터를 감지하고 UI 업데이트하기
그렇다면 어떻게 stateful한 데이터의 변화를 감지하고 UI를 업데이트 할 수 있을까요?
Jetpack Compose에서는 이에 대한 대안으로 mutableStateListOf를 제공하고 있습니다.
mutableStateListOf 는 관찰가능한 리스트인 SnapshotStateList<T> 유형의 객체를 반환합니다. 해당 객체가 snapshot한 value를 관찰하여 데이터 변화를 감지하고 UI를 업데이트 할 수 있습니다.
SnapshotStateList란?
SnapshotStateList 란 Jetpack Compose에서 UI 상태를 효율적으로 관리하기 위해 제공하는 리스트 형태의 상태 저장 객체입니다. MutableState<List>의 대안으로 사용할 수 있으며, 리스트의 변경 사항이 자동으로 Compose UI에 반영되도록 해줍니다.
리스트 아이템의 추가, 수정, 삭제가 빈번히 발생하는 UI에서 성능 향상에 매우 유용합니다.
출처
