(Compose) Compose 소개

안드로이드 앱을 만들 때 UI를 어떻게 설계하고 구현할까? 가 가장 큰 고민입니다.

기존에는 TextView와 Button, ImageView와 같은 View를 XML에 정의하고, Kotlin에서 가져와 속성을 바꾸고 액션을 지정하며 화면을 만들었습니다.

이제는 더 쉽고, 현대적인 방법인 Compose를 사용해서 UI를 구현할 수 있습니다.

 

Jetpack Compose는 Google이 공식적으로 제공하는 선언형 UI 툴킷으로 최근 안드로이드 개발 표준으로 자리 잡고 있는 기술입니다.

Compose는 화면의 상태(state)에 따라 UI를 선언적으로 그려주는 프레임워크 라고 할 수 있습니다. 기존 View는 XML에 UI를 정의하고 Kotlin에서 findViewById()로 뷰를 가져와서 속성을 변경하고 액션을 지정했다면 Compose는 원하는 UI의 상태를 선언하기만 하면 Compose가 알아서 그려주는 형태입니다. 다시 말해서 UI를 어떻게 그릴 것인지 고민하는 게 아니라 무엇을 그릴 지를 고민하는 형태가 됐습니다.

 

예를 들면 버튼을 눌렀을 때 버튼의 숫자가 올라가는 UI를 만들어 봅시다.

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

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

Compose에서는 이렇게 Button과 Text를 선언하고 이것들이 어떻게 보일지 묘사하면 됩니다. count가 변경되면 UI도 알아서 업데이트됩니다. count가 변경되면서 UI를 직접 업데이트할 필요가 없습니다.

Compose는 어떻게 쓸까요?

Compose를 사용하기 위해 2가지를 알아야 합니다.

첫 번째로 @Composable 함수입니다.

@Composable 함수는 UI를 그리기 위한 가장 작은 단위입니다.

반환값이 없는 형태의 함수에 @Composable을 붙이면 UI를 그리기 위한 형태가 됩니다. 그리고 함수 안에 Text, Button, Column과 같은 컴포넌트를 사용해 화면을 구성합니다.

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

두 번째로 상태 관리입니다.

Compose는 화면의 상태가 바뀔 때마다 UI를 새로 그리도록 설계되어 있습니다.

remember나 mutableStateOf 같은 것을 사용해야 합니다.

var text by remember { mutableStateOf("Hello") }

Compose의 장점은 무엇일까요?

• Compose는 XML 없이 Kotlin 코드만으로 UI를 작성할 수 있습니다.
• 상태만 관리하면 UI가 자동으로 업데이트돼서 수동으로 업데이트했던 것보다 버그를 줄일 수 있습니다.
• XML과 Kotlin을 같이 관리하지 않고 Kotlin만 관리하면 되기 때문에 코드가 간결해지고 가독성이 높아집니다.
• @Composable 함수 단위로 UI를 구성할 수 있어 재사용성이 높습니다.
• @Preview를 사용해서 앱을 실행하지 않고 UI를 빠르게 확인할 수 있습니다.

마지막으로

Jetpack Compose는 단순히 새로운 UI 도구가 아니라, 안드로이드 개발 방식 자체를 바꾸는 도구입니다.

처음에는 낯설고 코드 스타일도 다르지만, 한 번 익숙해지면 빠른 개발 속도와 유지보수 편리함 때문에 절대 예전으로 돌아가기 어렵다는 말이 나올 정도로 강력합니다.

 

---

블로그 글에 대해 궁금한 점이 있다면 아래 카카오톡 오픈채팅에 들어와서 질문해주세요

Android Kotlin Compose QnA