지난 세 글(상태 호이스팅 → ViewModel → StateFlow/UiState)을 거치면서 to-do 앱이 조금씩 바뀌었다. 이번 글은 새 개념은 없다. 지금까지 바뀐 걸 한곳에 모아서, 처음(7번 글)과 지금을 나란히 놓고 보자.

뭐가 달라졌나

• 7번: todoList가 TodoListScreen 안에 remember로 갇혀 있었다. 체크 상태는 LazyColumn 각 항목 안에 또 따로 remember로 있었다. 상세 화면은 id 숫자만 받고 아무것도 못 보여줬다.
• 지금: todoList는 TodoViewModel의 StateFlow<TodoUiState> 안에 있다. 목록 화면, 상세 화면 둘 다 같은 uiState를 구독해서 본다. 화면을 회전해도 데이터가 안 날아간다. 데이터를 바꾸는 길은 addTodo / toggleDone / deleteTodo 세 함수로만 좁혀져 있다.

컴포저블 쪽(TodoListScreen, TodoDetailScreen)은 8번 글에서 이미 "값 + 콜백만 받는 껍데기"로 만들어뒀기 때문에, 그 뒤로는 거의 안 바뀌었다. 상태를 어디에 두느냐만 remember → TodoApp의 remember → ViewModel의 StateFlow로 계속 옮겨 다닌 거다.

전체코드

package com.buyoungsil.todo_project

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.ViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.buyoungsil.todo_project.ui.theme.Todo_projectTheme
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow

data class Todo(
    val id: Int,
    val title: String,
    val isDone: Boolean = false
)

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 = "장보기"),
                Todo(id = 2, title = "운동하기"),
                Todo(id = 3, title = "책 읽기")
            )
        )
    )
    val uiState: StateFlow<TodoUiState> = _uiState.asStateFlow()

    fun addTodo(title: String) {
        if (title.isBlank()) return
        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 }
        )
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Todo_projectTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Box(modifier = Modifier.padding(innerPadding)) {
                        TodoApp()
                    }
                }
            }
        }
    }
}

@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() }
            )
        }
    }
}

@Composable
fun TodoListScreen(
    todoList: List<Todo>,
    onAdd: (String) -> Unit,
    onToggleDone: (Int) -> Unit,
    onDelete: (Int) -> Unit,
    onTodoClick: (Todo) -> Unit
) {
    var inputText by remember { mutableStateOf("") }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            TextField(
                value = inputText,
                onValueChange = { inputText = it },
                modifier = Modifier.weight(1f),
                placeholder = { Text("할 일 입력") }
            )
            Button(onClick = {
                onAdd(inputText)
                inputText = ""
            }) {
                Text("추가")
            }
        }

        Spacer(modifier = Modifier.height(8.dp))

        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(todoList, key = { it.id }) { todo ->
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 8.dp)
                        .clickable { onTodoClick(todo) },
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Checkbox(checked = todo.isDone, onCheckedChange = { onToggleDone(todo.id) })
                    Text(text = todo.title, modifier = Modifier.weight(1f))
                    IconButton(onClick = { onDelete(todo.id) }) {
                        Icon(imageVector = Icons.Default.Delete, contentDescription = "삭제")
                    }
                }
            }
        }
    }
}

@Composable
fun TodoDetailScreen(
    todo: Todo?,
    onToggleDone: (Int) -> Unit,
    onBack: () -> Unit
) {
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        if (todo == null) {
            Text("해당 할 일을 찾을 수 없다")
        } else {
            Text(text = todo.title, style = MaterialTheme.typography.titleLarge)

            Row(verticalAlignment = Alignment.CenterVertically) {
                Checkbox(checked = todo.isDone, onCheckedChange = { onToggleDone(todo.id) })
                Text(if (todo.isDone) "완료" else "미완료")
            }
        }

        Button(onClick = onBack) {
            Text("뒤로 가기")
        }
    }
}

[이미지: 완성된 to-do 앱 — 목록 화면에서 추가, 체크, 상세 진입까지 한 화면에 보이는 모습]

정리

• 상태를 어디에 두느냐(remember → 상위 컴포저블 → ViewModel)는 바뀌었지만, 화면을 그리는 TodoListScreen/TodoDetailScreen 코드는 처음 상태 호이스팅을 해둔 뒤로 거의 그대로였다
• 지금 버전은 화면 회전에도 데이터가 안 날아가고, 데이터를 바꾸는 길이 세 함수로 좁혀져 있고, 로딩 상태(isLoading)를 추가할 자리도 UiState에 이미 마련돼 있다
• 여기까지가 "컴포즈 화면 구조"의 기본 틀이다. 다음부터는 이 틀 안에 들어가는 데이터를 어디서 가져오는지를 다룬다

지금까지는 todoList가 앱을 실행할 때마다 코드 안의 고정값(장보기, 운동하기, 책 읽기)으로 다시 채워졌다. 앱을 껐다 켜도 할 일이 남아있게 하려면 디스크에 저장해야 한다. 다음 글부터는 Room으로 이 데이터를 실제 로컬 DB에 저장해보겠다.