Jetpack Compose 이해하기 (2장) - Jetpack Compose의 기본 개념과 Composable 함수

첫 장에서는 선언형 UI와 명령형 UI의 차이점에 대해 알아보았습니다.

이번 포스팅에서는 Jetpack Compose의 기본 개념과 핵심이 되는 Composable 함수에 대해 깊이 알아보겠습니다.

 

---

 

📌 Jetpack Compose란?

Jetpack Compose는 안드로이드에서 사용하는 선언형 UI 툴킷으로, 간결하고 직관적인 코드로 UI를 구축할 수 있게 합니다.

Compose를 이용하면 UI가 상태 변화에 따라 자동으로 갱신되어 유지보수가 쉽고 생산성이 높아집니다.

 

Compose는 다음과 같은 특징이 있습니다

• 코드로 UI를 작성하는 방식
• 상태(state) 기반의 자동 UI 갱신
• 간결하고 직관적인 코드 작성 가능
• 함수형 프로그래밍 패러다임 사용

 

---

 

📌 Composable 함수란?

Compose에서는 UI 요소를 간단하게 @Composable 어노테이션이 붙은 함수로 정의합니다.

이러한 함수들을 Composable이라고 부르며, Compose의 가장 중요한 개념 중 하나입니다.

🛠️ 간단한 Composable 함수 예시

@Composable
fun MyApp() {
    Greeting(name = "Compose")
}

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

결과적으로 화면에는 "Hello, Compose!"라는 텍스트가 표시됩니다.

🎯 Composable 함수의 특징

• 함수의 인자를 기반으로 UI를 생성
• 상태 변화 시 자동으로 재구성(recomposition)
• 순수 함수(pure function) 형태로 작성되어야 함

 

---

 

📌 Recomposition이란?

Compose에서는 상태가 바뀔 때 UI를 다시 그리는 과정을 재구성(Recomposition)이라고 합니다. 이는 Compose의 핵심 메커니즘이며, Composable 함수가 다시 호출되어 UI가 갱신됩니다.

 

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

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

 

이 코드에서 버튼을 클릭할 때마다 count 값이 증가하며, Compose는 상태의 변화를 감지하고 CounterComposable 함수를 다시 호출하여 최신 상태를 반영한 UI를 생성합니다. 즉, 상태 값이 변경될 때 Compose는 자동으로 필요한 Composable만을 재구성(recomposition)하여 UI를 업데이트하는 방식으로 효율적으로 동작합니다.

 

---

🎉 Composable의 장점

• 상태가 명확하게 드러나 코드의 가독성이 좋음
• 상태 변화에 따른 UI 업데이트가 자동화됨
• 유지보수 및 테스트 용이
• 코드 재사용성이 높음

이러한 장점 덕분에 Compose는 현대적인 안드로이드 앱 개발에 필수적인 요소로 자리 잡았습니다.

---

 

다음 장에서는 Compose의 상태 관리와 remember, mutableStateOf에 대해서 알아보겠습니다.