[Android] Jetpack Compose란?

Jetpack Compose란?

Jetpack Compose란 네이티브 Android UI를 빌드하기 위한 최신 UI Toolkit이다.

기존 XML로 작성하던 UI보다 더 적은 수의 코드, 여러 가지 강력한 도구, 직관적인 Kotlin API로 Android에서의

UI 개발을 간소화하고 가속화하여 앱에 생동감을 더해주며 Android UI를 더 빠르고 쉽게 빌드할 수 있다.

선언형(Declarative) UI

Jetapck Compose는 선언형 UI 패러다임을 적용한 UI Toollkit이다.

기존 안드로이드에서의 UI는 명령형 UI로, UI를 작성하기 위해서는 XML로 레이아웃을 작성하고,

Kotlin 코드로 XML 레이아웃을 inflate 한 뒤 findViewById와 같은 함수를 사용하여 위젯을 찾아

button.setText(String)과 같은 메서드를 호출하여 직접 위젯의 내부 상태를 변경했다.

뷰를 수동적으로 조작할 때 개발자가 일일이 업데이트를 해줘야 하므로 뷰의 업데이트를 잊거나

이미 삭제된 뷰를 업데이트 시도하는 등 잘못된 상태를 야기할 수 있다.

이는 프로젝트가 커질수록 업데이트해야 할 뷰가 많아지므로 프로젝트 유지관리 복잡성이 증가한다는 단점이 존재했다.

선언형 UI에서는 화면 전체를 개념적으로 재생성한 후 필요한 변경사항만 적용하는 방식으로 작동한다.

화면 전체를 재생성하면 시간, 컴퓨팅 성능, 배터리 등 잠재적인 비용이 많이 발생할 수 있는데,

이 비용을 줄이기 위해 Compose는 특정 시점에 UI의 어떤 부분을 다시 그려야 하는지 지능적으로 선택하여

다시 그리는 과정을 통해 비용을 줄일 수 있게 설계되어있다.

간단한 Compose 예제를 보면,

@Compose 어노테이션을 통해 Compose 컴파일러에게 함수가 데이터를 UI로 변환하기 위한 함수라는 것을 알린다.
위 함수는 String 매개변수를 받아 이 매개변수를 통해 앱 로직이 UI를 형성할 수 있도록 한다.
Text()라는 Composable 함수를 호출한다. 이 함수는 내부의 Composable 함수를 호출하여 UI 계층 구조를 내보낸다.
UI를 내보내는 함수는 원하는 화면 상태를 설명하므로 아무것도 반환할 필요가 없다.
이 함수는 빠르고 부작용이 없다.

이를 기존의 명령형 UI인 XML로 표현하면,

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

</androidx.appcompat.widget.LinearLayoutCompat>

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView: TextView = findViewById<TextView>(R.id.textView)
        textView.setText("Hello Compose")
    }
}

Layout 파일에 XML로 레이아웃을 정의한다.
Activity에서 findViewById로 TextView의 id로 뷰를 찾아 연결한다.
setText 함수를 호출하여 텍스트 값을 직접 변경한다.

위 예시를 보면 확실히 Compose의 코드 수가 적으며, 수동적으로 뷰의 상태를 변경하지 않고

함수로 UI를 선언을 통해 뷰를 표현하므로 기존보다 효율적이다.

Compose의 장점

선언형 UI로써의 Compose 장점으로는 다음과 같다.

코드 감소

Compose를 사용하면 XML을 사용하지 않고 Kotlin 코드로만 작성할 수 있으므로 코드량이 감소하며 코드 추적이 용이해진다.

특히 기존 RecyclerView를 사용할 때는 Adapter, ItemView 등 여러 추가 코드를 작성해야 하는 반면,

Compose에서는 LazyColumn, LazyRow를 사용하여 극적으로 코드를 줄일 수 있다.

또한 재사용할 수 있는 위젯들을 Component로 분리함으로써 코드 재사용을 극대화할 수 있다.

직관적

Compose는 선언적 API를 사용하므로 UI를 코드로 작성하면 나머지는 Compose가 처리해주므로 매우 직관적이다.

특히 Compose에서 제공하는 API들이 매개변수를 통해 전달하는 방식으로 매우 직관적이므로 처음 사용할 때도

쉽게 적응하여 사용할 수 있다.

빠른 개발 과정

Compose는 기존의 모든 코드와 호환되므로 Compose에서 View를, View에서 Compose 코드를 호출할 수 있다.

Navigation, ViewModel, Coroutine 등 자주 사용하는 라이브러리들이 Compose와 호환되므로 문제없이 사용할 수 있다.

Android Studio에서 미리보기와 미리보기 빌드를 통해 개발 시간이 절약된다.

강력한 성능

Compose는 Android 플랫폼 API에 직접 액세스하고 머티리얼 디자인, 다크 테마, 애니메이션 등을 기본적으로 지원하므로

완성도 있는 앱을 만들 수 있다.

구글 안드로이드 공식문서에 Compose 관련 내용이 자세하고 이해하기 쉽게 작성되어 있으므로 꼭 정독하는 것을 추천한다.

https://developer.android.com/jetpack/compose

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

앱 작성 속도를 높이는 데 도움이 되는 Android의 UI 앱 개발 도구 키트와 리소스인 Jetpack Compose를 살펴보세요.

developer.android.com

저작자표시