반응형
Jetpack Compose의 key() 함수는 컴포저블의 재구성을 최적화하고 상태를 유지하는 데 중요한 역할을 합니다. 특히, LazyColumn과 같은 리스트에서 아이템의 상태를 보존하고 불필요한 재구성을 방지하는 데 유용합니다. 이번 글에서는 key() 함수의 개념, 사용법, 그리고 실제 효과를 설명합니다.
1. key() 함수란?
key() 함수는 Jetpack Compose에서 특정 키 값을 기반으로 컴포저블의 상태를 유지하거나 초기화하는 역할을 합니다.
컴포저블이 재구성될 때, 키가 동일하면 기존 상태를 유지하고, 키가 변경되면 새로운 상태로 초기화됩니다.
key() 함수 시그니처
@Composable
public inline fun <T> key(
@Suppress(names = {"UNUSED_PARAMETER"}) vararg keys: Any?,
block: @Composable () -> T
): T
매개변수 설명
매개변수 설명
| keys | 상태를 유지할 기준이 되는 키 값(여러 개 가능) |
| block | key() 내부에서 실행될 컴포저블 블록 |
2. key() 함수의 효과
① 컴포저블의 상태 유지
- 키가 변경되지 않으면 기존 상태를 유지합니다.
- 키가 변경되면 새로운 상태가 생성됩니다.
② 리스트 아이템의 상태 보존
- LazyColumn에서 아이템의 위치가 변경되어도 상태를 유지할 수 있습니다.
③ 불필요한 재구성 방지
- 동일한 키를 가진 컴포저블은 재구성이 최소화되어 성능이 향상됩니다.
3. key() 함수 사용 예제
1️⃣ 키가 동일할 때 상태 유지
@Composable
fun CounterExample() {
var counter by remember { mutableStateOf(0) }
Column {
key(1) { // 키가 1로 고정 → 상태 유지됨
Button(onClick = { counter++ }) {
Text("Count: $counter")
}
}
}
}
✅ 결과: 버튼을 클릭해도 counter 값이 유지됩니다.
2️⃣ 키가 변경될 때 상태 초기화
@Composable
fun ChangingKeyExample(switch: Boolean) {
Column {
key(switch) { // switch 값이 변경되면 새로운 상태가 생성됨
var counter by remember { mutableStateOf(0) }
Button(onClick = { counter++ }) {
Text("Count: $counter")
}
}
}
}
✅ 결과: switch 값이 변경되면 counter가 초기화됩니다.
3️⃣ LazyColumn에서 리스트 아이템 상태 유지
@Composable
fun NameList(names: List<String>) {
LazyColumn {
items(names, key = { it }) { name -> // 아이템의 고유한 키를 설정
key(name) { // 동일한 키가 유지되면 상태도 유지됨
var expanded by remember { mutableStateOf(false) }
Text(
text = name,
modifier = Modifier
.fillMaxWidth()
.clickable { expanded = !expanded }
.background(if (expanded) Color.Gray else Color.White)
)
}
}
}
}
✅ 결과: 리스트에서 아이템이 이동해도 기존 상태(배경색 등)가 유지됩니다.
4. key() 함수가 필요한 이유
상황 key() 사용 효과
| 컴포저블의 상태 유지 | 키가 변경되지 않으면 기존 상태 유지 |
| 리스트 아이템 상태 유지 | 아이템의 이동이나 추가/삭제에도 상태 유지 |
| 불필요한 재구성 방지 | 성능 최적화 및 부드러운 UI 제공 |
5. key() 함수 사용 시 주의할 점
- 고유한 키를 설정해야 함
- 리스트에서 key()를 사용할 때는 **중복되지 않는 고유한 값(예: ID, UUID)**을 키로 사용해야 합니다.
- ❌ 잘못된 예시: key(position), key(index)
- ✅ 올바른 예시: key(item.id), key(item.name)
- 키가 불필요하게 변경되지 않도록 주의
- key()의 키가 불필요하게 변경되면 컴포저블이 다시 생성되어 성능이 저하될 수 있습니다.
6. 결론
- key()는 컴포저블의 상태를 유지하거나 초기화하는 기준을 설정하는 역할을 합니다.
- LazyColumn에서 아이템의 상태를 보존할 때 필수적으로 사용됩니다.
- 불필요한 재구성을 줄여 성능을 최적화하는 데 효과적입니다.
💡 리스트나 동적인 UI를 만들 때 key()를 적극 활용하면 Jetpack Compose의 성능을 향상시킬 수 있습니다!
반응형
반응형