지난 글에서 목록 화면과 상세 화면이 "같은 데이터"를 같이 봐야 하는데, 데이터가 목록 화면 안에 remember로 갇혀 있어서 상세 화면이 접근을 못 하는 문제를 봤다. 이번엔 이걸 제대로 풀어보자.

데이터를 더 위로 올리면 된다

지금까지 todoList를 TodoListScreen 함수 안에 뒀다. 이걸 TodoListScreen을 호출하는 쪽, 즉 TodoApp으로 옮겨보자.

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

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            TodoListScreen(
                todoList = todoList,
                onAdd = { title -> todoList.add(Todo(id = todoList.size + 1, title = title)) },
                onToggleDone = { id ->
                    val index = todoList.indexOfFirst { it.id == id }
                    if (index != -1) {
                        todoList[index] = todoList[index].copy(isDone = !todoList[index].isDone)
                    }
                },
                onDelete = { id -> todoList.removeAll { it.id == id } },
                onTodoClick = { todo -> navController.navigate("detail/${todo.id}") }
            )
        }
        composable("detail/{todoId}") { backStackEntry ->
            val todoId = backStackEntry.arguments?.getString("todoId")?.toIntOrNull()
            val todo = todoList.find { it.id == todoId }
            TodoDetailScreen(
                todo = todo,
                onToggleDone = { id ->
                    val index = todoList.indexOfFirst { it.id == id }
                    if (index != -1) {
                        todoList[index] = todoList[index].copy(isDone = !todoList[index].isDone)
                    }
                },
                onBack = { navController.popBackStack() }
            )
        }
    }
}

todoList가 이제 TodoApp에 있으니까, "list" route도 "detail/{todoId}" route도 둘 다 같은 todoList를 보고 있다. 상세 화면에서 todoList.find { it.id == todoId }로 찾으면, 목록 화면에서 추가·삭제·체크한 바로 그 데이터를 그대로 가져올 수 있다.

TodoListScreen은 더 이상 자기 데이터를 갖지 않는다

@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 = {
                if (inputText.isNotBlank()) {
                    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 = "삭제")
                    }
                }
            }
        }
    }
}

[이미지: 목록 화면에서 체크하고, 상세 화면으로 들어가도 같은 항목이 체크된 채로 보이는 화면]

눈여겨볼 부분이 있다. 체크박스가 var isChecked by remember { ... }를 쓰던 걸 걷어내고, checked = todo.isDone으로 바뀌었다. 체크 여부를 Checkbox가 직접 기억하는 게 아니라, todoList에 있는 Todo.isDone 값을 그대로 보여주기만 한다. 체크박스를 누르면 onToggleDone(todo.id)를 호출해서 "바꿔달라"고 위로 요청만 하고, 실제로 값을 바꾸는 건 TodoApp이 한다.

이 패턴을 상태 호이스팅(State Hoisting)이라고 부른다. 컴포저블이 상태를 직접 갖지 않고, 상태값과 "바꿔달라"는 콜백을 파라미터로 받아서 그대로 보여주기만 하는 거다. 사실 TextField도 똑같은 구조다: value를 받아서 보여주고, 사용자가 타이핑하면 그 값을 직접 바꾸는 게 아니라 onValueChange로 "이렇게 바꿔달라"고 알려주기만 한다.

상세 화면도 이제 진짜 데이터를 보여줄 수 있다

@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("뒤로 가기")
        }
    }
}

todo를 파라미터로 그대로 받으니까, 목록 화면에서 입력한 제목과 체크 상태가 상세 화면에도 그대로 보인다. 상세 화면에서 체크박스를 눌러도 onToggleDone을 통해 TodoApp의 todoList가 바뀌니까, 뒤로 가기를 누르면 목록 화면에도 바뀐 상태가 반영돼 있다.

왜 굳이 이렇게 귀찮게 만드나?

TodoListScreen이나 TodoDetailScreen이 직접 todoList를 갖고 있었다면 더 짧게 쓸 수 있었을 거다. 근데 그러면 지난 글에서 본 것처럼, 그 데이터는 그 컴포저블 안에만 갇혀서 다른 화면이 볼 수 없다. 상태를 위로 올려서 "여러 곳에서 같이 봐야 하는 데이터는 그걸 같이 보는 화면들의 공통 조상에 둔다"는 원칙을 지키면, 화면이 몇 개로 늘어나도 데이터는 하나만 존재하게 된다.

정리

• 여러 화면이 같이 봐야 하는 데이터는, 그 화면들을 감싸는 상위 컴포저블로 끌어올린다 (상태 호이스팅)
• 상태를 호이스팅한 컴포저블은 value와 onValueChange 같은 콜백만 받는 "껍데기"가 된다
• TextField가 쓰는 value + onValueChange 구조가 바로 이 패턴이다

근데 이것도 한계가 있다

todoList가 이제 TodoApp에 있지만, 여전히 컴포저블 함수 안의 remember다. 화면을 회전하면 TodoApp도 다시 실행되는데, mutableStateListOf로 만든 리스트는 rememberSaveable로 바로 저장할 수 있는 형태가 아니라서, 지금 코드 그대로는 화면 회전에 데이터가 날아간다. 그리고 "할 일을 추가/삭제/토글하는 로직"이 전부 UI를 그리는 컴포저블 함수 안에 뒤섞여 있어서, 화면과 로직을 분리하기도 어렵다.

다음 글에서는 이 데이터와 로직을 컴포저블 밖, ViewModel로 옮겨서 이 두 문제를 같이 해결해보겠다.