Android(Kotlin), Jetpack Compose의 대용량 데이터 출력하기 (LazyColumn)

0. 개요

Column을 사용하여 UI를 구현하여 대량의 데이터를 표시할 경우 성능 문제가 발생할 수 있다. 왜나하면 모든 데이터 아이템에 대해 해당 컴포저블이메모리에 생성되기 때문입니다.

1. 해결

1) LazyColumn 사용

• 예시(시간별로 비율을 보여주는 리스트)

	@Composable
    fun ExampleList(data: List<Entity>) {
        data.sortedByDescending { it.time }
        LazyColumn {
            items(data) { rate ->
                Row(
                    modifier = Modifier.fillMaxWidth().background(Color.White).padding(8.dp),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(text = rate.date, fontSize = 20.sp, modifier = Modifier.weight(1f))
                    Text(text = rate.time, fontSize = 20.sp, textAlign = TextAlign.Center, modifier = Modifier.weight(1f))
                    Text(text = "${rate.rate}", fontSize = 20.sp, textAlign = TextAlign.End, modifier = Modifier.weight(1f))

                }
                Spacer(modifier = Modifier.height(1.dp).background(Color.LightGray)) // 구분선 추가
            }
        }
    }

2) LazyColumn의 이점

• '지연로딩' 또는 "뷰 재활용" 방식을 사용하여 보이는 아이템들만 사용하고, 스크롤을 통해 화면 밖으로 나가는 아이템들을 메모리에서 해제
• 이로 인해 성능이 크게 향상된다.

2. 대용량 데이터 표시를위한 Composable 아이템 종류

1) LazyColumn: 세로방향

2) LazyRow: 가로방향

3) LazyVerticalGrid and LazyHorizontalGrid:

• 특정 버전만 지원
• 그리드 형태로 아이템을 표시
• 똑같이 지연 로딩 방식을 사용

3. 결론

• LazyColumn, LazyRow 등의 요소를 사용하여 메모리를 아낄 수 있다.
• 그리고 스크롤이 가능해진다.