[안드로이드] UI 이벤트

안드로이드 앱에서 UI 이벤트는 사용자와 애플리케이션 간의 핵심적인 상호작용을 담당한다. 예를 들어, 버튼 클릭, 스크롤, 입력 필드 변경 등의 동작이 모두 이벤트로 처리된다. 이러한 이벤트를 효과적으로 관리하지 않으면 앱의 응답성이 떨어지거나 예기치 못한 동작이 발생할 수 있다. 따라서, 체계적인 이벤트 처리 방식이 필요하다.

 

UI 이벤트 처리의 기본 원칙

1. 단방향 데이터 흐름(One-way Data Flow, UDF) 유지

안드로이드에서 UI 상태를 관리할 때 단방향 데이터 흐름을 유지하는 것이 중요하다.
즉, 이벤트 → 상태 변경 → UI 업데이트의 흐름을 따라야 한다.

이러한 구조를 따르면 상태 변화의 원인을 추적하기 쉬워지고, 디버깅이 간편해진다. 또한, 예기치 못한 부작용을 방지하여 유지보수성을 높일 수 있다.

예제

• 사용자가 버튼을 클릭하면 이벤트(event) 가 발생한다.
• 이 이벤트를 처리하여 새로운 상태(state) 를 생성한다.
• UI는 이 새로운 상태를 반영하여 업데이트된다.

이 원칙을 지키면 예측 가능한 UI 동작을 구현할 수 있다.

 

2. 이벤트 소비와 상태 업데이트의 분리

이벤트를 처리할 때, 이벤트 자체를 직접 UI 상태에 반영하는 것이 아니라, 이벤트 처리 로직과 상태 업데이트 로직을 분리하는 것이 좋다.

예를 들어, 버튼 클릭 이벤트가 발생했을 때,

• 버튼 클릭 이벤트는 이벤트 핸들러에서 처리
• 상태 업데이트는 ViewModel에서 처리

이렇게 하면 이벤트와 상태 변화의 역할이 분리되어 코드가 더욱 명확해진다.

 

3. 비동기 처리 일관성 유지

이벤트 처리는 종종 네트워크 요청이나 데이터베이스 작업과 결합된다.
따라서, 비동기 처리 패턴을 일관되게 유지하는 것이 중요하다.

✅ ViewModel에서 Coroutine 또는 Flow를 활용하면 비동기 이벤트 처리를 효율적으로 할 수 있다.

 

UI 이벤트 처리 패턴

안드로이드에서는 UI 이벤트를 처리하기 위해 여러 가지 패턴을 사용할 수 있다.
그중에서도 대표적인 두 가지 패턴은 다음과 같다.

 

1. 상태 기반 패턴 (State-based Pattern)

이 패턴에서는 UI 상태를 나타내는 데이터 클래스를 만들고, 이를 기반으로 UI 렌더링한다. (렌더링 = 그려짐)

UI에서 실행해야 하는 작업이 아니라 이러한 작업이 UI 상태에 미치는 영향을 생각해 보며 모델링 해야한다.

핵심사항 : ViewModel 이벤트는 항상 UI 업데이트로 이어진다.

 

📌 구성 요소

• UIState: UI의 상태를 나타내는 데이터 클래스
• ViewModel: UI 상태를 관리하며 이벤트를 처리하여 상태를 변경
• Composable: 상태를 받아 UI를 그리는 역할

📌 예제 코드 (Jetpack Compose)

data class UiState(val count: Int = 0)

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

    fun increment() {
        _uiState.value = _uiState.value.copy(count = _uiState.value.count + 1)
    }
}

@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()

    Column {
        Text("Count: ${uiState.count}")
        Button(onClick = { viewModel.increment() }) {
            Text("Increment")
        }
    }
}

📌 특징

• UI 상태가 변경될 때만 화면이 갱신됨
• 상태 변화를 추적하기 쉬움
• 테스트가 용이함

🚨 주의할 점

• 상태 클래스가 복잡해질 수 있음 → 상태를 적절히 분리하여 관리해야 함

 

2. 이벤트 스트림 패턴 (Event Stream Pattern)

이 패턴에서는 이벤트를 스트림 형태로 관리하여 독립적으로 처리한다.
보통 Flow 또는 LiveData를 활용하여 구현된다.

📌 구성 요소

• SharedFlow 또는 Channel을 사용하여 이벤트를 스트림으로 관리
• 이벤트를 처리하는 별도의 로직 유지

📌 예제 코드 (SharedFlow 사용)

class EventViewModel : ViewModel() {
    private val _events = MutableSharedFlow<UiEvent>()
    val events = _events.asSharedFlow()

    fun onButtonClick() {
        viewModelScope.launch {
            _events.emit(UiEvent.ShowToast("버튼이 클릭됨"))
        }
    }
}

sealed class UiEvent {
    data class ShowToast(val message: String) : UiEvent()
}

@Composable
fun EventScreen(viewModel: EventViewModel = viewModel()) {
    val context = LocalContext.current
    LaunchedEffect(Unit) {
        viewModel.events.collect { event ->
            when (event) {
                is UiEvent.ShowToast -> Toast.makeText(context, event.message, Toast.LENGTH_SHORT).show()
            }
        }
    }

    Button(onClick = { viewModel.onButtonClick() }) {
        Text("Click Me")
    }
}

 

📌 특징

• 이벤트가 독립적으로 처리됨
• UI 상태와 이벤트를 분리할 수 있음
• 비동기 이벤트 관리에 유리

🚨 주의할 점

• 이벤트가 누락되지 않도록 신중하게 관리해야 함
• 이벤트가 여러 개 발생할 경우 순서를 고려해야 함

 

UI 이벤트 처리에서 권장되는 방법

• ViewModel을 활용한다.
  • UI 로직과 데이터를 ViewModel에서 관리하면, 수명 주기와 무관하게 상태를 유지할 수 있다.
• 상태 호이스팅(State Hoisting)을 적용한다.
  • 상태를 상위 컴포넌트로 끌어올려 UI의 재사용성을 높이고, 상태 관리 로직을 단순화한다.
• 단일 진실의 원천(Single Source of Truth)을 유지한다.
  • 상태를 여러 곳에서 관리하지 않고, 하나의 ViewModel 또는 Repository에서 관리하여 데이터 일관성을 유지한다.
• 이벤트를 UI 상태와 분리한다.
  • 이벤트(클릭, 입력 등)는 SharedFlow 같은 별도의 스트림으로 관리하고, UI 상태와 혼합하지 않도록 해야 한다.
• 비동기 이벤트 처리를 명확하게 해야한다.
  • Coroutine, Flow, LiveData를 활용하여 비동기 이벤트를 효과적으로 관리한다.

 

결론

안드로이드 앱에서 UI 이벤트를 처리할 때는 명확한 원칙과 패턴을 따르는 것이 중요하다.

• 단방향 데이터 흐름을 유지하고,
• 이벤트와 상태를 분리하며,
• 비동기 이벤트를 일관되게 처리하면

보다 견고하고 유지보수하기 쉬운 앱을 개발할 수 있다.