Compose UI Event 다루기

UI Event란???

- UI Layer에서 처리 되어야 하는 작업

- User Event / ViewModel Event 2종류가 존재한다

 

User Event

예를 들어 사용자가 "새로고침 버튼을 누르면 화면의 리스트를 갱신" 한다고 해보자

 

사용자의 행동(새로고침 버튼 누름)으로  UI(화면의 리스트) 갱신하는것은 Business logic에 해당하기 때문에 ViewModel에 위임하여 처리합니다. 

ViewModel Event

예를들면, 네트워크 연결이 끊어졌다는 던가, 데이터를 불러오다가 에러가 발생(새로고침 실패)하였다든가, 하는 상황을 생각해 보자!

이런한 이벤트들은 화면에 알림(toast, dialog 등)을 통하여 표시되어진다.

이벤트는 UI State로 모델링되어야 하며, 항상 UI State를 업데이트 한다.

 

 

1. 요청이 실패하면, 새로운 에러 메세지를 UI State에 반영한다. 

2. errorMessage를 가진 UI State 변화에 따라 UI 변경(toast, dialog 등)

3. UI는 ViewModel에게 메세지가 사라졌음을 알림.

4. errorMessage가 없는 UI State가 반영되여 UI가 그려짐. 

 

 

 

 UI State로 모델링하고, 관찰 가능한 StateFlow에 담아서 노출한다. 

 

새로고침 버튼을 누르면  State를 로딩으로 변경하고, viewModelScope에서 비동기로 비지니로직을 처리한다.

성공을 하면, 데이터를 담고 로딩 아님으로 상태를 변경한다. 

실패를 하면, 에러메세지를 담고 로딩 아님으로 상태를 변경한다. 

error 메세지의 존재 여부에 따라 메세지를 보여주고,  onErrorDismiss를 통해 uiState를 변경한다.