[Android/Compose] Recomposition: 상태 변화에 따른 UI 갱신

 

Jetpack Compose를 사용하면서 기존 방식과 다르게 LiveData.observe() 같은 코드도 없고, notifyDataSetChanged()를 호출하지 않았는데도 UI가 알아서 갱신되는 것이 신기하게 느껴졌습니다.

"LiveData도 사용하지 않았는데, 왜 상태가 변하면 UI가 자동으로 업데이트되지?"라는 궁금증이 들었습니다.

기존 XML 기반의 View 시스템에서는 명시적인 호출이 필요했지만, Compose에서는 mutableStateOf만으로 UI가 알아서 갱신됩니다. 이는 Recomposition(재구성) 덕분입니다.

이번 글에서는 공부한 내용을 바탕으로 Compose의 Recomposition이 무엇인지, 그리고 어떻게 동작하는지를 정리 해 보겠습니다.

---

Recomposition이란?

Recomposition(재구성) 은 Jetpack Compose에서 상태(State)가 변경될 때, 변경된 부분만 다시 렌더링하는 과정을 말합니다.
즉, Compose는 전체 화면을 다시 그리는 것이 아니라, 변경된 상태를 사용하는 Composable 함수들만 다시 실행합니다.

Recomposition의 핵심 원칙

1. Recomposition은 필요한 부분만 다시 그립니다.
   •    상태가 변경되면 Compose는 변경된 부분을 찾아서 다시 실행합니다.
   •    모든 Composable이 다시 그려지는 것이 아니라, 영향을 받는 Composable만 재구성됩니다.
2. Recomposition은 상태(State)에 의해 트리거됩니다.
   •    mutableStateOf, StateFlow, LiveData 등 Compose에서 감지할 수 있는 상태(State) 가 변경될 때 UI가 갱신됩니다.
3. Recomposition은 최적화되어 있습니다.
   •    Compose는 내부적으로 스마트한 비교(Structural Equality) 를 수행하여 불필요한 재구성을 최소화합니다.

---

예제 코드: Recomposition이 동작하는 방식

처음에는 상태가 변경될 때 UI가 알아서 업데이트되는 것이 신기하여, 직접 테스트해 보았습니다. 간단한 주사위 굴리기 앱을 만들어서 Recomposition을 확인해 보겠습니다.

@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(
        modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.Center)
    )
}

@Composable
fun DiceWithButtonAndImage(
    modifier: Modifier = Modifier,
) {
    var result by remember { mutableIntStateOf(1) }  // 상태를 저장하는 코드

    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(painter = painterResource(imageResource), contentDescription = result.toString())
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {  // 버튼 클릭 시 상태 변경
            Text(stringResource(R.string.roll))
        }
    }
}

이 코드에서 Recomposition이 발생하는 부분

• result 값이 변경될 때 Compose가 이를 감지하고 해당 Composable을 다시 실행합니다.
• 버튼을 클릭하면 result 값이 바뀌고, Image가 새로운 주사위 그림으로 변경됩니다.
• 하지만, Column과 Button 자체는 그대로 유지되며, Image만 변경된 값에 맞게 다시 그려집니다.

---

결론

Jetpack Compose에서는 LiveData.observe() 없이도 상태가 변경될 때 UI가 자동으로 업데이트되는 것이 처음에는 신기했습니다. 하지만 Compose는 Recomposition을 통해 변경된 부분만 다시 렌더링하는 방식으로 동작하기 때문에, 기존 방식과는 다르게 명시적인 UI 갱신 코드가 필요하지 않다는 점을 알게 되었습니다.

• Recomposition이란?
  → 상태가 변경될 때 변경된 부분만 다시 그리는 과정
• 어떻게 동작하는가?
  → mutableStateOf 등의 상태 객체가 변경되면 Compose가 자동으로 UI를 업데이트

---

참고: https://developer.android.com/develop/ui/compose/mental-model#recomposition 

Compose 이해  |  Jetpack Compose  |  Android Developers