🌊 UiState Architecture

UiState 라는 sealed interface를 작성하는 것부터 시작합니다. UiState는 (특수한 경우를 제외하고) 각 화면 당 하나씩 존재하며, ViewModel 하단에 작성합니다. 이때 sealed interface는 보통의 경우에 다음과 같은 자식을 갖습니다.

• Success
• Loading
• LoadFailed

sealed interface MyPageUiState {
    data class Success(val userInfo: UserInfo) : MyPageUiState
    data object Loading : MyPageUiState
    data object LoadFailed : MyPageUiState
}

• UserInfo

이제 ContainerHost의 STATE 타입으로 해당 UiState를 지정해줍니다.

class MyPageViewModel(
    ...
) : ContainerHost<MyPageUiState, Nothing>, ViewModel() {
    ...
}

이 UiState를 어떻게 초기화하고, 또는 상태를 업데이트 하는지는 이후에 확인하고, 우선은 위와 같은 UiState를 UI에서 어떻게 활용하는지 알아보겠습니다.

♣️ UiState in Composable

UiState를 쓰지 않는 방식과 마찬가지로, Composable에서 state를 구독하는 것부터 시작합니다.

@Composable
fun MyPageScreen(...) {
    val uiState by viewModel.collectAsState()
    
    MyPageScreenContent(
        uiState = uiState,
        ...
    )
}

다음으로, MyPageScreenContent에서는 넘겨받은 uiState를 분기하여 각 조건에 해당하는 UI를 작성합니다.

@Composable
fun MyPageScreenContent(
    uiState: MyPageUiState,
    modifier: Modifier = Modifier
) {

    ...
    when(uiState) {
        is MyPageUiState.Success -> {
            // 이 안에서는 userInfo 객체를 사용할 수 있음
            ...
        }
        MyPageUiState.Loading -> {
            // 로딩 뷰
        }
        MyPageUiState.LoadFailed -> {
            // 데이터 로드 실패 뷰 (에러)
        }
    }
}