💡 Jetpack Compose의 Composable은 언제, 어떻게 실행될까?

Jetpack Compose를 사용하다 보면 "어떤 컴포저블이 언제 다시 실행되는 걸까?"라는 궁금증이 들 때가 있습니다.
이 글에서는 Compose 내부의 작동 방식, 특히 컴파일러와 런타임의 역할, 그리고 Composition Phase가 어떤 식으로 UI 재구성에 관여하는지를 정리해보려 합니다.

---

🔍 1. 컴파일러는 Composable 함수의 실행 여부를 어떻게 결정할까?

정확히 말하면, Composable 함수가 다시 실행될지 말지는 컴파일러가 아닌 Compose Runtime이 결정합니다.
컴파일러는 @Composable 함수에 특별한 처리를 추가하고,
실제 실행 시점과 재구성(recomposition)은 Runtime이 composition 과정에서 상태 추적을 통해 관리합니다.

---

🧠 좀 더 자세히 살펴보면

Jetpack Compose는 Kotlin Compiler Plugin으로 작동합니다.
즉, @Composable이 붙은 함수는 컴파일 시점에 다음과 같은 트랜스폼(transform) 작업을 거칩니다.

예를 들어 아래 코드가 있다면:

@Composable
fun MyComposable() {
    val count by remember { mutableStateOf(0) }
    Text("Count: $count")
}

컴파일러는 이를 내부적으로 다음과 비슷한 형태로 변환합니다:

fun MyComposable($composer: Composer, $changed: Int) {
    val countState = remember($composer, ...)
    val count = countState.value

    Text($composer, "Count: $count")
}

countState.value가 읽히는 순간, Compose Runtime은
"이 컴포저블은 count에 의존한다"는 사실을 기록합니다.

그리고 나중에 count.value가 변경되면,
이 값을 읽었던 컴포저블만 다시 실행됩니다.

---

✅ 핵심 요약

주체	역할
Compose 컴파일러	@Composable 함수에 상태 추적 및 recomposition 트래킹용 코드 삽입
Compose Runtime	State가 읽히는 시점을 감지하고, 그 값을 참조한 컴포저블만 추후 다시 실행

---

🧩 2. Composition Phase란?

Composition Phase는 Composable 함수가 실제로 실행되는 시점이자,
UI 구조와 상태 의존성을 정의하는 "빌드 단계"입니다.

Compose는 하나의 UI 프레임이 그려지기까지 다음과 같은 단계를 거칩니다.

---

🔄 Compose의 내부 Lifecycle 요약

1. Composition Phase
   • @Composable 함수들이 실행됩니다.
   • 어떤 State를 읽었는지 추적합니다.
   • 어떤 UI를 구성할지 정의합니다.
2. Layout Phase
   • 컴포저블들이 반환한 UI 요소들의 크기, 위치를 측정합니다.
3. Draw Phase
   • 실제로 화면에 UI를 렌더링합니다.

---

📌 Composition Phase에서 하는 일

항목	설명
Composable 함수 실행	어떤 UI를 만들지 결정
State 의존성 추적	어떤 상태(State)를 읽는지 추적
Recomposition 조건 기록	상태가 바뀌면 어떤 컴포저블을 다시 실행할지 기억

---

🔁 Recomposition은 어떻게 일어날까?

State 값이 바뀌면, 그 값을 읽었던 컴포저블만 다시 실행됩니다.
이 때 다시 실행되는 과정을 "Recomposition"이라고 하며,
내부적으로는 다시 Composition Phase를 거치게 됩니다.

---

🎭 전체 흐름 비유: 무대와 배우

조금 더 쉽게 비유해보면,

• 컴파일러는 무대를 설치하는 스태프입니다.
  어떤 배우(Composable)가 어떤 소품(State)을 쓰는지 표시해 둡니다.
• Runtime은 연출가이자 무대감독입니다.
  소품이 바뀌면, 그 소품을 사용하는 배우만 다시 무대에 세웁니다.
  (이게 바로 Recomposition입니다!)

---

✅ 마무리 요약

Jetpack Compose의 핵심은 상태 기반 UI입니다.
하지만 이 상태 추적이 단순한 if-else 로직이 아니라,
컴파일러와 런타임이 협력하여 UI의 효율적인 업데이트를 가능하게 만들어준다는 점이 매우 인상적입니다.

이 흐름을 이해하고 나면, 불필요한 recomposition을 피하고 더 최적화된 Compose UI를 설계할 수 있게 될겁니다!