[Compose] LazyColumn 성능을 위해

✅ LazyColumn이란?

- Compose에서 RecyclerView를 대체하는 스크롤 가능한 Composable
- 내부적으로 보이는 항목만 그림 (지연 로딩)
- 데이터가 많아질수록 Recomposition에 주의 

---

사용하면서 느낀 성능 관련 주의점

 

key 설정 필요

- Recomposition의 기준 설정

LazyColumn {
    items(list) { item ->
        Text(item.name)
    }
}

key를 설정하지 않으면 → Compose는 index를 기준으로 recomposition 설정 
만약, 리스트에서 요소가 삽입, 삭제되면 → 순서 바뀌면서 다시 그려짐 (☠️ 성능 낭비)

✅ 해결 방법:

LazyColumn {
    items(list, key = { it.id }) { item ->
        Text(item.name)
    }
}

key를 고유한 값으로 설정 -> 항목 자체의 고유 값으로 비교 → 순서가 바뀌어도 기존 UI를 재사용

 

---

 

LazyColumn안의 forEach는 Compose가 추적 불가능

 

-LazyColumn은 기본적으로 보이는 항목만 그려주는 지연 렌더링(Lazy Rendering) 구조

근데 forEach로 직접 Composable을 호출하면, Compose는 그걸 Lazy 항목으로 인식하지 않고 일반적인 Composable 호출로 처리 -> 즉 forEach 항목을 매번 새로 그림 -> Lazy가 의미가 없어짐

LazyColumn {
    // ❌ 이렇게 하면 LazyColumn의 역할이 의미 X
    list.forEach { item ->
        Text(item.name)
    }
}

 

✅ 해결 방법: items { } 사용

- 내부적으로 LazyListItem으로 관리 → 리스트 스크롤 시 화면에 보여야 할 항목만 렌더링

val userList = listOf(
    User("방", 33),
    User("케", 31),
    User("필", 31),
    User("돈", 29),
)

LazyColumn {
    items(userList, key = { it.name }) { user ->
        Text(
            text = "${user.name}, 나이: ${user.age}",
            modifier = Modifier.padding(16.dp)
        )
    }
}

 

항상 `items {}`를 쓰고, `key`를 설정하자 → 그래야 Compose가 항목을 재사용하고 성능이 떨어지지 않는다..!