Composable 함수와 기본 UI 컴포넌트

안드로이드 UI 개발을 선언형 방식으로 새롭게 정의하고 있는 Jetpack Compose 시리즈, 그 두 번째 글에 오신 것을 환영한다.

지난 1편에서 Compose를 시작하기 위한 개발환경 세팅과 기초 개념을 살펴보았다면, 이번에는 Composable 함수의 구조와 기본 UI 컴포넌트 활용법을 중심으로 간단한 예제를 작성해보려고 한다.

---

1. Composable 함수란?

1.1 @Composable 어노테이션

Composable 함수는 Jetpack Compose에서 UI를 그리는 가장 작은 단위다.

• 함수 선언부에 @Composable 어노테이션을 붙이면, 해당 함수가 “UI를 선언하는 용도”로 사용됨을 Compose 컴파일러에게 알린다.

• Composable 함수는 데이터 상태(state)에 따라 UI를 자동으로 재구성(Recomposition)해준다.

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

여기서 Greeting은 텍스트를 하나 표시하는 역할을 가진 Composable 함수다. 

1.2 함수 구조와 특징

1. 반환값이 없다

• Composable 함수는 일반적으로 뷰 객체(View)를 직접 반환하지 않는다.

• UI를 그려주는 선언문 역할을 하기 때문에, UI를 화면에 붙이거나 제거하는 로직은 Compose 시스템이 관리한다.

2. 간단한 의존성 주입

• 함수를 호출할 때 인자를 넘기면, 해당 인자값이 변경될 때마다 UI가 자동으로 업데이트된다. (상태 관리와 함께 사용할 시 더욱 유용)

3. 함수 안에 다른 Composable 함수 포함

• 한 Composable 함수 안에 여러 개의 Composable 함수를 호출해 UI 요소들을 조합할 수 있다.

---

2. 기본 UI 컴포넌트 살펴보기

Jetpack Compose는 기존 안드로이드 View 시스템에서 자주 쓰이던 컴포넌트들을 Kotlin 함수 기반으로 제공한다.

이번 포스트에서는 주로 다음 다섯 가지를 다뤄본다.

1. Text
2. Button
3. Column
4. Row
5. Surface (또는 Box)

2.1 Text

화면에 문자열을 출력해주는 가장 단순한 컴포넌트다.

@Composable
fun SimpleText() {
    Text(text = "안녕하세요, Compose!")
}

• 속성으로 fontSize, color, fontWeight, modifier 등을 줄 수 있어, 다양한 텍스트 스타일을 표현할 수 있다.

• 예: Text(text = "Hello", fontSize = 16.sp, color = Color.Red)

2.2 Button

사용자의 클릭 이벤트를 처리하는 버튼 컴포넌트다.

@Composable
fun SimpleButton(onClickAction: () -> Unit) {
    Button(onClick = onClickAction) {
        Text("클릭")
    }
}

• onClick 람다를 통해 클릭 이벤트를 처리한다.

• 내부에 다른 Composable을 배치할 수도 있어, 단순 텍스트뿐 아니라 아이콘, 레이아웃 등을 자유롭게 구성 가능하다.

2.3 Column

수직 방향으로 Composable들을 배치한다.

@Composable
fun ColumnLayoutExample() {
    Column {
        Text("첫 번째 항목")
        Text("두 번째 항목")
    }
}

• Column 내부에 여러 개의 Composable 함수를 순서대로 호출하면, 위에서부터 아래로 쌓이는 구조가 된다.

• modifier를 사용해 정렬(alignment)이나 패딩(padding)을 조정할 수 있다.

2.4 Row

Column의 수평 버전이라고 볼 수 있다.

Composable들을 가로로 나란히 배치한다.

@Composable
fun RowLayoutExample() {
    Row {
        Text("왼쪽 요소")
        Text("오른쪽 요소")
    }
}

2.5 Surface & Box

Surface는 Material 테마에서 기본적으로 제공하는 배경이나 모양(Shape)을 적용할 수 있는 컨테이너다.

Box는 겹치는 UI를 표현하거나, 자식 요소를 Z축 방향으로 쌓아야 할 때 유용하다.

@Composable
fun SurfaceExample() {
    Surface(
        color = Color.LightGray,
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(
            text = "Surface 안에 있는 텍스트",
            modifier = Modifier.padding(16.dp)
        )
    }
}

---

마무리

• Composable 함수: UI를 선언하는 단위로, 한눈에 파악할 수 있을 만큼 간결하다.

• 기본 UI 컴포넌트: Text, Button, Column, Row, Surface 등 주요 요소가 다양하며, 조합하는 방식이 직관적이다.

• 선언형 UI 흐름: 데이터 중심의 개발 패러다임을 구현하기 쉽게 만든다.