[Kotlin / Compose] LazyColumn

LazyColumn

• LazyColumn은 화면에 표시되는 항목만 렌더링하므로 대량의 데이터를 다룰 때 메모리 사용이 효율적이다. 사용자가 스크롤할 때마다 새로운 항목을 생성하고 이전 항목을 재활용하여 성능을 향상시킨다.
• items 매개변수를 사용하여 데이터 목록을 전달하고, 각 항목에 대한 UI를 정의하기 위해 Composable 함수를 사용한다.
• LazyColumn은 Compose의 상태 저장 및 복원 메커니즘과 함께 작동하기에 사용자가 앱을 나가고 다시 들어왔을 때 스크롤 위치 및 상태가 자동으로 복원된다.

✨ 요약하자면, LazyColumn은 대량의 데이터를 다룰 때 효율적이고 세로 스크롤 가능한 목록을 구현하는 데 사용되는 Compose 구성 요소이다.

@Composable
fun CatalogEx(itemList: List<ItemData>) {
    LazyColumn {
        items(itemList) {item ->
            Item(item)
        }
    }
}

LazyColumn을 만들 때 LazyColumnScope가 생성되고, 여기에서 items 함수를 사용할 수 있다.
items 함수를 사용하면 각 항목에 대한 LazyItemScope가 생성되는데, 이것은 각 항목에 대한 스코프를 의미한다.

• LazyColumnScope : LazyColumn을 만들 때 사용되는 스코프로, 여기에서 items 함수를 사용하여 각 항목을 정의할 수 있다.
• LazyItemScope : LazyColumn 안에서 각 항목을 렌더링할 때 사용되는 스코프로, 각 항목에 대한 UI를 정의하고 해당 항목의 위치 및 속성을 제어하는 데 사용된다.

@Composable
fun Item(itemData: ItemData) {
    Card(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 8.dp
        ),
        modifier = Modifier.padding(16.dp)
    ) {
        Column(
            modifier = Modifier.padding(8.dp)
        ) {
            Image(
                painter = painterResource(id = itemData.imageId),
                contentDescription = itemData.title
            )
            Spacer(
                modifier = Modifier.size(8.dp)
            )
            Text(
                text = itemData.title,
                style = MaterialTheme.typography.titleLarge
            )
            Spacer(
                modifier = Modifier.size(8.dp)
            )
            Text(text = itemData.description)
        }
    }
}

LazyColumn을 통해 세로 스크롤 가능한 목록으로 표시할 때, 각 아이템을 Card를 사용하여 나타내기

• Card : Material Design의 카드를 생성하며 그림자 효과와 패딩을 설정하여 시각적으로 구분한다.
• Column : 세로로 배치된 UI 요소의 그룹으로 이미지와 텍스트를 세로로 배치한다.

data class ItemData(
    @DrawableRes val imageId: Int,
    val title: String,
    val description: String,
)
val items = listOf(
    ItemData(
        imageId = R.drawable.a1,
        title = "해변 놀이 공원",
        description = "해변 놀이 공원 설명입니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
    ),
    ...
)

카탈로그 UI 화면