Jetpack Compose의 mutableStateListOf와 mutableStateMapOf

Jetpack Compose는 스냅샷 상태(snapshot state) 시스템과 통합되는 관찰 가능한 컬렉션 타입으로 mutableStateListOf와 mutableStateMapOf를 제공합니다. 일반적인 MutableList나 MutableMap과 달리, 이 컬렉션에 가해진 변경 사항은 Compose가 자동으로 추적하며, 해당 데이터를 읽고 있는 모든 컴포저블(composable)에 대해 리컴포지션(Recomposition)을 자동으로 트리거합니다. 이러한 컬렉션이 내부적으로 어떻게 동작하는지, 그리고 mutableStateOf(list)와 같은 대안과 비교하여 언제 사용하는 것이 적합한지는 Compose 면접에서 자주 등장하는 주제이기도 합니다. 이번 면접 질문을 통하여 아래 내용들을 학습하실 수 있습니다.

• mutableStateListOf와 mutableStateMapOf가 스냅샷 시스템과 어떻게 통합되는지 설명할 수 있습니다.
• mutableStateListOf와 mutableStateOf(mutableListOf())의 관찰 세분화(granularity) 차이를 구분할 수 있습니다.
• remember와 함께 관찰 가능한 컬렉션을 올바르게 사용하여 반응형 UI를 구성할 수 있습니다.
• 관찰이 깨지거나 예기치 않은 리컴포지션을 유발하는 흔한 실수를 파악할 수 있습니다.

관찰 가능한 컬렉션의 동작 원리

mutableStateListOf는 SnapshotStateList를 반환하며, 이 클래스는 MutableList를 구현하는 동시에 Compose의 스냅샷 시스템에 참여합니다. 모든 구조적 변경(add, remove, set, clear)은 스냅샷에 기록되고, 모든 읽기 연산(get, iterate, size)은 의존성을 생성합니다. Compose는 이러한 읽기를 추적하다가 변경이 발생하면 해당 컴포지션을 무효화합니다. 다음 예제를 살펴보겠습니다.

@Composable
fun TaskList() {
    // remember로 감싸야 리컴포지션 시에도 상태가 유지됩니다
    val tasks = remember { mutableStateListOf("Setup", "Build", "Deploy") }

    Column {
        tasks.forEach { task ->
            Text(text = task)
        }
        Button(onClick = { tasks.add("Test") }) {
            Text("Add Task")
        }
    }
}

버튼을 클릭하면 tasks.add("Test")가 SnapshotStateList를 변경합니다. Compose는 forEach 루프가 이 리스트에서 데이터를 읽고 있다는 사실을 감지하고, TaskList에 대한 리컴포지션을 예약합니다. 별도의 알림 처리 없이도 새로운 항목이 화면에 자동으로 나타나게 됩니다. 이 점이 바로 SnapshotStateList의 핵심적인 장점입니다.

mutableStateMapOf는 키-값 쌍에 대해 동일한 방식으로 동작하며, MutableMap을 구현하는 SnapshotStateMap을 반환합니다.

@Composable
fun PreferencesScreen() {
    val prefs = remember {
        mutableStateMapOf("notifications" to true, "darkMode" to false)
    }

    Column {
        prefs.forEach { (key, value) ->
            Row {
                Text(text = key)
                Switch(
                    checked = value,
                    // Switch 상태 변경 시 스냅샷 시스템이 자동으로 리컴포지션 트리거
                    onCheckedChange = { prefs[key] = it }
                )
            }
        }
    }
}