Android 개발자를 위한 Jetpack Compose 튜토리얼

Jetpack Compose는 Android의 최신 UI 툴킷으로, 선언형(Declarative) 방식의 UI 개발을 지원합니다. 이번 튜토리얼에서는 Jetpack Compose의 개념과 기본 사용법을 배웁니다.

1. Jetpack Compose란?

Jetpack Compose는 Android UI를 보다 쉽고 효율적으로 개발할 수 있도록 설계된 Kotlin 기반의 선언형 UI 프레임워크입니다.

• XML 레이아웃 없이 Kotlin 코드로 UI 생성
• State 관리가 쉬운 데이터 중심 UI
• 직관적인 UI 빌딩 블록 제공

공식 문서: Jetpack Compose 공식 사이트

2. Jetpack Compose 프로젝트 설정

Jetpack Compose를 사용하려면 최신 Android Studio와 Gradle 설정이 필요합니다.

1) build.gradle 파일 수정

        dependencies {
            implementation("androidx.compose.ui:ui:1.3.0")
            implementation("androidx.compose.material:material:1.3.0")
            implementation("androidx.compose.ui:ui-tooling-preview:1.3.0")
        }
        

3. 기본 UI 구성

Jetpack Compose를 사용하여 간단한 "Hello World" 화면을 만들어 봅시다.

        import android.os.Bundle
        import androidx.activity.ComponentActivity
        import androidx.activity.compose.setContent
        import androidx.compose.material3.Text
        import androidx.compose.runtime.Composable
        import androidx.compose.ui.tooling.preview.Preview

        class MainActivity : ComponentActivity() {
            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                setContent {
                    Greeting("Jetpack Compose")
                }
            }
        }

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

        @Preview
        @Composable
        fun PreviewGreeting() {
            Greeting("Android Developer")
        }
        

4. 상태(State) 관리

Jetpack Compose에서는 상태 관리를 쉽게 처리할 수 있습니다.

        import androidx.compose.material3.*
        import androidx.compose.runtime.*
        import androidx.compose.ui.tooling.preview.Preview

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

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

        @Preview
        @Composable
        fun PreviewCounter() {
            CounterApp()
        }
        

5. Jetpack Compose의 장점

• XML 없이 UI 개발 가능: 선언형 UI를 사용하여 코드만으로 UI 구성
• 상태 관리 간소화: State를 활용한 효율적인 UI 업데이트
• 컴포저블 재사용: 모듈화된 UI 컴포넌트

6. 결론

Jetpack Compose는 Android 개발을 더욱 효율적으로 만들 수 있는 강력한 UI 툴킷입니다. 기존 XML 기반 UI 개발보다 간결한 코드로 유지보수가 쉬운 UI를 구성할 수 있습니다.