Jetpack Compose의 리컴포지션(Recomposition)

Jetpack Compose에서 리컴포지션(Recomposition)은 관찰 가능한 상태(state)가 변경될 때 UI를 업데이트하는 핵심 프로세스입니다. Compose의 반응형 프로그래밍 모델에서 가장 중심적인 역할을 담당하며, 컴포지션 생명주기의 핵심 메커니즘 중 하나이기도 합니다. 최초 컴포지션(initial composition)이 UI 트리를 처음 구성하는 과정이라면, 리컴포지션은 변경된 상태에 의존하는 컴포저블 함수만을 선택적으로 다시 실행하는 과정입니다. 덕분에 Compose는 전체 화면을 다시 그리지 않고도 필요한 부분만 효율적으로 업데이트할 수 있습니다. 면접에서 리컴포지션에 대한 질문은 Compose의 내부 동작 원리를 얼마나 깊이 이해하고 있는지를 평가하는 핵심 문항이므로, 단순히 "상태가 바뀌면 UI가 다시 그려진다" 수준이 아니라 구체적인 메커니즘까지 설명할 수 있어야 합니다.

이번 면접 질문을 통하여 아래 내용들을 학습하실 수 있습니다.

• Compose의 세 가지 렌더링 단계(Phase) 안에서 리컴포지션이 어떤 위치를 차지하는지 설명할 수 있습니다.
• 런타임이 상태 읽기를 추적하여 어떤 컴포저블을 다시 실행할지 결정하는 방식을 이해할 수 있습니다.
• 리컴포지션을 트리거하는 조건과 트리거하지 않는 조건을 구분할 수 있습니다.
• 리컴포지션 스코프(scope)가 재실행 범위에 미치는 영향을 파악할 수 있습니다.
• 불필요한 리컴포지션을 유발하는 대표적인 패턴을 식별할 수 있습니다.
• 디버깅 도구를 활용하여 리컴포지션 횟수를 측정하고 줄이는 방법을 익힐 수 있습니다.

Compose 렌더링 단계에서 리컴포지션의 위치

Jetpack Compose의 UI 렌더링은 크게 세 가지 단계로 구성됩니다.

1. Composition: 컴포저블 함수를 실행하여 UI 트리를 구성하는 단계입니다. 이 과정에서 UI 구조를 나타내는 LayoutNode 인스턴스 트리가 생성됩니다.
2. Layout: 각 노드를 측정(measure)하고, 부모의 제약 조건(constraints) 내에서 위치를 배정하는 단계입니다.
3. Drawing: 측정 및 배치가 완료된 노드를 기반으로 캔버스에 최종 픽셀을 렌더링하는 단계입니다.

리컴포지션은 UI 트리의 특정 부분에 대해 Composition 단계를 다시 실행하는 것에 해당합니다. 상태 변경으로 인해 리컴포지션이 트리거되면, 런타임은 영향을 받는 컴포저블 함수만 다시 실행하여 노드 트리를 갱신합니다. 이후 변경된 서브트리에 대해 Layout 단계와 Drawing 단계가 순차적으로 수행됩니다. 즉, 리컴포지션은 전체 UI를 처음부터 다시 구성하는 것이 아니라, 변경이 필요한 최소한의 범위만 효율적으로 재처리하는 메커니즘입니다.

런타임의 상태 읽기 추적 원리

Compose는 스냅샷 시스템(snapshot system)을 활용하여 컴포저블 함수 실행 도중 발생하는 상태 읽기를 추적합니다. 컴포저블이 MutableState 값을 읽으면, 런타임은 해당 상태에 접근한 컴포저블 스코프를 기록해 둡니다. 이후 상태 값이 변경되면, 런타임은 어떤 스코프를 다시 실행해야 하는지 정확하게 파악할 수 있습니다.

@Composable
fun Counter() {
    // mutableStateOf로 상태를 생성하고 remember로 리컴포지션 간 유지
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        // count 값이 변경되면 이 Text만 업데이트됨
        Text("Count: $count")
    }
}

위 예제에서 Counter 컴포저블은 count 상태를 읽습니다. 버튼을 클릭하여 count 값이 변경되면, 런타임은 Counter를 리컴포지션 대상으로 예약합니다. 재실행 과정에서 Text 컴포저블이 새로운 값을 전달받아 UI가 업데이트됩니다. 변경된 상태를 읽지 않는 다른 컴포저블은 완전히 건너뛰게 됩니다. 이처럼 Compose의 스냅샷 시스템은 상태 변경과 UI 업데이트 사이의 연결 고리 역할을 하며, 이를 통해 불필요한 재실행 없이 효율적인 UI 갱신이 가능해집니다.