Android Academy · 강의

ViewModel에서 상태 노출하기

ViewModel로 Compose UI를 구동해 보세요.

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

UI에 상태 노출하기

ViewModel은 상태를 보유하지만 UI는 상태를 관찰하고 상태가 변경될 때 다시 렌더링할 방법이 필요합니다.

현대적인 Android에서는 이를 위해 StateFlow와 Compose State라는 두 가지 도구를 흔히 사용합니다.

변경 가능 상태와 변경 불가 상태 패턴

권장 방법은 비공개 변경 가능 백업 속성을 유지하고 공개 읽기 전용 버전을 노출하는 것입니다.

이렇게 하면 UI가 실수로 상태를 직접 변경하는 것을 막을 수 있습니다.

StateFlow로 노출하기

내부에서는 MutableStateFlow를 사용하고, 읽기 전용 StateFlow로 노출하세요.

class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()

    fun increment() {
        _count.value++
    }
}

Compose에서 StateFlow 수집하기

Composable은 collectAsState()를 사용하여 흐름을 Compose 상태로 변환합니다(수명 주기를 인식하는 변형은 뒤에서 다룹니다).

@Composable
fun CounterScreen(vm: CounterViewModel) {
    val count by vm.count.collectAsState()
    Text("Count: " + count)
}

StateFlow에 초기값이 필요한 이유

StateFlow에는 항상 현재 값이 있습니다. 따라서 생성할 때 초기값을 지정해야 합니다.

새 수집자는 즉시 최신 값을 받으며, 비어 있는 흐름을 받는 일은 없습니다.

대안: Compose mutableStateOf

ViewModel 내부에서 화면에만 사용하는 단순한 상태에는 Compose의 mutableStateOf를 사용할 수도 있습니다. Compose가 이 상태를 자동으로 관찰합니다.

class CounterViewModel : ViewModel() {
    var count by mutableStateOf(0)
        private set

    fun increment() { count++ }
}

StateFlow와 Compose State 비교

StateFlow는 Kotlin 코루틴의 일부이며 Compose뿐 아니라 어디서든 사용할 수 있습니다. 공유되는 수명 주기 인식 흐름에 적합합니다.
mutableStateOf는 Compose 전용이며 매우 간결합니다.

대규모 앱의 ViewModel에는 일반적으로 StateFlow를 더 선호합니다.

하나의 객체로 화면 상태 모델링하기

여러 개의 흐름으로 나누는 대신 관련 필드를 하나의 UI 상태 데이터 클래스로 묶으세요. 이렇게 하면 업데이트가 원자적으로 이루어지고 예측하기 쉬워집니다.

data class ProfileUiState(
    val name: String = "",
    val isLoading: Boolean = false,
    val error: String? = null
)

UI 상태 객체 노출하기

해당 상태 클래스의 StateFlow 하나를 노출하세요. UI는 하나의 진실 공급원에서 모든 값을 읽습니다.

private val _uiState = MutableStateFlow(ProfileUiState())
val uiState: StateFlow<ProfileUiState> =
    _uiState.asStateFlow()

변경 불가능한 상태 업데이트

기존 객체를 직접 변경하지 말고, 변경된 필드를 포함한 복사본을 만들어 상태를 업데이트해야 합니다.

fun load() {
    _uiState.update { it.copy(isLoading = true) }
    // ... fetch, then:
    _uiState.update {
        it.copy(isLoading = false, name = "Ada")
    }
}

이벤트는 위로, 상태는 아래로 흐릅니다

이것이 단방향 데이터 흐름의 핵심입니다.

상태는 ViewModel에서 UI로 아래로 흐릅니다.
이벤트는 함수 호출을 통해 UI에서 ViewModel로 위로 흐릅니다.

빠른 확인

상태를 노출하는 방법을 제대로 이해했는지 확인해 보세요.

복습

다음 내용을 배웠습니다.

비공개 MutableStateFlow를 유지하고 읽기 전용 StateFlow를 노출합니다.
서로 관련된 필드를 UI 상태 데이터 클래스로 묶습니다.
update {}를 통해 copy()로 업데이트합니다.
상태는 아래로 흐르고 이벤트는 위로 흐릅니다.

자주 묻는 질문

“ViewModel에서 상태 노출하기” 강의는 무료인가요?

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

“ViewModel에서 상태 노출하기”에서 뭘 배우나요?

ViewModel로 Compose UI를 구동해 보세요. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“ViewModel에서 상태 노출하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Android Academy(으)로 돌아가기