[Android] JetPack Compose 6 : ListView - 예제 Crane.MainContent

이석규·2023년 7월 21일

이번 포스팅에서는 [Android] JetPack Compose 5 : Layout - 예제 Crane.MainScreen에 이어서 리스트를 그리는 방식에 대해 알아보도록하자.

Crane.Main.Content에서 빈번하게 등장하는 리스트를 어떻게 구현할 것인지를 알아보도록하자.

지난번에 살펴본, 레이아웃 중 Column은 자식 Composable들을 수직으로 배치하는 레이아웃이다.

하지만 Column을 지난번처럼 사용하면, 두 가지 문제점이 생기게 된다.

문제점 1

: 스크롤 동작의 설정 없이 자식 Composable들을 넣어주면, 첫 화면 이후의 자식들이 짤리게 된다.
이는 스크롤 할 수 있도록 해주지 않았기 때문에, 하위 영역에 있는 것들을 그려줄 수 없다는 것을 의미한다. 그 이유는 Compose에서는 부모 뷰의 높이를 계산 후, 그릴 수 있는 자식들까지만 그리기 때문이다.

그렇기에 스크롤 설정이 필요하다.

문제점 2

: 스크롤 설정을 위해 Column의 Modifier에 스크롤 설정을 해주면, 리스트처럼 보이는 것이 가능하다.

@Composable
fun ArtistCard() {
	val scrollState = rememberScrollState()
    Column (
    	Modifier
        	.verticalScroll(scrollState)
    ){
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

이는 리스트가 잘 작동된다. 하지만 다음의 아이템 뷰의 개수가 지나치게 많다면, 이는 곧 메모리 릭을 유발할 수 있음을 의미한다. 뿐만 아니라 길어진 UI 스레드의 대기시간으로 인해 ANR이 발생할 수 있다.

그러면 리스트를 어떻게 만드나요?

현재 플로우는 이렇다.

리스트가 안 움직여요 > 스크롤 설정해줄게 > 아이템 뷰가 너무 많으면요? > ???

여기에 주목을 하자. 나는 이미 비슷한 상황을 경험한 적이 있다.(~~조치원 수호대에서..~~) 리스트가 너무 많으면 지금 보이는 것만 우선적으로 그리도록 해주면 된다.

그리고 별도의 페이징과 같은 처리 필요 없이 compose에는 이를 포함한 component가 있다.
보통은 사용하고자하는 component 앞에 Lazy를 붙여주면 된다.

LazyColumn(
        modifier = modifier
    ) {
        items(
            items = list,
            key = { task -> task.id }
        ) { task ->
            ListItem(
                taskName = task.label,
                checked = task.checked,
                onCheckedChange = { checked -> onCheckedTask(task, checked) },
                onClose = { onCloseTask(task) }
            )
        }
    }

LazyColumn을 기준으로 내부 아이템 뷰 설정을 하는 법을 알아보자.

#1 item

item은 LazyColumn 내부에 직접 composable을 넣고자 할 때 사용된다. 파라미터는 다음과 같다.

#2 items

items는 LazyColumn 내부에 composable을 반복적으로 넣고자 할 때 사용된다. 파라미터는 다음과 같다. 흡사 repeat() 함수와 같아보인다.

#3 itemsIndexed

itemsIndexed는 LazyColumn 내부에 composable을 custom 하게 넣고자 할 때 사용된다. 파라미터는 다음과 같다. items와 구성 파라미터는 같고, 차이점은 LazyColumn 단에서 Index를 따로 받을 수 있다는 것이다.