[Android] Jetpack Compose? true!

컴포즈를 향한 나의 끝없는 구애(?)는 작년부터 계속 되었다.

비록 실무에서는 아직 적용해볼 기회가 없었지만...

틈날때마다 씹고 뜯고 맛보려고 노력했다는 얘기다.

그 흔적들을 하나씩 기록해보려고 하는데,

첫번째는 지난해 진행했던 집단지성의 방의 첫번째 컨퍼런스인 '집단지성의 날' 에서

발표했던 Jetpack Compose 의 자료이다.

집단지성의 날에 관한 건 아래를 참고하면 된다.

집단지성의 방 : 컨퍼런스 개최한 후기

 

그리고 첫번째로 Jetpack Compose를 살펴보았던 겉핥기 흔적(?)은 여기를 참고하면 된다.

Android Jetpack Compose 맛보기

 

Jetpack Compose가 무엇일까?

네이티브 UI를 빌드하기 위한 Android의 최신 도구 키트

라고 공식문서에서는 설명하고 있다.

 

최신 도구 키트? 그렇다면 이전에는 어떻게 UI를 구성했을까?

기존에는 네이티브 UI를 구성하기 위해서 xml로 그림을 그리고

해당 xml을 inflate하는 방식이었다.

*inflate (in Android) : xml에 선언된 레이아웃을 메모리에 띄운 후 객체화 시키는 것

 

Compose는 기존의 방식과 달리 선언적 UI 방식을 채택하고 있다.

선언적 UI 방식

프로그래밍 패러다임 중 하나인

선언형(함수형) 프로그래밍을 생각해보자.

이와 함께 많이 비교되는 것이 우리가 흔히 아는 명령형 프로그래밍이라고 할 수 있는데

위의 선언적 UI 방식에 대해 이해하기 위해서 잠깐 짚고 넘어가볼 것이다.

 

이 둘의 차이를 쉽게 설명하자면

명령형 → How
선언형 → What

이라고 말할 수 있다.

 

예를 들어 주어진 수들 중 가장 큰 수를 찾아야 한다면

명령형 방식은 큰 수를 어떻게 찾을 것인지 설명한다.

var max = 0;
val arr = arrayOf(3, 5, 7)
for (i in arr) {
    if (max < i){
        max = i
    }
}
println(max)

 

선언형 방식은 max() 메소드를 통해 최대값을 찾아낸다.

어떤 결과를 원하는 지를 설명한다.

val arr = arrayOf(3, 5, 7)
val max = arr.max()
println(max)

그렇다면 선언적 UI 방식이라는 것은

어떤 UI를 생성할 것인지를 설명하는 것일까?

 

앞서 말한 기존의 방식을 생각해보자.

기존의 방식은 view를 어떻게 나타낼 지를 설명한다.

⇒ 명령형 UI 프로그래밍

view.setTextColor(getColor(R.color.purple_500))
layout.addView(view)

 

반면 compose는 View가 무엇인지 (상태)를 설명한다.

Text(color = Purple500)

더 자세한 것은 나머지 내용을 살펴보면서 알아보도록 하자.

 

Jetpack Compose는 왜 등장하게 되었을까?

확장 및 유지보수의 어려움

@2022년 8월 28일 기준 31245줄

안드로이드 위젯의 부모 클래스인 View.java 코드는 3만줄이 넘었다.

좋지 않은 사용성

Spinner는 기본 위젯으로 제공되지만 디자인과 사용성이 나빠서 대부분 사용하지 않는다.

(실제로 컨트롤하기가 정말 까다로웠던 기억이 있다…

화면 진입시 자동으로 셀렉트 리스너 타는것부터 개빡치는 포인트)

 

Button은 View가 아닌 TextView를 확장했기 때문에

텍스트가 선택되는 웃기는 상황이 생기기도 한다.

