[Android] Jetpack Compose란?

 

안녕하세요 점냥입니다.

 

Jetpack Compose는 작년에 stable 버전이 나오기도 했고 최근 Android 개발자 사이에서 큰 화제입니다.

최신 Android Ui Tool Kit인 Compose는 기존 뷰를 그리는 방식과 비교해서 훨씬 더 적은 코드로 재사용성이 높은 UI를 구현할 수 있다고 설명하고 있는데요. 좀 더 자세히 이 부분을 살펴보면서 Compose를 사용하면 어떤 점이 좋은지에 대해 알아봅시다 :)

 

1) Only Kotlin

안드 입문하시는 분들이 당황하는 이유 중 하나가 XML 언어라고 생각합니다. XML은 속성과 태그로 이루어진 간단한 언어이긴 하지만 또 다른 언어를 배운다는 점에게 부담스러운 요소가 될 수 있습니다.

 

게다가 android에서는 Ui에 관련된 요소들이 대부분 xml로 관리되고 있습니다. 

예를 들어 가장 흔한 Activity, Fragment 등의 layout 부터, 글자들을 선언해두는 strings, 색상을 선언해두는 colors 등이 있습니다.

 

compose를 사용하게 되면 color, theme 등 모든 Ui 요소들 또한 Kotlin 언어로 관리할 수 있게 되어 어색하고 낯선 XML과 작별 인사를 할 수 있다가 첫번째 장점입니다 ㅎ

 

2) 선언형 UI? 

위에서도 잠깐 언급이 되었지만 Compose가 나오기 전, Android는 아주 오래된 UI System인 XML을 사용 중이었습니다. 
(Jetpack 등 비즈니스 로직, 퍼포먼스 부분 등은 꾸준히 발전했는데도 말이죠)

 

사실 Google도 이러한 점을 인지해서 ViewBinding, DataBinding 등의 Jetpack 라이브러리 등을 제공해주었지만 한계점이 존재했습니다. 그 이유는 XML을 사용한 UI 구현 방식이 명령형 UI 방식이었기 때문인 것 같습니다.

 

 

명령형 UI 방식은 보통 setter, getter가 존재합니다. 

코드에서 처럼 setTextColor로 개발자가 원하는 텍스트 컬러를 지정(명령)하고 특정 로직에서 뷰에서 텍스트를 가져오는(명령) 방식이죠.

이러한 방식에는 어떠한 문제점이 있었을 까요?

 

 

 

 

 

보통 사용자의 인터렉션 혹은 ViewModel의 비지니스 로직 등으로 인해 State를 가지게 되는데 명령형 방식은 UI 객체도 State를 가지고 있어야 합니다. 

 

예를 들어 api 요청 등을 했을 때 로딩 Progressbar를 동작시키고 싶을 때,

ViewModel에서 api 콜 함수를 호출하면 isLoading이라는 변수의 값이 true로 설정이 될 수 있습니다. ViewModel의 State가 Loading으로 설정이 되었네요.

 

하지만 XML로 선언된 혹은 명령형으로 구현된 UI에서는 화면 상으로는 아직 변화가 없습니다. 명령을 해줘야 해요!

progressbar.isVisible = true

이러한 State 동기화 과정은 뷰가 복잡하면 복잡할수록 실수도 잦아지게 되고 안 좋은 구조에서는 가독성도 떨어질 수 있죠.

그렇다면 선언형 UI는 어떤 형태일까요?

 

 

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) {
        Text (text = "Hello $name!")
    }
}

선언형 UI는 이런 겁니다.  primary color로 된 Surface가 있고 그 안에 Hello $name text를 가진 Text View가 있어

단순히 name이라는 String (state)를 받아 뷰를 구성, 선언하는 것이 끝입니다.

 

 

3) 적은 코드로 재사용성이 높은 UI 구현 가능.

XML로 오래 개발하다가 이 설명을 들으시는 분들은 극히 공감하는 부분일 수도 있습니다.

흔히 자주 사용하는 RecyclerView를 Compose 없이 구현했을 때 고려해야 할 부분이 너무 분산되어 있었습니다. Adatper부터 시작해서 item View, decoration 등등 간단한 리스트 구현에도 적지 않은 시간을 소요해야 했죠.

 

@Composable
private fun Greetings(names: List<String> = List(1000) { "$it" } ) {
    LazyColumn(modifier = Modifier.padding(vertical = 4.dp)) {
        items(items = names) { name ->
            Greeting(name = name)
        }
    }
}

Compose 코드에서는 저 5줄이 전부입니다. Adpater class와 RecyclerView 설정 등 여러 보일러 플레이트 코드들이 많이 사라졌죠.

(물론 현업에서 Compose 사용 시 여러 성능을 이끌어 내기 위해 좀 더 코드가 보완되어야 합니다)

 

 

forEach로 훨씬 간단하게 작성

비슷한 뷰들을 재 사용할때 Compose는 kotlin 문법을 통해 훨씬 직관적이고 효율적인 코드를 자랑합니다.

XML에서는 include를 이용해서 미리 정의해둔 XML을 재활용하는 형태이고 Compose에서는 kotlin의 forEach 문을 이용해서 뷰를 구현해주는 모습니다 :)

 

 

요약

아직도 컴포즈 시작 안했나요? :)