상태 관리와 UIState

💡우아한테크코스 과정에서 적관용한 상태 관리와 UIState에 대하여 정리하였습니다.

 

상태 관리

• UIState는 상태를 저장하고 관리하는 패턴을 활용하는 중요한 개념입니다.

Android에서 애플리케이션에서 UI 및 데이터를 관리하는 중요한 개념입니다. 특히 MVVM 패턴이나 Jetpack Compose 등에서 상태 관리는 필수적인 요소이며, 이를 통해 UI가 일관성 있게 데이터를 반영하고 사용자의 액션에 따라 동적으로 업데이트 할 수 있습니다.

State ManageMent

• 안드로이드 애플리케이션은 사용자 인터페이스가 아래와 같이 다양한 상태를 가질 수 있습니다.
  • Loading
  • Success
  • Error
  • Init
• UI 상태를 나타내는 클래스나 상태 객체를 활용하면 UI와 ViewModel이 상호작용하여 상태에 따른 UI를 갱신할 수 있습니다.

UI State 패턴

• 각 상태를 명시적으로 정의하고, 이를 통해 UI가 어떤 상태에 있는지 확인할 수 있습니다.

Sealed interface

• Sealed interface와 Data Object만을 활용해서 UI State를 구현할 수 있습니다.

sealed interface ClubListUiState {
    data object Init : ClubListUiState

    data object NotData : ClubListUiState

    data object NotAddress : ClubListUiState

    data object Error : ClubListUiState
}

• sealed interface를 활용한 상속채를 구현하고, 분기 처리를 통해서 각 상황에 맞는 UI를 대응합니다.

viewModel.uiState.observe(viewLifecycleOwner) { state ->
    when (state) {
        ClubListUiState.Init -> applyViewVisibility(binding.includeClubList.rcvClubListClub)

        ClubListUiState.NotAddress -> applyViewVisibility(binding.includeClubAddress.linearLayoutClubNotAddress)

        ClubListUiState.NotData -> applyViewVisibility(binding.includeClubData.linearLayoutClubNotData)

        ClubListUiState.Error -> applyViewVisibility(binding.includeClubError.linearLayoutClubError)
    }
}

• sealed Interface와 data object를 활용하면 상황에 맞는 뷰를 업데이트하는 장점이 있지만, 데이터를 전달하고 관리하기 어렵습니다.
• 이를 해결하기 위해서 Sealed Class와 data Class를 함께 활용할 수 있습니다.

Sealed Class

• sealed Class는 data Class와 함께 사용하여 상태를 객체로 관리할 수 있습니다.
• Sealed Class로 UI 상태를 정의하면 상태에 맞는 값을 저장할 수 있습니다.

sealed class UIState<out T> {
    object Loading : UIState<Nothing>()
    data class Success<out T>(val data: T) : UIState<T>()
    data class Error(val exception: Throwable) : UIState<Nothing>()
    object Empty : UIState<Nothing>()
}

• 각 상태에 맞는 값을 저장하고, 상태 변화 시 View로 data를 전달할 수 있습니다.

ViewModel 활용

• ViewModel에서 LiveData나 StateFlow를 사용하여 생성한 UIState를 관리할 수 있습니다.
• 이를 통해서 사용자의 액션에 따라 데이터를 로드하고, UIState를 업데이트할 수 있습니다.

class MyViewModel : ViewModel() {
    private val _uiState = MutableLiveData<UIState<List<String>>>()
    val uiState: LiveData<UIState<List<String>>> get() = _uiState

    fun fetchData() {
        _uiState.value = UIState.Loading
        viewModelScope.launch {
            try {
                val data = repository.getData()  // 데이터 로드
                if (data.isEmpty()) {
                    _uiState.value = UIState.Empty
                } else {
                    _uiState.value = UIState.Success(data)
                }
            } catch (e: Exception) {
                _uiState.value = UIState.Error(e)
            }
        }
    }
}

UI에서 상태 렌더링

• UI 에서 ViewModel이 관리하는 UIState를 구독하여 상태에 따라 UI를 업데이트할 수 있습니다.

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

    when (uiState) {
        is UIState.Loading -> {
            // 로딩 화면 표시
            CircularProgressIndicator()
        }
        is UIState.Success -> {
            // 데이터가 성공적으로 로드되었을 때
            val data = (uiState as UIState.Success).data
            Text("Data: $data")
        }
        is UIState.Empty -> {
            // 데이터가 없을 때
            Text("No data available.")
        }
        is UIState.Error -> {
            // 에러 발생 시
            val error = (uiState as UIState.Error).exception
            Text("Error: ${error.message}")
        }
    }
}

• 로딩 성공, 실패, 완료 등 다양한 상태에 따라 UI가 렌더링 됩니다.

상태 관리의 중요성

• UIState는 앱에서 다양한 상태를 관리하고, 그 상태에 따라 UI를 동적으로 변화시킬 수 있도록 도와주는 중요한 패턴입니다.
• Android에서는 ViewModel과 LiveData, StateFlow를 사용하여 이러한 상태를 관리하고 UI가 이를 구독하도록 하여 적절한 화면을 렌더링할 수 있습니다.

일관성 있는 UI 제공

• 앱의 상태 변화에 따라 일관되게 UI를 갱신할 수 있습니다.

유지보수성

• 각 상태에 대한 처리가 분리되어 있으므로 코드가 더 읽기 쉽고 유지보수하기 쉬워집니다.

버그 방지

• 상태에 따라 UI를 명시적으로 처리함으로써 오류, 빈 List 등의 예외적인 경우를 쉽게 처리할 수 있습니다.