안드로이드 컴포즈 LazyColumn과 LazyRow 중첩 사용법: 최적화된 성능으로 스크롤 리스트 만들기

 

안드로이드 컴포즈에서 LazyColumn과 LazyRow는 각각 수직 및 수평 스크롤 리스트를 만들 때 유용한 컴포저블입니다. 하지만 때로는 이들을 중첩하여 사용해야 하는 경우가 있습니다. 이 글에서는 컴포즈에서 LazyColumn과 LazyRow를 중첩해서 사용하는 경우를 설명하고, 최적화 방법과 함께 실용적인 예시를 제공합니다.

 

1. 수평 및 수직 스크롤이 필요한 경우

중첩 사용 이유

LazyColumn과 LazyRow를 중첩해야 할 가장 일반적인 경우는 수평 및 수직 스크롤을 동시에 사용하는 경우입니다. 예를 들어, 수직으로 나열된 항목 안에 각 항목을 수평으로 나열하려면 LazyColumn 내에서 LazyRow를 사용해야 합니다.

@Composable
fun NestedLazyColumn() {
    LazyColumn {
        items(10) { index ->
            Text("Item $index")
            LazyRow {
                items(5) { rowIndex ->
                    Text("Row Item $rowIndex", modifier = Modifier.padding(8.dp))
                }
            }
        }
    }
}

 

2. 스크롤 성능 최적화

LazyListState 사용하여 성능 개선

스크롤 성능을 최적화하려면 LazyListState를 사용하여 각 리스트의 상태를 관리하는 것이 중요합니다. remember와 rememberLazyListState를 활용하여 리스트 상태를 기억하고, 재구성 시 성능을 향상시킬 수 있습니다.

@Composable
fun OptimizedNestedLazyColumn() {
    val lazyListState = rememberLazyListState()

    LazyColumn(state = lazyListState) {
        items(10) { index ->
            Text("Item $index")
            LazyRow {
                items(5) { rowIndex ->
                    Text("Row Item $rowIndex", modifier = Modifier.padding(8.dp))
                }
            }
        }
    }
}

 

3. 중첩된 리스트에 LazyListState 사용

독립적인 상태 관리

중첩된 LazyColumn과 LazyRow에서 각각의 스크롤 상태를 독립적으로 관리할 수 있습니다. 각 리스트에 개별적인 LazyListState를 할당하여, 서로 간섭 없이 스크롤 상태를 관리하는 방법입니다.

@Composable
fun IndependentStateLazyColumn() {
    val columnState = rememberLazyListState()
    val rowState = rememberLazyListState()

    LazyColumn(state = columnState) {
        items(10) { index ->
            Text("Item $index")
            LazyRow(state = rowState) {
                items(5) { rowIndex ->
                    Text("Row Item $rowIndex", modifier = Modifier.padding(8.dp))
                }
            }
        }
    }
}

 

결론

LazyColumn과 LazyRow의 중첩 사용은 복잡한 스크롤 패턴을 구현할 때 유용합니다. 성능을 최적화하려면 각 리스트에 LazyListState를 독립적으로 사용하고, remember를 통해 상태를 효율적으로 관리하세요. 

 

---