Jetpack Compose는 안드로이드 앱을 작성하기 위한 모던한 툴킷으로, UI를 구성하는 데 사용되는 다양한 요소를 쉽게 작성할 수 있습니다. 이제 Jetpack Compose에서 UI를 만들고 구성하는 방법에 대해 자세히 알아보겠습니다.

1. Composable 함수 작성

Jetpack Compose에서 UI를 작성하는 핵심은 Composable 함수를 작성하는 것입니다. Composable 함수는 UI 구성 요소를 나타내며, @Composable 어노테이션을 사용하여 표시됩니다.

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

위의 예제에서 Greeting 함수는 이름을 받아 “Hello, [이름]!”을 표시하는 UI 구성 요소를 나타냅니다.

2. UI 구성 요소 조합

Composable 함수를 사용하여 다양한 UI 구성 요소를 조합할 수 있습니다. 예를 들어, Column과 Row을 사용하여 요소를 수직 또는 수평으로 배치할 수 있습니다.

@Composable
fun GreetingList(names: List<String>) {
    Column {
        names.forEach { name ->
            Greeting(name = name)
        }
    }
}

GreetingList 함수에서는 Column을 사용하여 여러 개의 Greeting 구성 요소를 수직으로 나란히 배치합니다.

3. 상태 유지

Jetpack Compose에서는 remember 함수를 사용하여 상태를 유지할 수 있습니다. 예를 들어, remember 함수를 사용하여 버튼 클릭 횟수를 추적할 수 있습니다.

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

    Button(onClick = { count++ }) {
        Text(text = "Clicked $count times")
    }
}

위의 예제에서 Counter 함수는 버튼 클릭 횟수를 추적하고 표시하는 UI 구성 요소를 나타냅니다.

Jetpack Compose를 사용하면 위와 같이 간단하고 직관적으로 UI를 작성할 수 있습니다.

이상으로 Jetpack Compose에서 UI 구성 요소를 작성하는 방법에 대해 알아보았습니다. 더 많은 정보는 공식 Jetpack Compose 문서를 참조하시기 바랍니다.