[Android] Jetpack Compose Part 0 - Compose란?

 

https://github.com/tmdgh1592/Jetpack-Compose-Android-Examples

GitHub - tmdgh1592/Jetpack-Compose-Android-Examples: Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Com

컴포즈 공부 내용은 위 깃허브 레퍼지토리에 정리합니다.

 

 

구글 IO 2018에서 처음 공개된 Compose는 3년동안 제작기간을 거쳐 현재 Beta 버전에 이르렀습니다.

Compose는 Kotlin으로 제작되는 라이브러리 이며, 더 이상 XML이 아닌 선언형 프로그래밍 방식으로 UI를 그립니다.

기존에 Flutter 혹은 SwiftUI를 다뤄보신 분들이라면 조금은 익숙하실 것이라고 생각됩니다.

하지만 안드로이드는 지금까지 XML로 UI를 그려오다가, 갑자기 왜 Compose라는 새로운 개념이 도입됐는지 의아했습니다.

 

 

■ 왜 Compose 여야만 하는가?

 

□ 코드 감소

적은 수의 코드로 더 많은 작업을 하고 전체 버그 클래스를 방지할 수 있으므로 코드가 간단하며 유지 관리하기 쉽습니다.

기존에 XML에 View를 그리고, Activity에서 findViewById, ViewBinding, DataBinding을 통해 View 객체에 접근하는 경우, 약간의 수정으로 반복적으로 재사용되는 보일러 플레이트 코드가 생기게 됩니다.

이는 곧, 의미없는 코드 line을 늘리게 되어 코드의 가독성을 떨어뜨립니다.

하지만 Compose의 사용으로, 코드 라인이 줄어듦에 따라 테스트와 디버그 작업과 버그 발생 가능성이 줄어들어 당면 문제에 집중할 수 있습니다. 또한, 당연히 복잡도가 감소하기 때문에 유지보수 측면에서도 큰 효율을 발휘할 수 있습니다.

공식 문서에 따르면, Google 파트너의 의견은 아래와 같습니다.

• "동일한 버튼 클래스의 경우 [코드] 의 규모가 10배 더 작았습니다.” (Twitter)
• “RecyclerView로 빌드한 모든 화면에서 상당한 감소 효과가 나타났으며, 대부분의 화면이 여기에 해당합니다.” (Monzo)
• “앱에서 목록이나 애니메이션을 만드는 데 필요한 코드 줄이 이렇게 적다는 사실이 매우 기뻤습니다. 기능마다 작성하는 코드 줄 수가 줄어든 덕분에 고객에게 가치를 제공하는 데 더욱 집중할 수 있게 되었습니다.” (Cuvva)

기존에 RecyclerView를 구성하기 위해서 Adapter를 연결하고 LayoutManager를 연결해주는 등 여러 작업이 필요했습니다. 

하지만 Compose에서는 LazyColumn이라는 Composable을 통해 간단히 리스트 형태의 View를 구현할 수 있습니다.

 

□ 직관적

Compose는 선언적 API를 사용합니다. 즉, Compose가 나머지를 처리하므로 UI를 설명하기만 하면 됩니다.

또한, 테마 레이어가 훨씬 더 직관적이고 읽기 쉽습니다. 멀티 레이어 테마 오버레이를 통해 속성을 정의하고 할당하는 여러 XML 파일로 확장해야 했을 일을 단일한 Kotlin 파일 내에서 달성할 수 있습니다.

Compose를 사용하면 특정 활동이나 프래그먼트에 종속되지 않는 작은 Stateless 구성요소를 빌드합니다.

이를 통해 재사용하고 테스트하기가 쉬워집니다. Compose에서는 상태가 명시적이며 컴포저블로 전달됩니다. 이렇게 하면 상태에 관한 정보 출처가 하나이므로 캡슐화되고 분리될 뿐더러, State, LiveData, RxKotlin(Java) 형식으로 작성한 값에 대해서 변경 값에 따라 UI가 자동적으로 업데이트됩니다.

 

□ 빠른 개발 과정

Compose는 기존의 모든 코드와 호환됩니다. Compose에서 View를, Views에서 Compose를 호출할 수 있습니다.

Navigation, ViewModel, Coroutine과 같은 대부분의 일반적인 라이브러리는 Compose와 함께 작동하므로 언제 어디서든 원하는대로 채택할 수 있습브니다.

또한, 실시간 미리보기를 제공하기 때문에, 코드를 더 빠르게 반복하고 제공할 수 있습니다. 기존 XML의 미리보기와 비슷하다고 생각할 수 있지만, Compose에서 미리보기는 Class 내에서 미리보기를 지원하므로, 특정 데이터들을 사용하여 그린 화면을 미리 확인할 수가 있습니다. (e.g. RecyclerView의 미리보기)

이 때문에, 빠른 개발이 가능하며, 오류 발생 확률을 조금이나마 줄일 수 있다는 장점이 있습니다.

 

□ 강력한 성능

Compose는 Android 플랫폼 API에 직접 접근하고 Material Design, Dark Theme, Animation 등을 기본적으로 지원하여 멋진 앱을 만들 수 있습니다.

Compose를 사용하면 애니메이션을 통해 쉽고 빠르게 앱에 움직임과 생명을 불어넣을 수 있습니다.

안드로이드의 대표 Http 통신 라이브러인 Retroift을 개발한 Square사는 "특별한 도구가  없어도 애니메이션을 만들 수 있습니다. 정적 화면을 표시하는 것과 다르지 않습니다." 라고 밝혔습니다.

Material Design으로 빌드하든, 자체 디자인 시스템으로 빌드하든, Compose를 사용하면 원하는 디자인을 유연하게 구현할 수 있습니다. 자체 디자인 시스템을 구축하다보면, Material Design과 실제 디자인 요구사항이 다른 경우가 많기 때문에 이러한 상황에서 큰 효과를 볼 수 있습니다.