0Pricing
Kotlin Academy · 강의

봉인 클래스로 UI 상태 모델링하기

봉인 클래스를 적용해 로딩, 성공 및 오류 UI 상태를 표현해 보세요.

봉인 클래스로 UI 상태 모델링하기은(는) CoddyKit의 무료 Kotlin Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Kotlin Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Kotlin Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

UI 상태 문제

UI 화면에는 로딩 중, 데이터 표시 중, 오류 표시 중, 비어 있음 등 여러 상태가 있습니다. 이를 isLoading, hasError 같은 불리언으로 관리하면 취약해집니다. 봉인 클래스가 이 문제를 해결합니다.

고전적인 불리언 지옥

불리언을 따로 사용하면 존재할 수 없는 상태가 만들어집니다.
// Fragile: isLoading=true AND hasError=true is invalid
var isLoading = false
var hasError = false
var data: List<Item>? = null
// 8 combinations, most of which are invalid!

봉인 상태: 유효한 상태만 허용하기

봉인 클래스를 사용하면 유효하지 않은 상태를 표현할 수 없게 됩니다.
sealed class UiState<out T>
object Loading : UiState<Nothing>()
data class Success<T>(val data: T) : UiState<T>()
data class Error(val message: String, val retryable: Boolean = true) : UiState<Nothing>()
object Empty : UiState<Nothing>()

상태에 따른 렌더링

각 상태에 맞는 UI를 표시하려면 when을 사용합니다.
fun render(state: UiState<List<Item>>) = when (state) {
    Loading -> showProgressBar()
    is Success -> showItems(state.data)
    is Error -> showError(state.message, state.retryable)
    Empty -> showEmptyView()
}

상태를 내보내는 ViewModel

ViewModel은 StateFlow를 통해 봉인 상태를 내보냅니다.
class ItemViewModel : ViewModel() {
    private val _state = MutableStateFlow<UiState<List<Item>>>(Loading)
    val state: StateFlow<UiState<List<Item>>> = _state

    fun loadItems() = viewModelScope.launch {
        _state.value = Loading
        _state.value = try {
            Success(repository.getItems())
        } catch (e: Exception) {
            Error(e.message ?: "Unknown error")
        }
    }
}

내용을 포함한 상태 구성

어떤 데이터 타입이든 처리하려면 제네릭 봉인 상태를 사용합니다.
fun <T> loading(): UiState<T> = Loading
fun <T> success(data: T): UiState<T> = Success(data)
fun <T> error(msg: String): UiState<T> = Error(msg)

페이지 단위 목록 상태 예제

봉인 클래스는 페이지 단위로 나뉜 목록의 상태를 자연스럽게 모델링합니다.
sealed class PageState
object Idle : PageState()
object FirstLoad : PageState()
data class Content(val items: List<Item>, val hasMore: Boolean) : PageState()
data class LoadingMore(val items: List<Item>) : PageState()
data class Error(val items: List<Item>?, val msg: String) : PageState()

상태 변환하기

다른 경우는 건드리지 않고 성공한 상태만 매핑합니다.
fun <T, R> UiState<T>.mapData(transform: (T) -> R): UiState<R> = when (this) {
    is Success -> Success(transform(data))
    is Error -> this
    Loading -> Loading
    Empty -> Empty
}

봉인 상태 테스트

어떤 변형이 내보내졌는지만 확인하면 되므로 상태를 쉽게 테스트할 수 있습니다.
@Test
fun testLoadingState() {
    viewModel.loadItems()
    assertEquals(Loading, viewModel.state.value)
}
@Test
fun testSuccessState() {
    viewModel.setData(listOf(item))
    assert(viewModel.state.value is Success)
}

통합 상태와 여러 흐름 비교

서로 동기화해야 하는 여러 개의 개별 흐름보다 하나의 봉인 상태 흐름이 더 깔끔합니다.
// Fragile: two flows must stay in sync
val loading = MutableStateFlow(false)
val error = MutableStateFlow<String?>(null)

// Clean: one sealed state
val state = MutableStateFlow<UiState<List<Item>>>(Loading)

상태에 메타데이터 추가하기

봉인 하위 타입은 관련 메타데이터를 포함할 수 있습니다.
data class Error(
    val message: String,
    val code: Int = 0,
    val retryable: Boolean = true,
    val timestamp: Long = System.currentTimeMillis()
) : UiState<Nothing>()

빠른 확인

봉인 클래스로 UI 상태를 모델링하면 어떤 핵심 문제를 해결할 수 있습니까?

복습

봉인 클래스로 UI 상태를 모델링합니다: Loading, Success(data), Error(message), Empty. 각 경우를 표시하려면 when을 사용합니다. 봉인 타입 하나를 사용하는 StateFlow 하나가 여러 불리언 플래그보다 낫습니다. 다음 주제는 봉인 계층 구조 중첩입니다!

자주 묻는 질문

“봉인 클래스로 UI 상태 모델링하기” 강의는 무료인가요?

네 — “봉인 클래스로 UI 상태 모델링하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Kotlin Academy 강의 전체를 잠금 해제할 수 있습니다. Kotlin Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“봉인 클래스로 UI 상태 모델링하기”에서 뭘 배우나요?

봉인 클래스를 적용해 로딩, 성공 및 오류 UI 상태를 표현해 보세요. 브라우저에서 직접 실행하는 실습 코드로 Kotlin Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Kotlin Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Kotlin Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“봉인 클래스로 UI 상태 모델링하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Kotlin Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Kotlin Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. sealed class와 sealed interface: 각각 언제 사용할까요
  2. 봉인 계층 구조와 함께 사용하는 완전한 when
  3. 봉인 클래스로 UI 상태 모델링하기
  4. 봉인 계층 구조 중첩하고 결합하기
← Kotlin Academy(으)로 돌아가기