🌀Jetpack Compose, @Composable 동작 방식에 대하여

안녕하세요! 😊

이번 포스팅에서는 @Composable과 Jetpack Compose의 작동 방식에 대해 쉽게, 그리고 자세하게 정리해보려고 합니다.

• 기존 Android View 시스템과는 어떤 점이 다른지,
• @Composable이 어떻게 작동하는지,
• 내부에서 실제로 어떤 일이 벌어지는지까지

차근차근 알아보겠습니다.

---

📌 1. Jetpack Compose는 뭐가 다른가요?

기존 View 시스템

• TextView, Button과 같은 View 객체를 XML로 정의하고,
• Kotlin/Java 코드에서 findViewById()로 가져와 조작합니다.

➡️ 명령형 방식 (Imperative)

"이걸 만들고, 색을 바꾸고, 위치는 이렇게 설정해!"

---

Jetpack Compose 방식

• UI를 Kotlin 코드로 선언하고,
• 상태(State)를 기반으로 UI가 자동으로 업데이트됩니다.

➡️ 선언형 방식 (Declarative)

"이런 상태일 때는 이렇게 UI를 보여줘!"

---

🧠 2. @Composable이란?

@Composable은 “이 함수는 UI를 그리는 함수야” 라는 것을 컴파일러에게 알려주는 주석(annotation)입니다.

@Composable
fun Greeting(name: String) {
    Text("Hello, $name")
}

이처럼, Compose에서는 함수 하나가 UI의 구성 요소(컴포넌트)가 됩니다.
name 값이 변경되면 그에 따라 Text()도 자동으로 다시 그려집니다.

---

⚙️ 3. Compose는 어떻게 동작할까요?

컴포저블 함수 실행 과정

1. setContent {} 블록에서 컴포저블 함수 실행이 시작됩니다.
2. Compose는 내부적으로 어떤 UI를 구성해야 하는지를 분석합니다.
3. UI를 View 계층 없이 직접 렌더링합니다.
4. 상태(State)가 변경되면 필요한 부분만 자동으로 다시 구성(Recomposition)합니다.
5. 이 과정에서 성능 최적화도 함께 이뤄집니다.

---

🔄 4. Recomposition이란?

var count by remember { mutableStateOf(0) }

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

• count 값이 변경되면,
• Compose는 해당 UI를 다시 구성해야 한다고 판단하고,
• 해당 부분만 다시 실행해서 새로운 UI를 그려줍니다.

👉 전체 화면을 다시 그리는 것이 아니라, 변경된 부분만 똑똑하게 업데이트됩니다.

---

🧰 5. remember, State, 그리고 Recomposition의 관계

키워드	설명
remember	재구성될 때 값을 유지해줍니다. (로컬 캐시처럼 작동)
mutableStateOf	Compose에서 상태 변화를 감지할 수 있도록 만듭니다.
by remember { mutableStateOf() }	상태값을 선언하면서, 변경 시 재구성을 유도합니다.

var name by remember { mutableStateOf("world") }

Text("Hello, $name")

이 경우 name 값이 바뀌면 Text()가 자동으로 다시 실행되어 최신 UI로 업데이트됩니다.

---

🎯 6. 정리하자면…

기존 Android View 시스템	Jetpack Compose
XML + findViewById	Kotlin 코드로 UI 선언
상태 변경 → 수동 UI 업데이트	상태 변경 → 자동 Recomposition
ViewGroup로 UI 트리 구성	함수 호출로 UI 구성
명령형 방식	선언형 방식

---

👀 예제를 시각적으로 살펴보면?

@Composable
fun Screen() {
    var isLoggedIn by remember { mutableStateOf(false) }

    if (isLoggedIn) {
        Text("Welcome!")
    } else {
        Button(onClick = { isLoggedIn = true }) {
            Text("Login")
        }
    }
}

위 코드에서 isLoggedIn이 true로 바뀌면,
Button이 사라지고 Text("Welcome!")가 나타납니다.

📌 전체 UI를 다시 그리는 것이 아니라, 변화가 생긴 영역만 스마트하게 업데이트되죠.

---

여기까지 Jetpack Compose의 작동 방식과 @Composable, 상태, Recomposition의 관계를 간단히 정리해보았습니다.
도움이 되셨다면 좋겠습니다! 다음 글에서는 LazyColumn이나 Recomposition, Composition phase에 대해 더 알아보겠습니다!