Android Jetpack Compose 이해하기

Android Jetpack Compose

안드로이드 컴포즈의 기본 원리는 선언형 UI와 상태 기반 프로그래밍입니다.

 

선언형 UI 🌟

Compose에서는 UI를 선언적으로 구성합니다.

즉, 화면을 어떻게 그릴지에 대한 명령을 작성하는 대신, 어떤 UI가 필요한지를 함수로 정의합니다.

이 방식은 코드의 가독성을 높이고, UI의 변경 사항을 쉽게 관리할 수 있게 합니다.

 

예를 들어, 버튼 클릭 시 상태가 변경되면, UI는 상태를 기반으로 자동으로 업데이트됩니다.

 

상태 기반 프로그래밍 📊

Compose는 상태(state)를 중심으로 작동합니다.

UI는 상태에 따라 다르게 렌더링 되며, 상태가 변경되면 UI가 자동으로 업데이트됩니다.

이를 통해 개발자는 UI와 상태 간의 관계를 명확히 이해할 수 있습니다.

 

예를 들어, 다음과 같이 상태를 관리하여 UI를 업데이트할 수 있습니다:

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

    Column {
        Text("현재 카운트: $count")
        Button(onClick = { count++ }) {
            Text("카운트 증가")
        }
    }
}

위 예제에서, count의 값이 변경될 때마다 UI가 자동으로 갱신됩니다.

 

Compose의 장점 🔎

- 가독성 향상

- 상태 관리 용이

- 재사용성

- 빠른 프로토타이핑

- 테스트 용이성

- 최적화된 성능

 

Composable이란? 🛠️

Composable은 UI 구성 요소를 정의하는 함수입니다.

이 함수는 UI를 선언적으로 생성하며, 재사용성과 가독성을 높여줍니다.

 

Composable 함수는 @Composable 어노테이션으로 표시됩니다.

예를 들어, 간단한 텍스트를 표시하는 Composable은 다음과 같습니다.

@Composable
fun Greeting(name: String) {
    Text(text = "안녕하세요, $name!")
}

위의 예제에서 Greeting 함수는 이름을 받아서 인사하는 텍스트를 생성합니다.

Compose의 힘은 이러한 Composable을 조합하여 복잡한 UI를 손쉽게 구성할 수 있다는 점입니다! 💪

 

열(Row)과 행(Column) 📏

Compose에서는 UI 요소를 수직 또는 수평으로 배치하기 위해 열(Row)과 행(Column)을 사용합니다.

이 두 가지는 레이아웃을 구성하는 기본적인 도구입니다.

 

열(Row) 🌈

열은 수평으로 아이템을 배치하는 컨테이너입니다.

여러 개의 Composable을 가로로 나열할 수 있습니다.

 

예를 들어, 두 개의 버튼을 수평으로 배치하려면 아래와 같이 작성할 수 있습니다.

@Composable
fun RowExample() {
    Row {
        Button(onClick = { /* Do something */ }) {
            Text("버튼 1")
        }
        Button(onClick = { /* Do something */ }) {
            Text("버튼 2")
        }
    }
}

 

행(Column) 📏

행은 수직으로 아이템을 배치하는 컨테이너입니다.

여러 Composable을 세로로 나열할 수 있습니다.

 

다음은 세 개의 텍스트를 수직으로 배치하는 예입니다.

@Composable
fun ColumnExample() {
    Column {
        Text("첫 번째 텍스트")
        Text("두 번째 텍스트")
        Text("세 번째 텍스트")
    }
}

 

결론 🎉

Jetpack Compose는 UI를 효율적으로 구성할 수 있는 강력한 도구입니다.

Composable을 이용해 재사용 가능한 UI를 만들고, 열과 행을 통해 손쉽게 레이아웃을 구성할 수 있습니다.