[안드로이드] UI 상태 관리: 상태 홀더(State Holder)

안드로이드 애플리케이션 개발에서 UI 상태 관리는 사용자 경험의 핵심 요소다. 특히, Jetpack Compose와 같은 선언형 UI 프레임워크에서는 상태와 이벤트를 명확히 관리하는 것이 중요하다. 이를 효과적으로 구현하는 방법 중 하나가 상태 홀더를 활용하는 것이다. 

 

상태란?

UI의 상태(State)는 사용자의 입력이나 외부 데이터 변화에 따라 바뀌는 값이다. 상태는 UI를 결정짓는 중요한 요소로, 선언형 UI 프레임워크에서는 상태가 변경되면 UI가 자동으로 업데이트된다.

상태의 예시

• 사용자가 버튼을 눌러 로딩 중 상태가 활성화됨
• API 요청 후 데이터를 가져와 화면에 표시
• 체크박스가 선택되었는지 여부

이러한 상태를 효과적으로 관리하기 위해 상태 홀더가 필요하다.

 

로직이란?

UI 상태는 정적이지 않으며 애플리케이션의 데이터나 사용자 이벤트에 따라 시간이 지나면서 변경된다. 이러한 상태 변경을 처리하는 로직은 상태가 변경되는 이유와 시점을 결정하며 UI 상태 생성에 중요한 역할을 한다.

로직의 두가지 유형

• 비즈니스 로직
  • 앱의 데이터 처리와 관련된 로직으로, 예를 들어 사용자가 버튼을 클릭했을 때 데이터를 저장하거나 갱신하는 작업이다.
  • 이 로직은 주로 도메인 또는 데이터 레이어에 배치되며, 상태 홀더는 해당 로직을 처리한다.
• UI 로직
  • UI 상태를 화면에 표시하는 방법에 관련된 로직이다.
  • 예를 들어 사용자가 카테고리를 선택했을 때 적절한 검색창 힌트를 표시하거나, 버튼 클릭 시 다른 화면으로 탐색하는 등의 작업이다.

 

상태 홀더(State Holder)란?

상태 홀더는 UI 상태를 저장하고 관리하는 역할을 한다. 보통 ViewModel이 이 역할을 수행하며, UI와 비즈니스 로직을 분리하는 데 도움을 준다. Jetpack Compose에서는 Composable 함수 내부에서 상태를 직접 관리하는 경우도 있지만, 상태 홀더를 활용하면 상태를 더 안정적이고 예측 가능하게 관리할 수 있다.

상태 홀더의 주요 역할

1. 상태(State) 관리: UI가 필요한 데이터를 저장하고 유지한다.
2. 이벤트 처리: 사용자 입력 및 비즈니스 로직을 관리한다.
3. 구성 변경 대응: 화면 회전과 같은 구성 변경(Configuration Change)에도 상태를 유지한다.
4. UI와의 분리: UI와 데이터 처리를 분리하여 유지보수성을 높인다.

 

Android 수명 주기와 UI 상태 및 로직 유형

안드로이드에서 UI 상태를 효과적으로 관리하려면 수명 주기(Lifecycle)와 UI 상태의 관계를 이해하는 것이 중요하다. UI 상태 및 로직은 다음과 같은 유형으로 나뉜다.

 

1. UI 상태 유형

• 임시 상태(Transient State): 화면에만 존재하는 상태 (예: 스크롤 위치, 애니메이션 상태)
• 구성 변경을 고려한 상태(Configuration-resilient State): 화면 회전 등에서도 유지되는 상태 (예: ViewModel에서 관리하는 데이터)
• 영구 상태(Persistent State): 앱을 재시작해도 유지되는 상태 (예: SharedPreferences, Room 데이터베이스)

 

2. UI 로직과 비즈니스 로직의 분리

UI 코드와 비즈니스 로직을 분리하면 유지보수성과 테스트가 쉬워진다. 일반적으로 다음과 같이 구성된다.

• UI 로직 (User Interface Logic): 화면 구성, 애니메이션, 사용자 입력 처리 (Compose UI 내부)
• 비즈니스 로직 (Business Logic): 데이터 처리, 네트워크 요청, 상태 관리 (ViewModel, Repository, UseCase)

이러한 구조를 따름으로써 UI 상태와 로직을 체계적으로 관리할 수 있다.

 

UI 상태 생성 파이프라인

Jetpack Compose에서 UI 상태를 생성하는 과정은 다음과 같이 이루어진다.

