지난 글에서 Row, Column, Box로 배치하는 법을 봤다. 이번엔 이걸로 진짜 할 일 목록을 만들어보자.

먼저 할 일 하나를 표현할 데이터부터 정의하자.

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

id를 왜 따로 두는지는 뒤에서 나온다. 지금은 그냥 "각 할 일을 구분할 고유 번호"라고만 알아두자.

Column으로 먼저 만들어보면

@Composable
fun TodoScreenWithColumn(todoList: List<Todo>) {
    Column(modifier = Modifier.fillMaxSize()) {
        todoList.forEach { todo ->
            Text(text = todo.title, modifier = Modifier.padding(16.dp))
        }
    }
}

할 일이 5개, 10개 정도면 이래도 잘 돌아간다. 근데 100개, 1000개로 늘리게 되면 과부하가 발생한다.

버벅인다. 왜 그러냐면 Column은 안에 든 걸 화면에 보이든 안 보이든 전부 다 만들어버리기 때문이다. 화면 밖에 있어서 안 보이는 990개까지 다 그려놓고 메모리에 들고 있는 거다. 항목이 많아질수록 이 낭비가 커진다.

LazyColumn - 보이는 것만 그린다

@Composable
fun TodoScreenWithLazyColumn(todoList: List<Todo>) {
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(todoList) { todo ->
            Text(text = todo.title, modifier = Modifier.padding(16.dp))
        }
    }
}

LazyColumn은 이름 그대로 게으르게(lazy) 그린다. 화면에 실제로 보이는 항목만 만들어두고, 스크롤해서 새 항목이 보일 때가 돼서야 그때 만든다. 스크롤 밖으로 나간 항목은 다시 없애버린다. 그래서 항목이 아무리 많아도 성능이 크게 떨어지지 않는다.

items(todoList)는 리스트를 하나씩 꺼내서 안의 람다를 반복 실행해주는 함수다. forEach랑 비슷한 느낌인데, 얘는 "화면에 보일 때만" 실행된다는 게 다르다.

이제 직접 만들어보자 - 추가/삭제되는 진짜 할 일 목록

여기까지는 고정된 리스트를 보여주기만 했다. 실제로 쓰려면 추가하고 지울 수 있어야 한다. 지난 글에서 배운 remember랑 mutableStateOf를 여기 그대로 적용하면 된다. 다만 이번엔 값 하나가 아니라 리스트 자체가 바뀌어야 하니까 mutableStateListOf를 쓴다.

@Composable
fun TodoScreen() {
    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("추가")
            }
        }

        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(todoList) { todo ->
                Row(
                    modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(text = todo.title, modifier = Modifier.weight(1f))
                    IconButton(onClick = { todoList.remove(todo) }) {
                        Icon(imageVector = Icons.Default.Delete, contentDescription = "삭제")
                    }
                }
            }
        }
    }
}

mutableStateListOf는 mutableStateOf랑 원리가 똑같다. 다만 값 하나가 아니라 리스트 전체를 컴포즈가 감시할 수 있게 해준다. .add()나 .remove()로 리스트를 건드리면, 컴포즈는 그걸 감지하고 LazyColumn을 다시 그린다.

여기까지 코드를 todo_project에 그대로 붙여넣고 실행해보면, 입력창에 텍스트를 쓰고 추가 버튼을 누르면 목록에 쌓이고, 휴지통 아이콘을 누르면 지워지는 게 될 거다. 여기까지 직접 만들어보고 다음으로 넘어가자.

여기에 체크박스를 붙여보자

완료 여부를 토글하는 체크박스를 각 항목에 달아봤다.

items(todoList) { todo ->
    var isChecked by remember { mutableStateOf(false) }

    Row(verticalAlignment = Alignment.CenterVertically) {
        Checkbox(checked = isChecked, onCheckedChange = { isChecked = it })
        Text(todo.title)
    }
}

체크박스 몇 개 눌러보고, 그 상태에서 리스트 맨 위 항목을 하나 삭제해보자.

체크했던 게 엉뚱한 항목으로 옮겨간다. 분명 3번째 항목을 체크했는데, 삭제하고 나면 2번째 항목이 체크된 걸로 보인다.

왜 이런 일이 생길까?

items(todoList)는 기본적으로 각 항목을 "몇 번째 자리인지"로 구분한다. remember가 값을 기억하는 것도 "이 함수가 리컴포지션 될 때, 같은 자리에 있으면 같은 걸로 본다"는 원리였잖아. 근데 리스트는 항목이 생겼다 없어졌다 하니까, "이 항목"이 아니라 "이 위치"를 기준으로 remember가 값을 붙잡고 있는 거다.

그래서 맨 앞 항목을 삭제하면, 원래 2번째 자리였던 항목이 1번째 자리로 밀려 올라오는데, remember 입장에서는 "어 1번째 자리 값은 그대로 있네"라면서 원래 1번째 자리에 있던 체크 상태를 그대로 물려준다. 항목은 바뀌었는데 자리는 안 바뀌었으니 상태가 엉뚱한 곳에 눌어붙는 거다.

key로 "위치"가 아니라 "항목 자체"를 구분해주자

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

    Row(verticalAlignment = Alignment.CenterVertically) {
        Checkbox(checked = isChecked, onCheckedChange = { isChecked = it })
        Text(todo.title)
    }
}

key를 넘겨주면 컴포즈는 더 이상 "몇 번째 자리냐"가 아니라 "이 todo.id를 가진 항목이냐"로 구분한다. 그래서 항목이 삭제되거나 순서가 바뀌어도, 각 항목이 갖고 있던 remember 상태가 그 항목을 그대로 따라간다. id는 꼭 중복 없이 각 항목마다 고유해야 한다. 아까 Todo 데이터 클래스에 id를 넣어둔 이유가 이거다.

체크 상태까지 데이터에 포함시키고 싶으면, isDone을 Todo 자체에 두고 리스트를 갱신하는 방식으로 바꿀 수도 있는데, 그건 상태를 어디에 둘지(상태 호이스팅)를 다루는 다음 단계 글에서 이어가겠다.

정리

• Column은 안 보이는 것까지 다 그리고, LazyColumn은 보이는 것만 그린다
• items()는 forEach처럼 반복하되, 화면에 보일 때만 실행된다
• 리스트 자체가 바뀌어야 하면 mutableStateOf 대신 mutableStateListOf를 쓴다
• key를 안 주면 리컴포지션이 "위치" 기준으로 상태를 기억해서, 삭제/순서변경 시 엉뚱한 항목에 상태가 붙는다

다음 글에서는 이 리스트에서 항목을 눌렀을 때 상세 화면으로 넘어가는 Navigation Compose를 다뤄보겠다.

전체코드

kotlin

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.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 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)) {
                        TodoScreen()
                    }
                }
            }
        }
    }
}

@Composable
fun TodoScreen() {
    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 = { todo -> todo.id }) { todo ->
                var isChecked by remember { mutableStateOf(false) }

                Row(
                    modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp),
                    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 = "삭제")
                    }
                }
            }
        }
    }
}