Kotlin Multiplatform Academy · 강의

공유 UI의 상태와 재구성

공유 StateFlow로 Compose를 구동합니다

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

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

UI Is a Function of State

In Compose your screen is drawn from state. When the state changes, Compose redraws only the parts that depend on it. You never mutate views by hand.

Recomposition Explained

That automatic redraw is called recomposition. Compose re-runs the affected composables with the new values and updates the screen for you.

Remember Local State

For state owned by a composable, use remember with mutableStateOf so the value survives recomposition instead of resetting every frame.

val count = remember { mutableStateOf(0) }

Read and Write State

Wrap the value in by to read and write it like a normal variable. Reading it subscribes the composable, so writing triggers a redraw.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: " + count)
}

Hoist State Upward

Move state to the lowest common parent and pass values down. This hoisting keeps child composables stateless, reusable and easy to test.

@Composable
fun Counter(value: Int, onInc: () -> Unit) {
    Button(onClick = onInc) { Text("" + value) }
}

State Lives in Shared Code

Your real source of truth is the shared layer. A cross-platform StateFlow holds screen state once, far from any platform UI framework.

val uiState: StateFlow<ScreenState> = _state

Collect StateFlow in Compose

Bridge that flow into Compose with collectAsState. The composable observes it and recomposes whenever the shared state emits a new value.

val state by viewModel.uiState.collectAsState()
Text(state.title)

One Source of Truth

Because state flows from shared code into Compose, Android and iOS render the exact same screen from a single source of truth. No drift.

Avoid Side Effects in Composables

A composable can run many times, so never do work like network calls directly in its body. Keep it a pure description and push effects elsewhere.

LaunchedEffect for Side Work

When you must start a coroutine tied to the UI, use LaunchedEffect. It runs once per key and cancels automatically when the composable leaves.

LaunchedEffect(Unit) {
    viewModel.load()
}

Derived and Stable State

Compute values from existing state with derivedStateOf so they recalculate only when their inputs change, keeping recomposition cheap.

Quick Check

What keeps a value across recompositions?

Recap: State Drives the UI

You learned that state drives recomposition, how to remember and hoist it, and how shared StateFlow feeds Compose so both apps render one truth. 🔁

자주 묻는 질문

“공유 UI의 상태와 재구성” 강의는 무료인가요?

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

“공유 UI의 상태와 재구성”에서 뭘 배우나요?

공유 StateFlow로 Compose를 구동합니다 브라우저에서 직접 실행하는 실습 코드로 Kotlin Multiplatform Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“공유 UI의 상태와 재구성” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Kotlin Multiplatform Academy(으)로 돌아가기