UIState의_필요성 - boostcampwm-2024/and04-Nature-Album GitHub Wiki

💥 트러블 슈팅 제목

문제 정의

Album Folder에서 매개변수로 전달 받은 Label ID를 통해 데이터를 불러와 UI에 보여주는 과정에서 발생한 문제

초기 화면 구성 때(ViewModel에서 통신하기 이전) 데이터는 모두 빈 값인 상태에서 Label 색상에 대한 parseColor 부분에서 오류가 났다.

parseColor("#${label.value.backgroundColor}")

당연히 # 하나만 parseColor를 하려하니 오류가 나는 것이 당연했다.

문제 해결 방법

ViewModel에서 데이터를 불러오는 동안 UI를 그리지 않고 대기하다가 데이터가 왔을 때 UI를 그려줘야 했다.

가장 보편적으로 사용되는 방법인 UiState를 통해 데이터를 불러오는 동안은 Loading, 데이터를 성공적으로 불러왔을 때 Succss를 통해 쉽게 해결이 가능했다.

문제 해결 진행

추후에 수정될 수도 있지만 일단은 간단하게 구현한 방법은 다음과 같다.

sealed class UiState {
    data object Idle : UiState()
    data object Loading : UiState()
    data object Success : UiState()
}

class MyViewModel  : ViewModel() {
    private val _uiState = MutableStateFlow<UiState>(UiState.Idle)
    val uiState: StateFlow<UiState> = _uiState
    
    
		fun loadData(){
			viewModelScope.launch {
				_uiState.emit(UiState.Loading)
				
				...
				
				_uiState.emit(UiState.Success)
			}
		}    
}

이후 UI 부분에서 위의 uiState를 collect하여 Success일 때 UI를 그려주도록 했다.

when (uiState.value) {
    is UiState.Idle, UiState.Loading -> {
        //TODO Loading
    }

    is UiState.Success -> {
        //TODO UI
    }
}

결과

문제 해결

⚠️ **GitHub.com Fallback** ⚠️