지난 글에서 LazyColumn으로 할 일 목록을 만들었다. 근데 항목을 눌러도 아무 일도 안 일어난다. 항목을 누르면 그 할 일의 상세 화면으로 넘어가게 만들어보자.

컴포즈에는 원래 "화면"이라는 개념이 없다

지금까지 만든 건 전부 하나의 컴포저블 트리 안에 있었다. Navigation Compose가 하는 일은, 여러 컴포저블 중 하나를 골라서 "지금 이게 화면에 떠 있는 화면이다"라고 표시해주고, 그 표시를 바꿔가면서 화면이 전환된 것처럼 보이게 하는 거다.

이걸 담당하는 게 NavController랑 NavHost다.

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

NavController는 "지금 어떤 화면이 떠 있는지"를 기억하고 이동시키는 역할이다. NavHost는 "route 문자열"과 "그 route일 때 보여줄 컴포저블"을 짝지어놓은 표라고 보면 된다. startDestination = "list"는 앱이 처음 켜지면 "list" route를 보여주라는 뜻이다.

composable("list") { ... }가 하나의 화면을 등록하는 거다. route 이름은 그냥 문자열이라 아무거나 지어도 되는데, 보통 화면 역할을 알 수 있게 짓는다.

[이미지: 목록 화면(TodoListScreen)이 떠 있는 상태]

항목을 누르면 상세 화면으로

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

    LazyColumn {
        items(todoList, key = { it.id }) { todo ->
            Text(
                text = todo.title,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .clickable { onTodoClick(todo) }
            )
        }
    }
}

onTodoClick(todo)가 호출되면, 이걸 받은 TodoApp에서 navController.navigate("detail/${todo.id}")가 실행된다. route 문자열에 todo.id를 끼워 넣어서 "몇 번 할 일의 상세로 가라"고 말해주는 거다.

근데 왜 todo 객체 전체가 아니라 id만 넘길까?

navigate()로 넘길 수 있는 건 기본적으로 문자열(숫자 포함)뿐이다. Todo 객체 자체를 통째로 넘기려면 직렬화(문자열로 변환)하는 별도 작업이 필요해서 번거롭기도 하고, 더 중요한 이유가 있다.

상세 화면에서 그 할 일을 수정하고 다시 목록으로 돌아왔다고 해보자. 만약 상세 화면에 넘겼던 게 "그 시점의 todo 객체 복사본"이었다면, 목록에 있는 진짜 데이터는 수정됐는데 상세 화면이 들고 있던 복사본은 예전 값 그대로다. 화면마다 서로 다른 버전의 데이터를 들고 있게 되는 거다.

id만 넘기고, 상세 화면에서 그 id로 "진짜 데이터 저장소"에서 다시 조회하게 만들면 이런 문제가 안 생긴다. 항상 최신 데이터 하나만 있고, 화면들은 그걸 가리키는 열쇠(id)만 주고받는 셈이다.

상세 화면

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

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

[이미지: 상세 화면(TodoDetailScreen)이 떠 있는 상태, 뒤로 가기 버튼이 보이는 화면]

navController.popBackStack()이 뒤로 가기다. NavController는 지나온 화면들을 스택(쌓아놓은 더미)으로 관리하는데, popBackStack()은 이 스택에서 지금 화면을 빼고 바로 아래 있던 화면으로 돌아가라는 뜻이다. 안드로이드 기기의 뒤로 가기 버튼도 내부적으로 똑같은 동작을 한다.

지금은 todoId만 받아서 화면에 숫자만 띄우고 있는데, 실제로는 이 id로 목록에서 해당 Todo를 찾아서 제목이나 완료 여부를 보여주면 된다. 근데 그러려면 TodoListScreen이 들고 있는 todoList를 TodoDetailScreen에서도 같이 봐야 하는데, 지금 구조로는 TodoListScreen 안에 remember로 갇혀 있어서 접근이 안 된다. 이 "여러 화면이 같은 데이터를 봐야 하는 문제"는 상태를 어디에 두느냐(상태 호이스팅)의 문제라서, 다음 단계에서 제대로 다루겠다.

정리

• 컴포즈에 "화면"이라는 고정 개념은 없고, NavHost가 route별로 어떤 컴포저블을 보여줄지 정해준다
• NavController.navigate("route")로 이동하고, popBackStack()으로 뒤로 간다
• 화면 간에는 객체를 통째로 넘기지 않고 id처럼 조회에 필요한 값만 넘긴다. 그래야 화면마다 데이터가 따로 놀지 않는다

다음 글에서는 지금까지 만든 목록 화면 + 상세 화면 + 추가/삭제를 하나로 합쳐서 진짜 동작하는 to-do 앱을 완성해보겠다.

전체코드

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.material3.*
import androidx.compose.runtime.*
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 = "책 읽기")
        )
    }

    LazyColumn {
        items(todoList, key = { it.id }) { todo ->
            Text(
                text = todo.title,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .clickable { onTodoClick(todo) }
            )
        }
    }
}

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

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