1. 데이터 소스(Data Source): 네트워크, 데이터베이스, SharedPreferences 등의 데이터 제공
2. 상태 홀더(State Holder, ViewModel): 데이터를 수집하고 상태를 관리
3. UI 상태 변환(State Transformation): 비즈니스 데이터를 UI에서 사용할 상태로 변환
4. Composable UI: 변환된 상태를 화면에 렌더링

이 파이프라인을 통해 UI 상태가 체계적으로 생성되고 유지될 수 있다.

 

상태 홀더의 구조 및 단방향 데이터 흐름(UDF)

Jetpack Compose는 단방향 데이터 흐름(Unidirectional Data Flow, UDF)을 따른다. 즉, 데이터는 한 방향으로 흐르며, UI에서 발생한 이벤트는 다시 상태 홀더로 전달된다.

단방향 데이터 흐름의 구조

1. ViewModel(State Holder) → 상태를 관리하고 UI가 사용할 데이터를 제공
2. Composable UI → 상태를 구독하고 UI를 렌더링
3. Event (사용자 입력) → UI에서 발생한 이벤트를 상태 홀더로 전달

이를 통해 UI와 상태 관리 로직이 분리되어 코드의 예측 가능성과 유지보수성이 향상된다.

 

위 그림은 단방향 데이터 흐름에서 상태 홀더(ViewModel)의 역할이다.

• UI는 ViewModel의 상태를 구독하여 화면을 렌더링하고,
• 사용자 입력을 이벤트 형태로 상태 홀더에 전달한다.
• 상태 홀더는 이벤트를 처리하고 새로운 상태를 생성하여 UI에 반영한다.

이 구조를 따르면 UI의 상태 변화가 한 방향으로만 흐르므로 예측 가능성과 유지보수성이 향상된다.

 

Jetpack Compose에서 상태 홀더 구현하기

Jetpack Compose에서는 상태를 관리하는 여러 가지 방법이 있지만, ViewModel을 활용한 상태 관리가 가장 일반적이다. 아래 코드 상태 홀더를 활용하는 방법의 예제이다.

 

1. 상태(State) 데이터 클래스 정의

UI에 필요한 상태를 표현하는 데이터 클래스를 먼저 정의한다.

data class UiState(
    val isLoading: Boolean = false,
    val text: String = "Hello, World!"
)

 

2. ViewModel을 상태 홀더로 구현

ViewModel을 활용하여 UI 상태를 관리한다.

class MyViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(UiState())
    val uiState: StateFlow<UiState> = _uiState.asStateFlow()

    fun onEvent(event: UiEvent) {
        when (event) {
            is UiEvent.ButtonClicked -> performAction()
        }
    }

    private fun performAction() {
        _uiState.update { currentState ->
            currentState.copy(isLoading = true)
        }
    }
}

• MutableStateFlow를 사용하여 상태를 관리한다.
• onEvent() 함수를 통해 UI 이벤트를 처리하고 상태를 업데이트한다.

 

3. UI에서 상태 관찰 및 렌더링

Composable 함수에서 ViewModel을 통해 상태를 구독하고 UI를 구성한다.

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    Column {
        Text(text = uiState.text)
        Button(onClick = { viewModel.onEvent(UiEvent.ButtonClicked) }) {
            Text("클릭")
        }
        if (uiState.isLoading) {
            CircularProgressIndicator()
        }
    }
}

• collectAsStateWithLifecycle()을 사용하여 상태를 안전하게 구독한다.
• 버튼 클릭 시 onEvent()를 호출하여 상태를 변경한다.

 

상태 홀더 사용의 장점

• 구성 변경(Configuration Change) 대응
  • ViewModel을 사용하면 화면 회전 등의 구성 변경에도 상태가 유지된다.
• UI와 비즈니스 로직의 분리
  • UI에서 직접 데이터를 처리하지 않고 ViewModel이 관리하도록 하여, 유지보수성과 테스트 용이성이 향상된다.
• 예측 가능한 상태 관리
  • 단방향 데이터 흐름을 적용하면 상태가 한 방향으로만 변경되므로, 디버깅이 쉬워지고 버그가 줄어든다.

 

결론

• Jetpack Compose에서는 UI 상태를 명확하게 관리하는 것이 중요하다.
• 상태 홀더를 활용하면 UI와 로직을 분리하고, 상태를 예측 가능하게 유지할 수 있다.
• ViewModel을 상태 홀더로 사용하여 안정적인 상태 관리를 구현하고, 단방향 데이터 흐름을 따르는 구조를 적용하면 유지보수하기 쉬운 코드와 더 나은 사용자 경험을 제공할 수 있다