[Jetpack Compose] 기존 UI방식과 다른 점?

기존 명령어 방식에 익숙한 개발자로서 선언형 UI에 개념을 이해하는데 어려움이 있어 정리하는 차원에서 글을 작성해본다.

1. 선언형 UI vs 명령형 UI의 차이

Jetpack Compose의 가장 큰 특징은 선언형(Declarative) UI 방식이라는 점이다. 기존 Android View 시스템은 명령형(Imperative) 방식이며, 이 두 가지는 단순히 코드 스타일만 다른 것이 아니라, UI 구성과 상태 관리 개념이 다르다.

 

2. 선언형 UI의 핵심은 “현재 상태에 따라 UI를 그린다.” 

Compose에서는 UI는 상태(state)에 기반해 선언하고, 상태가 바뀌면, 해당 UI는 자동으로 다시 그려진다 (recomposition).

기존 안드로이드처럼 View를 직접 찾아서 조작하지 않고, UI는 항상 상태의 결과물로서 존재한다.

 

3. 내부 작동 방식

항목	명령형 UI (기존 안드로이드)	선언형 UI (Jetpack Compose)
View 조작 방식	UI 요소를 참조하여 직접 변경 findViewById, .setText() 등	상태 변경 → Compose가 필요한 UI만 자동 재구성 (Recomposition)
생명주기 관리	Activity / Fragment 생명주기와 View 상태 동기화 필요	Compose는 컴포지션(Composition) 단위로 생명주기 관리 가능
UI 업데이트 흐름	사용자 액션 → View 수동 조작	상태 변경 → 자동으로 UI 재구성 (단방향 흐름)
성능 최적화	notifyDataSetChanged() 등 수동 최적화 필요	Compose가 내부적으로 변경 감지 및 최소화된 Recomposition 수행

4. 예를들면..

• Compose에서는 상태에 따라 UI를 재조합(Recomposition)된다.
• TextView를 직접 참조하거나 변경하지 않는다.
• 아래 Compose 방식 소스처럼 isConnected 값이 바뀌면 StatusText는 자동으로 다시 호출되어 새로운 UI를 그리게 된다.

1)  기존 Android 방식 (Imperative)

val textView = findViewById<TextView>(R.id.statusTextView)

fun updateStatus(isConnected: Boolean) {
    if (isConnected) {
        textView.text = "Connected"
        textView.setTextColor(Color.GREEN)
    } else {
        textView.text = "Disconnected"
        textView.setTextColor(Color.RED)
    }
}

 

2)  Compose 방식 (Declarative)

@Composable
fun StatusText(isConnected: Boolean) {
    Text(
        text = if (isConnected) "Connected" else "Disconnected",
        color = if (isConnected) Color.Green else Color.Red
    )
}

 

 

5. Compose의 재구성(Recomposition)

하나의 상태가 변경 될 때 마다 전체 UI를 다시 그리게 되면 비효율 적인거 아닐까? 라는 생각이 들었지만, Compose는 상태가 변경될 때 전체 UI를 다시 그리는 게 아니라, 변경된 부분만 선택적으로 다시 그린다.

이 과정은 아래와 같은 Compose Runtime이 처리를 한다고 한다.

• 상태 추적 (remember, mutableStateOf)
• 컴포지션 트리 관리
• 변경 감지 (Diffing)
• 필요한 부분만 재컴포지션

이 때문에 Compose는 UI가 복잡해질수록 오히려 성능 관리가 쉬워지고, 코드 유지보수도 간결해지는 장점이 있다.

 

6. Compose UI 특징 : 상태(State)와 UI의 단방향 흐름

Compose는 단방향 데이터 흐름(Unidirectional Data Flow)을 기본으로 하기 때문에 MVVM이나 Redux 아키텍처와도 잘 맞고, UI 상태 관리의 예측 가능성을 높여준다.

• @Composable 함수는 입력 파라미터(state)에 따라 UI를 그림
• mutableStateOf, StateFlow, LiveData, ViewModel 등과 연동도 자연스러움
• 이벤트는 콜백으로 전달 (onClick, onValueChange 등)

7. 마무리

선언형 UI의 장점으로는

• UI와 상태가 밀접하게 연결되어 있어 코드가 명확해짐
• 복잡한 UI 조건, 반복 등을 코드로 표현하기 쉬움
• 상태 변화에 따른 UI 업데이트가 자동화되어 버그가 줄어듦
• View 참조, findViewById, DataBinding 없이도 MVVM 적용이 쉬움
• Compose Runtime이 변경 감지를 자동으로 해줌 (최적화된 Recompose)

 등이 있다. 

 

기존 안드로이드 UI 방식이랑은 개념적으로 다른 부분이 많다 보니 Compose 처음 접했을 땐 좀 헷갈리고 어려움이 많다. 특히 선언형 UI 방식이나 상태에 따라 화면이 바뀌는 흐름이 익숙하지 않아서 초반엔 적응이 쉽지 않았지만  새로운 걸 배우는 재미는 확실히 있는 것 같다. 특히 기존에 번거롭게 하던 작업들을 훨씬 간결하게 처리할 수 있다는 점도 꽤 매력적이라 느껴진다.

앞으로는 시간 날 때마다 Compose 관련해서 조금씩 정리도 해보고, 내가 직접 써보면서 느낀 점들도 기록해보려고 한다.