[Android] Jetpack Compose 리컴포지션 이해하기

선언형 UI이인 Jetpack Compose 핵심 개념 중 하나가 바로 리컴포지션(recomposition)에 대해서 알아보자❗️

리컴포지션은 UI 상태가 변경될 때 컴포저블 함수가 다시 호출되어 UI를 업데이트하는 과정이다.

💚 리컴포지션의 개념

리컴포지션은 Compose의 중요한 특징으로, UI 상태가 변경될 때 필요한 부분만 다시 그리는 과정을 말한다
즉, 전체 UI를 다시 렌더링하는 대신, 변경된 상태와 관련된 부분만 업데이트이를 하게 해준다. 이를 통해 UI 업데이트가 더 효율적이고 반응성 있게 이루어질 수 있다.

✔️ 예시

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

위의 Greeting 함수는 name 매개변수를 받아 텍스트를 표시한다.
만약 name 값이 변경되면 이 함수는 리컴포지션되어 새로운 name 값으로 UI를 다시 그리게 된다.

💚 리컴포지션 작동 원리

Compose는 상태(state)가 변경될 때 이를 감지하고, 해당 상태를 사용하는 모든 컴포저블 함수를 리컴포지션한다.
➡️ Compose에서 상태는 주로 remember와 mutableStateOf를 통해 관리

✔️ 예시

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

위의 Counter 컴포저블에서 count 상태가 변경될 때마다 Text와 Button이 포함된 Column이 리컴포지션된다.
이로 인해 화면에 표시된 카운트 값이 업데이트되게 된다.

💚 리컴포지션 최적화

리컴포지션은 효율적인 UI 업데이트를 가능하게 하지만, 불필요한 리컴포지션을 최소화하는 것이 중요🌟

1️⃣ key를 사용한 리컴포지션 제어: 리스트나 반복되는 UI 요소를 다룰 때 key를 사용하여 개별 항목의 리컴포지션을 제어

LazyColumn {
    items(items = listOfItems, key = { item -> item.id }) { item ->
        ListItem(item = item)
    }
}

2️⃣ Stability 보장: Compose는 안정적인(Stable) 객체만 리컴포지션에 최적화된다. ➡️ 데이터 클래스를 사용하거나 @Stable 어노테이션을 사용하여 객체의 안정성을 보장

@Stable
data class User(val name: String, val age: Int)

3️⃣ Compose의 리컴포지션 범위 조정: 컴포저블 함수의 크기를 작게 유지하고, 상태를 최소한의 필요한 범위로 유지하여 리컴포지션의 영향⬇️

@Composable
fun UserProfile(user: User) {
    UserImage(user.imageUrl)
    UserName(user.name)
}

---

리컴포지션은 Jetpack Compose의 핵심 개념으로, 효율적이고 반응성 있는 UI를 구축하는 데 중요한 역할을 한다. 리컴포지션의 작동 원리를 이해하고 최적화하는 방법을 통해 더 나은 사용자 경험을 제공할 수 있다.

🤖 더 자세한 내용은 공식문서를 참고해주세요:)