지난 글에서 todoList를 TodoApp으로 끌어올려서 두 화면이 같은 데이터를 보게 만들었다. 근데 끝에 말했던 것처럼 두 가지가 남아있다. 화면을 회전하면 데이터가 날아가고, 로직이 UI 코드랑 뒤섞여 있다.

화면을 회전해보면

@Composable
fun TodoApp() {
    val todoList = remember {
        mutableStateListOf(
            Todo(id = 1, title = "장보기"),
            Todo(id = 2, title = "운동하기"),
            Todo(id = 3, title = "책 읽기")
        )
    }
    // ...
}

[이미지: 할 일을 몇 개 추가한 뒤 화면을 회전해서, 추가했던 항목이 사라지고 초기 3개만 남은 모습]

추가했던 할 일이 다 사라지고 처음 3개만 남는다. rememberSaveable을 쓰면 되지 않나 싶겠지만, rememberSaveable은 Int, String처럼 단순한 값이나 Parcelable 정도만 바로 저장할 수 있고, Todo를 담은 리스트 같은 건 저장 방법(Saver)을 따로 만들어줘야 한다. 번거롭다.

ViewModel - 액티비티가 다시 만들어져도 살아남는 객체

안드로이드에는 이 문제를 위해 원래부터 있던 도구가 있다. ViewModel이다.

class TodoViewModel : ViewModel() {
    val todoList = mutableStateListOf(
        Todo(id = 1, title = "장보기"),
        Todo(id = 2, title = "운동하기"),
        Todo(id = 3, title = "책 읽기")
    )
    private var nextId = 4

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

    fun toggleDone(id: Int) {
        val index = todoList.indexOfFirst { it.id == id }
        if (index != -1) {
            todoList[index] = todoList[index].copy(isDone = !todoList[index].isDone)
        }
    }

    fun deleteTodo(id: Int) {
        todoList.removeAll { it.id == id }
    }
}

ViewModel은 컴포저블이 아니라 그냥 평범한 클래스다. 대신 ViewModel()을 상속받으면, 안드로이드 시스템이 이 객체를 화면 회전 같은 구성 변경에도 따로 보관해준다. 액티비티는 통째로 파괴되고 새로 만들어지지만, 그 액티비티에 연결된 ViewModel은 메모리에 그대로 살아있다가 새로 만들어진 화면에 다시 연결된다.

컴포저블에서 ViewModel 쓰기

import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun TodoApp(viewModel: TodoViewModel = viewModel()) {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            TodoListScreen(
                todoList = viewModel.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 = viewModel.todoList.find { it.id == todoId }
            TodoDetailScreen(
                todo = todo,
                onToggleDone = viewModel::toggleDone,
                onBack = { navController.popBackStack() }
            )
        }
    }
}

[이미지: 할 일을 추가한 뒤 화면을 회전해도 추가했던 항목이 그대로 남아있는 모습]

viewModel()은 androidx.lifecycle.viewmodel.compose 패키지에서 제공하는 함수다. 호출하면 이 컴포저블이 속한 액티비티(또는 네비게이션 목적지) 범위에 묶인 TodoViewModel 인스턴스를 돌려준다. 화면 회전으로 TodoApp이 다시 실행돼도 viewModel()은 새 인스턴스를 만들지 않고 아까 그 인스턴스를 그대로 돌려준다. 그래서 todoList도 그대로 유지된다.

TodoListScreen과 TodoDetailScreen 쪽 코드는 지난 글과 거의 똑같다. 바뀐 건 todoList와 콜백들이 이제 TodoApp의 remember 대신 viewModel에서 나온다는 것뿐이다. onAdd = viewModel::addTodo처럼 함수 참조로 바로 넘길 수 있어서 코드도 오히려 짧아졌다.

지난 글의 상태 호이스팅이 헛수고였나?

아니다. 오히려 그 덕분에 지금 바뀐 게 적다. TodoListScreen, TodoDetailScreen은 애초에 자기 데이터를 안 갖고 "값 + 콜백"만 받는 구조였어서, 그 값과 콜백이 어디서 왔는지(remember였는지 ViewModel이었는지)는 이 컴포저블들 입장에서는 전혀 상관이 없다. 상태를 어디에 둘지 바꿔도 화면 쪽 코드는 그대로 쓸 수 있다는 게 상태 호이스팅의 요점이었다.

정리

• remember는 컴포저블이 화면에 떠 있는 동안만, ViewModel은 화면(액티비티)이 다시 만들어져도 데이터를 지켜준다
• viewModel()을 호출하면 같은 범위 안에서는 항상 같은 인스턴스를 돌려받는다
• 데이터와 그걸 바꾸는 로직(addTodo, toggleDone, deleteTodo)을 ViewModel에 모아두면, 컴포저블은 "보여주고 요청만 하는" 역할로 가벼워진다

근데 아직 남은 문제

지금 todoList는 mutableStateListOf라서 바깥에서도 viewModel.todoList.add(...)처럼 직접 건드릴 수 있다. ViewModel을 쓰는 이유 중 하나가 "데이터를 바꾸는 방법을 addTodo, toggleDone 같은 함수로만 제한하고 싶다"는 거였는데, 지금은 그 제한이 완전하지 않다. 또 로딩 중이거나 에러가 난 상태처럼 "지금 화면이 어떤 상태인지"를 표현할 방법도 아직 없다.

다음 글에서는 StateFlow와 UI 상태(UiState)를 써서 이 부분을 정리해보겠다.