🌀Jetpack Compose의 핵심, Recomposition

Jetpack Compose의 recomposition(재구성)은 Compose에서 가장 중요한 개념 중 하나입니다.
UI를 아주 똑똑하게 다시 그려주기 때문에 성능이 좋고, 선언형 UI를 구현할 수 있는 기반이 됩니다.

---

🤔 Recomposition이란?

@Composable 함수는 UI를 그리는 함수입니다.
그런데 앱을 사용하다 보면, 데이터가 바뀌는 경우가 많습니다.
이럴 때 UI도 같이 바뀌어야 자연스럽겠죠?

Compose에서는 값이 바뀌면 해당 컴포저블 함수를 다시 실행해서 UI를 자동으로 업데이트합니다.
이 과정을 바로 Recomposition이라고 합니다.

즉,

“입력값(State 등)이 바뀌면 해당 UI를 자동으로 다시 그려준다”

---

🔁 언제 Recomposition이 발생하나요?

Recomposition은 컴포저블 함수에 전달된 값이 변경되었을 때 자동으로 발생합니다.
주로 아래와 같은 경우에 일어납니다.

1. remember, mutableStateOf로 선언한 값이 바뀌었을 때
2. StateFlow, LiveData를 .collectAsState()로 구독 중일 때
3. 컴포저블의 파라미터가 변경되었을 때
4. derivedStateOf, snapshotFlow 등을 사용한 값이 변경되었을 때

---

🎯 예시로 쉽게 이해해보자

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

    Column {
        Text("Count: $count") // 이 부분이 recomposition 대상
        Button(onClick = { count++ }) {
            Text("Click me")
        }
    }
}

• 버튼을 클릭하면 count++로 값이 증가하면서, mutableStateOf가 Compose에게 “값이 바뀌었어!”라고 알려줍니다.
• 그러면 Compose는 Text("Count: $count")를 다시 실행해서 변경된 값을 반영한 UI를 그려줍니다.
• 기존 버튼은 그대로 유지되고, 텍스트 부분만 새로 그려집니다.
  → 필요한 부분만 업데이트되기 때문에 성능도 굿!

---

🧠 내부 작동 방식 (간단 요약)

1. mutableStateOf(...) 같은 상태 값은 내부적으로 Compose에게 변경을 감지시킵니다.
2. Compose는 어떤 컴포저블이 그 값을 읽었는지 추적합니다.
3. 해당 값이 바뀌면, 관련된 컴포저블만 다시 실행됩니다.
4. 이때 실제로 변경된 UI만 다시 그려주는 똑똑한 처리(diffing)가 이루집니다.

---

⚠️ 용어 정리

용어	설명
Composition	컴포저블이 처음 실행되어 UI를 그리는 과정
Recomposition	값이 바뀌어 해당 컴포저블을 다시 실행하는 과정
remember	recomposition 시 값을 기억하도록 해주는 키워드
derivedStateOf	다른 상태에 의존한 값을 추적할 때 사용
key	리스트나 반복된 UI에서 recomposition 범위를 제어할 수 있는 기준 값

---

✅ Recomposition을 줄이려면?

불필요한 재구성을 줄이면 앱이 훨씬 더 부드럽고 효율적으로 동작합니다.
Tips !

• remember를 적극 활용해 계산 비용이 큰 작업을 캐시한다.
• 상태를 가능한 작은 단위로 쪼개서 관리한다.
• UI 컴포저블을 잘게 나눠서 필요한 부분만 재구성되게 한다.
• LaunchedEffect, SideEffect 등 사이드 이펙트 관련 도구를 적절히 사용한다.

---

🔍 예: Recomposition 범위 최적화

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

    Column {
        Button(onClick = { count++ }) {
            Text("Increase")
        }
        Child() // 이 함수는 count와 무관하기 때문에 다시 실행되지 않음
        Text("Count: $count") // 이 부분만 다시 그려짐
    }
}

@Composable
fun Child() {
    Log.d("Recomp", "Child recomposed!") // 로그 안 찍힘
}

• count 값이 바뀌어도 Child()는 영향을 받지 않기 때문에, 불필요한 recomposition을 피할 수 있습니다.

---

🧵 마무리하며

Jetpack Compose의 Recomposition은 선언형 UI의 핵심이며,
효율적이고 직관적인 UI 개발을 가능하게 만들어줍니다.

“입력값이 바뀌면 관련된 부분만 다시 그린다.”
이 단순한 원칙이 Compose의 모든 동작을 이끌고 있습니다.

이를 이해하고 잘 활용하면, 성능도 잡고 유지보수도 쉬운 UI 코드를 작성할 수 있습니다 😎