Jetpack Compose 초보자 가이드

Jetpack Compose는 Android UI를 구축하는 데 사용할 수 있는 최신 선언적 UI 툴킷입니다.

 

기존의 XML 기반 UI보다 간결하고 강력하며, 코드를 사용하여 UI를 선언적으로 정의할 수 있습니다.

이번 가이드에서는 초보자를 위한 Jetpack Compose 학습의 첫걸음을 소개합니다.

 

아래는 Jetpack Compose의 주요 개념을 설명하고, 샘플 코드를 분석하며 학습할 포인트를 제공합니다.

 

 

---

1. Jetpack Compose의 기본 개념

선언적 UI란?

Jetpack Compose는 선언적 방식으로 UI를 작성합니다.

즉, UI의 상태(state)에 따라 UI를 선언적으로 정의합니다.

 

XML 기반 UI와는 달리, UI와 데이터가 동기화되도록 간결하게 코드를 작성할 수 있습니다.

 

예:

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

• @Composable: 이 함수가 Compose UI 요소임을 나타냅니다.
• Text: Compose에서 제공하는 텍스트 출력 위젯입니다.
• name: 함수 매개변수를 통해 동적으로 UI를 생성합니다.

---

2. 샘플 코드 분석

전체 코드 구조

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme

• import: Jetpack Compose에서 필요한 구성 요소와 도구를 가져옵니다.
• ComponentActivity: Compose에서 UI를 렌더링하기 위한 활동(Activity)입니다.

주요 구성 요소 설명

1) MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            GreetingCardTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

• setContent: XML 대신 Compose UI를 렌더링합니다.
• GreetingCardTheme: 테마 설정을 적용합니다.
• Scaffold: 앱의 기본 레이아웃 구조(툴바, 플로팅 버튼 등)를 제공합니다.
• Greeting: 사용자 정의 @Composable 함수로, 화면에 "Hello Android!"를 표시합니다.

2) Greeting 함수

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

• @Composable: 이 함수가 Compose의 UI 요소임을 나타냅니다.
• Text: Compose에서 제공하는 텍스트 출력 위젯입니다.
• modifier: UI 요소의 속성을 수정하거나 레이아웃을 조정하는 데 사용됩니다.

3) Preview 함수

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GreetingCardTheme {
        Greeting("Android")
    }
}

• @Preview: 디자인 프리뷰를 Android Studio에서 미리 볼 수 있게 합니다.
• showBackground = true: 미리보기에서 배경을 표시합니다.

---

3. Jetpack Compose 학습 포인트

1) @Composable 이해하기

• @Composable 함수는 UI를 정의하는 기본 단위입니다.
• 하나의 함수는 하나의 UI 요소를 나타냅니다. 함수 내부에서 다른 @Composable 함수를 호출할 수 있습니다.

2) Modifier 활용하기

• Modifier는 Compose에서 UI 요소의 크기, 배치, 스타일을 정의하는 데 사용됩니다.
• 예:
  • Modifier.fillMaxSize(): 화면 전체를 차지하도록 설정.
  • Modifier.padding(innerPadding): 여백 추가.

3) Scaffold 구조 이해하기

• Scaffold는 앱의 기본 UI 구조를 제공하는 컨테이너입니다.
• 툴바, 바텀 네비게이션, 플로팅 버튼 등을 쉽게 배치할 수 있습니다.

---

4. Jetpack Compose 사용 이유

1. 코드 간소화: XML 레이아웃과 Activity 코드 간의 복잡한 연결이 필요 없습니다.
2. 유연성: 상태 변화에 따라 UI를 동적으로 업데이트할 수 있습니다.
3. 생산성 향상: Android Studio에서 즉시 미리보기와 빠른 피드백을 받을 수 있습니다.

---

5. Jetpack Compose로 시작하기 위한 팁

1. 프로젝트 설정
   • 최신 Android Studio(Arctic Fox 이상)를 사용하세요.
   • Gradle에 Compose 종속성을 추가합니다:
   • buildFeatures { compose true } composeOptions { kotlinCompilerExtensionVersion = "1.x.x" }
2. 기본 UI 빌딩 블록 학습
   • Text, Button, Row, Column과 같은 기본 컴포넌트를 먼저 익히세요.
3. Compose Preview 활용
   • Android Studio의 @Preview 기능으로 코드를 실행하지 않고도 UI를 확인하세요.
4. 공식 문서 참고
   • Jetpack Compose 공식 문서에서 최신 정보를 얻으세요.