Android XML과 Compose의 차이점?

오늘은 안드로이드 앱 개발에서 UI를 개발 하는 두 가지 방식 XML과 Compose의 차이에 대해 알아보겠습니다.

XML

XML은 태그를 이용하여 객체를 정의하는 마크업 언어로, 부모 - 자식 관계가 있기 때문에 UI의 구조가 ViewGroup - View의 Tree 형태로 표현되어있다.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

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

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click"/>
</LinearLayout>

Compose

Compose는 안드로이드 네이티브 UI를 개발하기 위해 구글에서 새롭게 출시한 선언형 UI 도구 키트이다.

Column {
    Text(text = "Android")
    Button(onClick = { /* TODO */ }) {
        Text(text = "Click")
    }
}

간단한 예시 비교

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

        val textView = findViewById<TextView>(R.id.textView)
        textView.text = "Android"
    }
}

XML

• setContentView라는 메소드를 이용하여 layout 파일을 보여줌
• findViewById라는 메소드를 이용하여 id를 이용해 XML에 그린 View를 찾아서 코드단을 연결
• 그렇게 가져온 View의 텍스트를 변경하라고 명령

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { 
            Text(text = "Android")
        }
    }
}

Compose

• 간단한 코드임에도 짧아진 길이
• 코드 상에서 이러한 Text를 그린다고 선언

명령형 VS 선언형

• 명령형은 View따로, 로직따로, 하나하나 명령을 해야한다.

-> View 가 많아질수록 내가 어떤 뷰를 연결했는지 헷갈리게 되면서 그 사이에서 실수들이 여럿 발생하여 버그 및 불필요한 작업 시간이 매우 소요된다.

• 선언형은 상태만 선언하면 UI가 알아서 갱신된다.

-> Compose는 불필요한 보일러플레이트 코드가 줄어들어 버그가 일어날 확률도 줄고 적은 코드로 UI 구현이 가능해서 생산성이 빨라지고 유지보수하기 쉽다.