지난 글에서 Navigation Compose로 목록 화면과 상세 화면을 오갈 수 있게 만들었다. 이번엔 지금까지 배운 걸 다 모아서, 진짜로 쓸 수 있는 to-do 앱 하나를 완성해보자.

지금까지 만든 조각들

• State와 remember (할 일 하나의 완료 여부를 기억)
• rememberSaveable (화면 회전에도 입력값 유지 — 이번 글에서는 생략하고 다음에 다시 짚는다)
• Row / Column / Box, Modifier (화면 배치)
• LazyColumn + key (할 일 목록 스크롤)
• NavHost / NavController (목록 ↔ 상세 화면 전환)

이 조각들을 그대로 이어붙이면 된다.

목록 화면 - 추가, 삭제, 완료 체크, 상세로 이동까지

@Composable
fun TodoListScreen(onTodoClick: (Todo) -> Unit) {
    val todoList = remember {
        mutableStateListOf(
            Todo(id = 1, title = "장보기"),
            Todo(id = 2, title = "운동하기"),
            Todo(id = 3, title = "책 읽기")
        )
    }
    var inputText by remember { mutableStateOf("") }
    var nextId by remember { mutableStateOf(4) }

    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 = {
                if (inputText.isNotBlank()) {
                    todoList.add(Todo(id = nextId, title = inputText))
                    nextId += 1
                    inputText = ""
                }
            }) {
                Text("추가")
            }
        }

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

        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(todoList, key = { it.id }) { todo ->
                var isChecked by remember { mutableStateOf(false) }

                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 8.dp)
                        .clickable { onTodoClick(todo) },
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Checkbox(checked = isChecked, onCheckedChange = { isChecked = it })
                    Text(text = todo.title, modifier = Modifier.weight(1f))
                    IconButton(onClick = { todoList.remove(todo) }) {
                        Icon(imageVector = Icons.Default.Delete, contentDescription = "삭제")
                    }
                }
            }
        }
    }
}

[이미지: 할 일을 추가하고 하나는 체크, 하나는 그대로 둔 목록 화면]

입력창에서 추가하면 리스트 맨 아래 쌓이고, 체크박스로 완료 표시하고, 휴지통으로 지우고, 글자 부분을 누르면 상세 화면으로 넘어간다. 여기까지는 지난 글들에서 다 본 코드를 그대로 이어붙인 것뿐이다.

상세 화면을 열어보면

@Composable
fun TodoDetailScreen(todoId: Int?, navController: NavController) {
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        Text(text = "할 일 번호: $todoId")

        Button(onClick = { navController.popBackStack() }) {
            Text("뒤로 가기")
        }
    }
}

[이미지: 상세 화면에 번호만 떠 있는 모습]

항목을 눌러서 상세 화면으로 가봐도, 제목도 안 보이고 체크 상태도 안 보인다. 숫자(id)만 덩그러니 떠 있다.

왜 상세 화면은 내용을 못 보여줄까?

todoList가 TodoListScreen 함수 안에서 remember로 만들어졌기 때문이다. 이 리스트는 TodoListScreen이라는 함수 범위 안에만 존재하는 변수라서, 옆에 있는 TodoDetailScreen은 이 변수가 있다는 것 자체를 모른다. 받은 건 id 하나뿐이고, 그 id로 뭘 찾아봐야 할 "진짜 데이터"에 접근할 방법이 없는 거다.

체크박스도 마찬가지다. isChecked는 LazyColumn의 각 항목(items 람다) 안에서 remember로 만들어졌다. 이 값은 그 항목이 화면에 떠 있는 동안만, 그 자리에서만 의미가 있다. 상세 화면에서는 당연히 알 수가 없다.

지금 구조의 한계

목록 화면과 상세 화면이 "같은 할 일 데이터"를 같이 봐야 하는데, 지금은 데이터가 목록 화면 안에 갇혀 있어서 상세 화면이 접근할 방법이 없다. 이걸 풀려면 데이터를 "목록 화면 안"이 아니라 더 위, 두 화면이 공통으로 접근할 수 있는 곳에 둬야 한다.

이 문제를 "상태를 어디에 두느냐"의 문제라고 부르고, 다음 글에서 제대로 다룬다.

정리

• 지금까지 배운 State, 레이아웃, LazyColumn, Navigation을 합치면 추가·삭제·체크·화면 전환이 되는 to-do 앱이 완성된다
• 근데 목록 화면 안에 갇힌 remember 상태는 다른 화면에서 접근할 수 없다
• 상세 화면이 진짜 데이터를 보여주려면, 데이터를 화면 안이 아니라 두 화면이 공유할 수 있는 더 위쪽으로 옮겨야 한다

다음 글에서는 이 데이터를 상위로 끌어올리는 "상태 호이스팅"을 다루고, 상세 화면에서도 제목과 완료 여부를 보고 바꿀 수 있게 고쳐보겠다.

전체코드

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.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

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

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() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            TodoListScreen(
                onTodoClick = { todo -> navController.navigate("detail/${todo.id}") }
            )
        }
        composable("detail/{todoId}") { backStackEntry ->
            val todoId = backStackEntry.arguments?.getString("todoId")?.toIntOrNull()
            TodoDetailScreen(todoId = todoId, navController = navController)
        }
    }
}

@Composable
fun TodoListScreen(onTodoClick: (Todo) -> Unit) {
    val todoList = remember {
        mutableStateListOf(
            Todo(id = 1, title = "장보기"),
            Todo(id = 2, title = "운동하기"),
            Todo(id = 3, title = "책 읽기")
        )
    }
    var inputText by remember { mutableStateOf("") }
    var nextId by remember { mutableStateOf(4) }

    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 = {
                if (inputText.isNotBlank()) {
                    todoList.add(Todo(id = nextId, title = inputText))
                    nextId += 1
                    inputText = ""
                }
            }) {
                Text("추가")
            }
        }

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

        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(todoList, key = { it.id }) { todo ->
                var isChecked by remember { mutableStateOf(false) }

                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 8.dp)
                        .clickable { onTodoClick(todo) },
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Checkbox(checked = isChecked, onCheckedChange = { isChecked = it })
                    Text(text = todo.title, modifier = Modifier.weight(1f))
                    IconButton(onClick = { todoList.remove(todo) }) {
                        Icon(imageVector = Icons.Default.Delete, contentDescription = "삭제")
                    }
                }
            }
        }
    }
}

@Composable
fun TodoDetailScreen(todoId: Int?, navController: NavController) {
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        Text(text = "할 일 번호: $todoId")

        Button(onClick = { navController.popBackStack() }) {
            Text("뒤로 가기")
        }
    }
}