Jetpack Compose 이해하기 (1장) - 선언형 UI vs 명령형 UI

안드로이드 앱 개발에서 Jetpack Compose가 등장하면서 기존의 명령형(Imperative) UI 방식에서 선언형(Declarative) UI 방식으로 패러다임이 전환되었습니다.

이번 글에서는 이 두 가지 접근법의 개념과 차이점을 비교해 보겠습니다.

 

---

 

📌 명령형(Imperative) UI 방식이란?

명령형 UI는 화면을 구성할 때 어떻게(how) 만들어야 하는지를 단계별로 명확하게 지정하는 방식입니다.

전통적인 안드로이드 개발에서는 XML과 Kotlin 또는 Java 기반의 View 시스템이 이에 해당합니다.

 

예를 들어, 특정 버튼 클릭 시 텍스트의 색상을 바꾸려면 다음과 같이 구현합니다.

val button = findViewById<Button>(R.id.myButton)
button.setOnClickListener {
    textView.setTextColor(Color.RED)
}

 

 명령형 방식의 단점

• UI 상태가 많아질수록 관리가 복잡해짐
• 코드 길이가 길어지고 가독성이 낮아짐
• 유지보수가 어렵고 버그 발생 가능성이 높아짐

 

---

 

📌 선언형(Declarative) UI 방식이란?

선언형 UI는 화면에 무엇(what)을 표시할 것인지에 초점을 맞춥니다. 상태(state)를 기반으로 UI를 정의하고, 상태가 변경되면 자동으로 UI가 다시 그려지게 됩니다.

Jetpack Compose는 이러한 선언형 UI를 중심으로 설계된 최신 안드로이드 UI 라이브러리입니다. 선언형 방식에서는 상태(state)와 UI가 긴밀하게 연결되어 있습니다. 상태가 변경될 때마다 Compose가 상태 변화를 감지하고, 자동으로 화면을 재구성(recomposition)합니다. 이를 통해 개발자는 UI가 특정 상태에서 어떻게 보여야 하는지만 명시하면 되고, 상태 관리와 화면 갱신은 Compose가 알아서 처리해 줍니다.

 

예를 들어, 아래 Compose 코드는 상태의 변화에 따라 UI가 자동으로 업데이트되는 방식을 명확하게 보여줍니다.

@Composable
fun ColorChangingText(isRed: Boolean) {
    Text(
        text = "Hello Compose!",
        color = if (isRed) Color.Red else Color.Black
    )
}

위 코드에서 isRed가 true에서 false로 변하면 Compose는 자동으로 UI를 갱신하여 색상을 변경합니다.

728x90

🚀 선언형 방식의 장점

• 직관적이고 간결한 코드 작성 가능
• 상태의 변화에 따라 자동으로 UI를 업데이트
• 명확한 상태 관리를 통해 버그 발생 가능성 감소
• UI가 데이터에 따라 즉시 반응하여 사용자의 인터랙션 처리 효율성 증가
• 코드 재사용과 유지보수가 용이

 

🚀 선언형 방식의 한 가지 공식

‘위젯 또는 함수’의 인자로 상태를 넘겨주면, 해당 상태에 맞는 View를 생성합니다. 함수형 프로그래밍 개념의 순수 함수처럼 같은 상태에 대해서는 항상 똑같은 View를 리턴합니다.

플러터에서 모든 UI는 위젯으로 구성되어 있지만, Jetpack Compose는 @Composable 함수로 이루어져 있기 때문에 ‘위젯 또는 함수’라고 표현했습니다. 이는 각 프레임워크에서 설계 의도에 따라 달라질 뿐 진리는 변하지 않습니다.

이런 특징으로 인해 선언형 UI에서는 XML, HTML과 같은 별도의 마크업 언어를 사용하는 대신 코드로 직접 UI를 작성하는 것이 일반적입니다.

---

🔥 선언형 UI로 전환하는 이유?

명령형 방식은 간단한 앱에서는 효과적일 수 있지만, 복잡한 UI와 다양한 상태가 존재하는 현대 앱에서는 관리하기 어렵습니다. 반면, 선언형 UI는 데이터와 상태가 명확히 구분되어 있어 상태 관리가 효율적입니다.

구글 역시 Jetpack Compose를 안드로이드 UI의 미래로 제시하고 있으며, 많은 개발자와 커뮤니티가 이 새로운 패러다임으로 빠르게 전환하고 있습니다.

다음 장에서는 Jetpack Compose의 기본적인 개념과 Composable의 사용 방법을 구체적으로 알아보겠습니다.

 

---

반응형