[Android] Jetpack Compose의 Recomposition 정리

1. Recomposition(리컴포지션)이란?

Recomposition(리컴포지션)은 Jetpack Compose에서 상태(State)의 변경에 따라 필요한 UI만 다시 그리는 과정을 의미한다.

기존 XML 기반 View 시스템에서는 findViewById()를 통해 특정 View를 직접 변경했지만, Compose는 선언형(Declarative) 방식을 사용하여 상태 값이 변경되면 해당하는 UI 요소만 다시 렌더링(Recompose)한다.

즉, Recomposition은 상태 기반 UI 업데이트의 핵심 개념이며, 이를 이해하면 불필요한 UI 업데이트를 방지하고 성능을 최적화할 수 있다.

 

2. Recomposition이 발생하는 원리

1) Composable 함수와 상태(State)

Composable 함수는 컴포넌트의 상태를 기반으로 UI를 그리는 역할을 한다. 상태가 변경되면 Compose는 자동으로 UI를 다시 렌더링하는데, 이 과정이 Recomposition이다.

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

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

2) Recomposition 발생 과정

1. count의 초기 값은 0이며, Text()를 통해 UI에 표시된다.
2. 사용자가 버튼을 클릭하면 count++가 실행되어 count의 값이 1로 변경된다.
3. Compose는 count의 변경을 감지하고, 필요한 UI 요소만 다시 렌더링(Recompose)한다.
   • Column과 Button은 변경되지 않았으므로, 재구성되지 않는다.
   • Text("Count: $count")만 다시 그려진다.

이처럼 Recomposition은 UI 전체를 다시 그리는 것이 아니라, 변경된 요소만 다시 렌더링하는 최적화된 방식이다.

 

3. Recomposition 최적화 방법

Recomposition이 불필요하게 자주 발생하면 성능 저하가 발생할 수 있다. 이를 방지하는 최적화 방법을 살펴보자.

1) remember로 상태 유지

remember를 사용하면 Recomposition이 발생해도 값이 다시 초기화되지 않고 유지된다.

@Composable
fun RememberExample() {
    val message = remember { "Hello, Compose!" }

    Text(message)
}

• remember를 사용하면 message 값이 Recomposition이 발생해도 변경되지 않고 유지된다.

2) derivedStateOf로 연산 최적화

derivedStateOf를 사용하면 불필요한 계산을 방지할 수 있다.

@Composable
fun DerivedStateExample(count: Int) {
    val isEven by remember { derivedStateOf { count % 2 == 0 } }

    Text(if (isEven) "Even" else "Odd")
}

• count가 변경될 때만 isEven이 다시 계산되므로 불필요한 Recomposition을 줄일 수 있다.

3) key를 활용한 리스트 최적화

리스트 UI에서 LazyColumn을 사용할 때 key를 지정하면 불필요한 Recomposition을 줄일 수 있다.

@Composable
fun ItemList(items: List<String>) {
    LazyColumn {
        items(items, key = { it }) { item ->
            Text(item)
        }
    }
}

• key를 설정하면 항목이 추가/삭제될 때 불필요한 UI 변경을 방지할 수 있다.

 

4. Recomposition 디버깅 방법

Recomposition이 불필요하게 자주 발생하는 경우, 다음과 같은 방법으로 디버깅할 수 있다.

1) Log를 활용한 디버깅

@Composable
fun LoggingExample() {
    Log.d("Recomposition", "LoggingExample Recompose!")
    Text("Hello, Compose!")
}

• 이 코드를 실행하면 Recomposition이 발생할 때마다 로그가 출력되므로, 특정 Composable 함수가 몇 번이나 다시 호출되는지 확인할 수 있다.

2) SideEffect를 활용한 디버깅

@Composable
fun SideEffectExample() {
    SideEffect {
        Log.d("Recomposition", "SideEffectExample recomposed!")
    }

    Text("Hello, Compose!")
}

• SideEffect는 Recomposition이 발생할 때마다 호출되므로, 이를 활용해 UI가 다시 그려지는지 추적할 수 있다.

3) Layout Inspector 사용

1. Android Studio 실행 후 앱을 실행한다.
2. Tools > Layout Inspector를 선택한다.
3. Live Updates 옵션을 활성화하면 Recomposition이 발생할 때마다 UI가 어떻게 변경되는지 실시간으로 확인 가능하다.

4) Compose Tracing 사용

1. Android Studio에서 Settings > Experimental > Enable Compose Tracing 활성화
2. Profiler를 실행하고, Recomposition 이벤트를 추적할 수 있다.

 

5. Recomposition을 이해해야 하는 이유

1. 불필요한 UI 업데이트를 방지하여 성능을 최적화할 수 있다.
2. Composable 함수를 더 효율적으로 설계할 수 있다.
3. 상태 기반 UI를 이해하고 관리할 수 있다.
4. 애니메이션, 리스트, UI 갱신 등에서 불필요한 렌더링을 줄여 앱의 반응성을 향상시킬 수 있다.

 

6. 결론

Jetpack Compose의 Recomposition은 상태(State) 변경 시 필요한 부분만 다시 렌더링하여 성능을 최적화하는 핵심 개념이다. Recomposition이 너무 자주 발생하면 성능이 저하될 수 있으므로 remember, derivedStateOf, key 등을 활용해 불필요한 연산을 줄이는 것이 중요하다.

Recomposition을 깊이 이해하고 활용하면, 더 최적화된 Compose UI를 개발할 수 있다