Jetpack Compose가 필요한 이유

왜 컴포즈가 필요한가

1. xml을 벗어난 UI 개발
2. 선언형 UI
3. 상속이 아닌 확장

XML을 벗어난 UI 개발

MVVM과 databinding 조합으로 잘 사용하고 있었던 방식이 있지만 결국 여전히 xml을 사용한다는 점에서 Compose가 나왔습니다. 해당 그림은 Xml으로 UI를 그릴 경우에 흔히 나타나는 패턴을 나타냅니다. View와 데이터 사이에 중간 계층이 하나 끼어드는 형태입니다.

UI를 그리기 위해 XML을 사용하고 있음에도 불구하고, 코틀린 역시 UI에 어떤 id 값이 있고, 어떤 UI를 포함하려 하는지를 알고 있어야 하기 때문에 둘은 강하게 의존하게 됩니다. 시간이 지나 view를 수정하고 싶어서 xml을 수정하게 되면 어쩔 수 없이 kotlin 코드도 수정해야 하며 잘못했다가는 런타임 에러가 나게 됩니다. 결국 코틀린 개발자와 코틀린 코드가 어떠한 안정장치도 없이 UI에 개념적으로 의존해야 한다는 의미이기도 합니다.

MVVM과 databinding 조합은 그나마 상황이 낫지만 여전히 XML을 벗어나지 못했다는 한계가 있습니다. Jetpack Compose를 사용하면 Fragment는 자연스럽게 없어질 수 있습니다.위 그림은 선언형 UI toolkit인 Jetpack Compse로 구현할 경우 나타나는 패턴입니다. 즉 데이터를 입력받으면 UI를 그려주는 Kotlin 함수를 사용하여 UI를 그리게 됩니다. ViewModel에서 변경된 데이터를 Composable 함수의 파라미터로 바로 넘겨주기만 하면 됩니다. 즉 UI가 바뀌면 Composable 함수만 수정하면 될 분입니다.

선언형 UI

명령형 프로그래밍은 컴퓨터에게 하나하나 명령을 하는 형태로 코딩을 하는 것입니다. 반면에 선언형 프로그래밍은 컴퓨터에게 우리가 원하는 것을 선언 또는 표현하듯이 코딩 하는 것입니다.

명령형 코드 예

val myList = listOf(1,2,3)
val targetList = mutableListOf<Int>()
for (i in myList) {
    if (i % 2 == 0) tempList.add(i)
}

선언형 코드 예

val targetList = listOf(1,2,3).filter { it % 2 == 0 }

선언형 코드는 내부적으로 어떻게(how)에 대해서는 관심이 없습니다.

이것을 UI 프로그래밍의 예로 다시 봅시다.

명령형 UI 프로그래밍 예

val linearLayout = LinearLayout()
linearLayout.orientation = VERTICAL

val textView1 = TextView().apply {
    text = "hello"
}
val textView2 = TextVew().apply {
    text = "world"
}
linearLayout.add(textView1)
linearLayout.add(textView2)

선언형 UI 프로그래밍 예

<LinearLayout
    ...
    android:orientation="vertical">
    <TextView
				...
        android:text="hello"/>
    <TextView
        ...
        android:text="world"/>
</LinearLayout>

사실 XML도 선언형입니다. 하지만 Compose에서는 XML 파일이 아니라 코드로 지원합니다.

@Composable
fun MyView() {
    Column {
        Text("hello")
        Text("world")
    }
}

상속을 버리고 합성을 선택하다.

기존에는 모든 컴포넌트가 View.java를 상속해야 합니다. 그러나 View.java는 3만 줄이 넘을 만큼 너무 거대합니다. 그래서 Base Class가 너무 많은 역할을 하게 되면 하위 클래스가 많아지면 많아질수록 Base Class 자체를 바꾸는 게 굉장히 부담으로 다가옵니다.

Jetpack Compose는 상속 대신에 합성을 사용하여 전체적인 UI 컴포넌트를 구성하도록 설계되었습니다.

점차 거대해지는 안드로이드 시스템에서 현재 View들의 상속 관계는 전혀 관리되지 못하는 모습을 보이고 있는 것이 현재 모습입니다.