지난 글에서 데이터와 로직을 ViewModel로 옮겼다. 근데 끝에 남겨둔 문제가 있었다. todoList를 바깥에서 직접 건드릴 수 있고, "지금 로딩 중이다" 같은 상태를 표현할 방법이 없다.

바깥에서 직접 건드릴 수 있다는 게 뭔 소리냐면

class TodoViewModel : ViewModel() {
    val todoList = mutableStateListOf(
        Todo(id = 1, title = "장보기")
    )

    fun addTodo(title: String) {
        todoList.add(Todo(id = todoList.size + 1, title = title))
    }
}

todoList가 val이긴 한데, mutableStateListOf로 만든 리스트 자체는 변경 가능한 객체다. 그래서 컴포저블 쪽 코드에서 실수로 이렇게 쓸 수도 있다.

// TodoListScreen 안에서, addTodo를 거치지 않고
viewModel.todoList.add(Todo(id = 999, title = "몰래 추가"))

addTodo 함수를 거치지 않고 리스트를 직접 조작해버렸다. 지금은 addTodo가 하는 일이 단순해서 큰 문제가 안 보이지만, 나중에 "추가할 때마다 서버에도 저장한다" 같은 로직이 addTodo 안에 들어가면, 이렇게 직접 건드리는 경로는 그 로직을 다 건너뛰게 된다. ViewModel을 쓰는 이유 중 하나가 "데이터를 바꾸는 길을 함수 몇 개로 좁혀두기"인데, 지금은 그 길이 막혀있지 않다.

StateFlow로 "읽기만 되는 창"을 만든다

import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow

data class TodoUiState(
    val todoList: List<Todo> = emptyList(),
    val isLoading: Boolean = false
)

class TodoViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(
        TodoUiState(todoList = listOf(Todo(id = 1, title = "장보기")))
    )
    val uiState: StateFlow<TodoUiState> = _uiState.asStateFlow()

    fun addTodo(title: String) {
        val newTodo = Todo(id = (_uiState.value.todoList.maxOfOrNull { it.id } ?: 0) + 1, title = title)
        _uiState.value = _uiState.value.copy(todoList = _uiState.value.todoList + newTodo)
    }

    fun toggleDone(id: Int) {
        val updated = _uiState.value.todoList.map {
            if (it.id == id) it.copy(isDone = !it.isDone) else it
        }
        _uiState.value = _uiState.value.copy(todoList = updated)
    }

    fun deleteTodo(id: Int) {
        _uiState.value = _uiState.value.copy(
            todoList = _uiState.value.todoList.filter { it.id != id }
        )
    }
}

_uiState(언더스코어로 시작하는 쪽)는 MutableStateFlow라서 값을 바꿀 수 있고, uiState(바깥에 공개하는 쪽)는 StateFlow라서 읽기만 된다. addTodo, toggleDone, deleteTodo 안에서만 _uiState.value를 바꾸고, 바깥(컴포저블 쪽)에는 읽기 전용인 uiState만 보여준다. 그래서 아까처럼 viewModel.todoList.add(...)로 몰래 건드리는 게 애초에 불가능해진다.

데이터를 하나씩 바꾸는 대신, UiState 전체를 새로 만든다

눈여겨볼 부분이 하나 더 있다. todoList.add(...)처럼 기존 리스트를 직접 바꾸지 않고, _uiState.value = _uiState.value.copy(...)로 매번 새 TodoUiState 객체를 만들어서 통째로 교체한다. StateFlow는 "값이 바뀌었는지"를 비교해서 구독자에게 새 값을 알려주는데, 리스트 안의 항목을 조용히 바꿔버리면 "이게 이전 값과 다른 객체"라는 신호가 명확하지 않을 수 있다. copy()로 새 객체를 만들어서 교체하면 "값이 바뀌었다"는 게 분명해진다.

컴포저블에서는 collectAsStateWithLifecycle로 구독한다

import androidx.lifecycle.compose.collectAsStateWithLifecycle

@Composable
fun TodoApp(viewModel: TodoViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            TodoListScreen(
                todoList = uiState.todoList,
                onAdd = viewModel::addTodo,
                onToggleDone = viewModel::toggleDone,
                onDelete = viewModel::deleteTodo,
                onTodoClick = { todo -> navController.navigate("detail/${todo.id}") }
            )
        }
        composable("detail/{todoId}") { backStackEntry ->
            val todoId = backStackEntry.arguments?.getString("todoId")?.toIntOrNull()
            val todo = uiState.todoList.find { it.id == todoId }
            TodoDetailScreen(
                todo = todo,
                onToggleDone = viewModel::toggleDone,
                onBack = { navController.popBackStack() }
            )
        }
    }
}

[이미지: 할 일을 추가·체크·삭제하는 모습 — StateFlow로 바꾼 뒤에도 동작은 그대로인 화면]

collectAsStateWithLifecycle()은 StateFlow를 컴포즈의 State로 바꿔주는 함수다. uiState.todoList가 바뀔 때마다 이 값을 읽고 있는 컴포저블이 리컴포지션된다. 화면이 백그라운드로 가 있을 때는 구독을 잠깐 멈춰서(생명주기를 인식해서) 쓸데없는 작업을 줄여준다는 점이 collectAsState()와 다르다.

(여기 쓰인 collectAsStateWithLifecycle은 androidx.lifecycle:lifecycle-runtime-compose 라이브러리가 제공한다. 이 글 기준 안정 버전은 2.11.0이다.)

정리

• _uiState(MutableStateFlow)는 ViewModel 안에서만 바꾸고, uiState(StateFlow)는 바깥에 읽기 전용으로 노출한다
• 데이터를 바꿀 때는 리스트를 직접 건드리지 말고, copy()로 새 UiState를 만들어서 통째로 교체한다
• 컴포저블에서는 collectAsStateWithLifecycle()로 구독해서 State처럼 읽는다

다음 글에서는 7번에서 만든 to-do 앱 전체를 지금까지(상태 호이스팅 → ViewModel → StateFlow/UiState) 배운 구조로 다시 정리해서, 전체코드로 한 번에 묶어보겠다.