public class Button extends TextView {

출처 : https://www.charlezz.com/?p=44782

재사용 어려움

이건 개인적으로 느낀점인데

include, merge 등 재사용을 위한 여러가지 방법이 있긴하지만

우리가 알던 리액트의 스타일 컴포넌트 느낌의 쌈빡한 재사용성을 기대하기는 어려웠다(고 할까)

그리고 화면에 나타내야할 데이터가 많아질수록 레이아웃 또한 복잡해지고

또 그에따라 느린 렌더링(버벅거림) 문제에 직면할 수도 있다.

(물론 커스텀뷰를 이용하는 방법도 있지만 글쎄....🤔)

레이아웃이 잘못 구현되면 UI가 느려지므로 애플리케이션의 메모리가 부족해질 수 있습니다.

하지만 Jetpack Compose에 대해 살펴보면서 재사용성의 용이함을 기대할 수 있었다.

정말인지 직접 만들면서 확인해보도록 하자.

Compose가 기존의 xml 방식 보다 정말 좋을까?

Compose를 사용하는 방법

해당 자료는 22년 8월 기준이므로 현재와 다를 수 있습니다.

신규 프로젝트

기존 프로젝트에 compose 적용하기

compose Activity를 생성하려고 하면 자동으로 compose를 사용할 준비를 마쳐준다.

build.gradle(Project)

buildscript {
    ext {
        compose_version = '1.1.0-beta01'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.

build.gradle(:app)

android {
	...
	buildFeatures {
	      compose true
	  }
	  composeOptions {
	      kotlinCompilerExtensionVersion compose_version
	  }
}

dependencies {
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.5.1'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.2.0'
    // Animations
    implementation 'androidx.compose.animation:animation:1.2.0'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.2.0'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.2.0'


    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.2.0'
}

Compose와 기존의 xml의 방식을 비교해보자

글의 목록과 해당 글을 불러오는 앱을 만들어 봅니다.

data class와 통신을 위한 준비를 마쳤다고 가정합니다.

 

기존 방식 - 목록보기

참고 : https://yunaaaas.tistory.com/43

1. activity_xml.xml 작성

2. item_post.xml 작성

3. recyclerView adapter 작성

4. activity와 adapter 연결

Jetpack Compose - 목록보기

참고 : https://kotlinworld.com/210

1. LazyColumn 작성

2. Item 작성

Jetpack Compose 직접 써보니

가장 대표적인 예로 목록보기 기능과 이미지는 없지만 한건 보기를 구현해보았다.

xml로 레이아웃을 만들고 거기에 UI를 업데이트 하기 위한 코드를 작성해야했던 기존의 코드와 달리

Compose를 사용하니 목록과 글 한건을 보는데 사용된 코드는 불과 266줄에 불과했다.

(물론 UI나 기능의 디테일한 부분을 생각하면 이는 달라질 수 있는 부분임을 감안해야한다.)

개인적으로 코틀린으로 모든 걸 할 수 있다는 게 획기적이라고(?) 느껴졌다.

 

그리고 composable 함수로 이루어진 UI 컴포넌트들로 기존의 방식보다 재사용이 용이해질 것으로 보였다.

그리고 preview 기능이 제공되어서, 실시간으로 확인이 가능한 점 또한 매력적이었다.

 

 

 

이번 글에서는 컨퍼런스를 준비하며 알게된 것을 정리해보았다.

다음 글에서는 실제로 Jetpack Compose를 프로젝트에 적용해 간단한 UI를 구성해보며 알게 된 것들을

작성해보려고 한다.

---

공부하며 작성된 글이라 잘못된 정보가 있을 수 있습니다.

말씀해주시면 수정하겠습니다. 감사합니다.

References

아래 글을 참고하여 작성 되었습니다.

Jetpack Compose UI 앱 개발 도구 키트 - Android 개발자  |  Android Developers

 

[ Android Studio] 안드로이드 Inflate란?

 

의식의 흐름으로 "선언형", "선언형 UI" 개념 재정리하기

 

명령형 코드와 선언형 코드, 그리고 추상화 다시보기

Jetpack Compose의 등장배경을 알아보자. | 찰스의 안드로이드

 

[Android] Jetpack Compose로 재사용성 높은 UI 작성하기

앱에 Jetpack Compose 추가  |  Android Developers

 

Jetpack Compose: An easy way to RecyclerView (Part I)

 

[Android] - Jetpack Compose Recyclerview : Lazy Column (Part 1)

[Android] Jetpack Compose에서 State 완전 정복하기