Android 프레임워크 컴포즈(Compose)

컴포즈(Compose) 는 Android의 현대적 UI 툴킷으로, Kotlin으로 선언적 방식의 사용자 인터페이스를 구축하기 위한 프레임워크입니다.

---

🎯 컴포즈의 핵심 개념

"선언형 UI"란?

기존의 명령형 UI (XML + findViewById)와 완전히 다른 접근 방식:

// ✅ 컴포즈 (선언형)
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

// ❌ 기존 방식 (명령형)
// - XML 레이아웃 작성
// - findViewById로 뷰 찾기
// - setText()로 상태 변경

---

🚀 컴포즈의 주요 특징

1. 완전한 Kotlin 기반

• XML 레이아웃 불필요
• Kotlin DSL로 UI 작성

2. 선언적 프로그래밍

• "무엇을" 보여줄지만 정의
• "어떻게" 는 프레임워크가 처리

3. 상태 주도 UI

• 상태 변경 시 자동으로 UI 업데이트

4. 간결한 코드

• Boilerplate 코드 대폭 감소

---

📊 컴포즈 vs 전통적 XML UI

특성	Jetpack Compose	XML + View 시스템
언어	Kotlin 전용	XML + Kotlin/Java
방식	선언형	명령형
상태 관리	자동 리컴포지션	수동 업데이트
코드량	적음	많음
학습 곡선	가파름	완만함

---

🔧 컴포즈의 기본 구조

컴포저블 함수

@Composable
fun UserProfile(user: User) {
    Column {
        Text(
            text = user.name,
            color = Color.Blue,
            fontSize = 20.sp
        )
        Text(text = user.email)
        Button(
            onClick = { /* 클릭 동작 */ }
        ) {
            Text("Follow")
        }
    }
}

상태 관리

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

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

---

🛠 컴포즈의 구성 요소

1. 기본 레이아웃

• Column - 세로 배치
• Row - 가로 배치
• Box - 겹쳐 배치

2. UI 컴포넌트

• Text, Button, TextField
• Image, Card, Scaffold

3. 상태 관리

• mutableStateOf()
• remember
• ViewModel 통합

4. 애니메이션

• animateColorAsState()
• Transition 등

---

📱 실제 사용 예제

간단한 할일 앱

@Composable
fun TodoApp() {
    var todoText by remember { mutableStateOf("") }
    val todos = remember { mutableStateListOf<String>() }

    Column(Modifier.padding(16.dp)) {
        Row {
            TextField(
                value = todoText,
                onValueChange = { todoText = it },
                placeholder = { Text("할일 입력") }
            )
            Button(
                onClick = {
                    if (todoText.isNotBlank()) {
                        todos.add(todoText)
                        todoText = ""
                    }
                }
            ) {
                Text("추가")
            }
        }

        LazyColumn {
            items(todos) { todo ->
                Text(
                    text = todo,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(8.dp)
                )
            }
        }
    }
}

---

🔄 컴포즈의 동작 원리

리컴포지션(Recomposition)

• 상태 변경 시 해당 컴포저블만 자동 재실행
• 효율적인 UI 업데이트

@Composable
fun MyScreen() {
    var counter by remember { mutableStateOf(0) }

    // counter가 변경될 때만 Button 리컴포지션
    Button(onClick = { counter++ }) {
        Text("Clicked $counter times") // 이 Text만 업데이트
    }
}

---

✅ 컴포즈 장단점

장점:

• ⚡ 빠른 개발 속도
• 🎨 동적 UI 용이
• 🔧 유지보수성 향상
• 📱 더 적은 버그

단점:

• 📚 새로운 학습 필요
• 🔄 아직 진화 중
• 🛠 기존 코드와 통합 필요

---

🌟 요약

컴포즈는:

• ✅ Android UI 개발의 미래
• ✅ Kotlin 기반 선언형 프레임워크
• ✅ 상태 변화에 자동 반응
• ✅ 생산성 극대화

"XML과 findViewById의 시대는 끝났다!"라고 할 만큼 Android 개발 방식을 혁신적으로 변경한 기술입니다.

시작하시려면 Android Studio에서 새 Compose 프로젝트를 생성해 보세요! 🚀

명사: 기계적 인조 인간