---
id: android-compose-state-hoisting
title: Jetpack Compose — State Hoisting
category: Coding
status: draft
source_trust_level: B
verification_status: conceptual
created_at: 2026-05-09
updated_at: 2026-05-09
tags: [android, compose, state-hoisting, vibe-coding]
tech_stack: { language: "Kotlin / Jetpack Compose", applicable_to: ["Android"] }
applied_in: []
aliases: [stateful, stateless, controlled composable]
---

# Compose State Hoisting

> Composable 은 가능한 stateless. state 는 호출자가 보유, **(value, onValueChange) 한 쌍** 으로 주입. 테스트 / 재사용 / preview 모두 쉬워짐. React 의 controlled component 와 같은 철학.

## 📖 핵심 개념
- Stateful: 자기 안에 `remember { mutableStateOf(...) }` 보유.
- Stateless: state 를 외부에서 받음. 같은 입력 = 같은 UI.
- Hoist: state 를 가장 가까운 공통 부모로 끌어올림.

## 💻 코드 패턴

### Stateless + 호출자 hoist
```kotlin
@Composable
fun NameField(
    name: String,
    onNameChange: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    OutlinedTextField(
        value = name,
        onValueChange = onNameChange,
        label = { Text("이름") },
        modifier = modifier,
    )
}

// 호출자
@Composable
fun ProfileScreen(viewModel: ProfileViewModel) {
    val name by viewModel.name.collectAsStateWithLifecycle()
    NameField(name = name, onNameChange = viewModel::onNameChange)
}
```

### 두 컴포저블이 같은 state 공유 → 부모로 hoist
```kotlin
@Composable
fun PriceWidget() {
    var price by rememberSaveable { mutableStateOf(0) }
    Row {
        PriceSlider(value = price, onValueChange = { price = it })
        PriceLabel(value = price)
    }
}
```

### rememberSaveable — config change 에 보존
```kotlin
var query by rememberSaveable { mutableStateOf("") }
// 화면 회전 시에도 유지 (Bundle 자동 복원)
```

### 복잡 state — Holder 패턴
```kotlin
@Stable
class FormState(initial: String = "") {
    var name by mutableStateOf(initial)
    var isValid by derivedStateOf { name.length >= 2 }
}

@Composable
fun rememberFormState(initial: String = "") = remember { FormState(initial) }

@Composable
fun Form() {
    val state = rememberFormState()
    NameField(name = state.name, onNameChange = { state.name = it })
    if (state.isValid) Button(onClick = ...) { Text("제출") }
}
```

## 🤔 의사결정 기준
| 상황 | 패턴 |
|---|---|
| 한 composable 내부 UI state (toggle 펼침 등) | `remember { mutableStateOf }` |
| 두 형제가 같은 state | 부모로 hoist |
| screen 단위 비즈니스 state | ViewModel + StateFlow |
| 화면 회전 보존 | `rememberSaveable` |
| 여러 필드 + 검증 | State Holder 클래스 |

## ❌ 안티패턴
- **모든 state 를 ViewModel 까지 끌어올림**: 작은 toggle 도 viewmodel 행. 가까운 공통 부모로.
- **stateful + props 동시 보유 (`var x by remember(...)` + `prop x`)**: 어느 게 진실?. 한쪽으로.
- **`MutableState` 를 직접 외부 노출**: 캡슐화 깨짐. State<T> 만 노출.
- **rememberSaveable 안에 너무 큰 객체**: Bundle 한계 / TransactionTooLarge crash.
- **Composable 안에서 `LaunchedEffect` 없이 launch**: lifecycle 관리 안 됨.
- **derivedStateOf 안 쓰고 매번 계산**: 불필요 recomposition.

## 🤖 LLM 활용 힌트
- "이 state 가 누구의 것인가? 가장 가까운 공통 부모는?" 매 composable 작성 시 점검.
- ViewModel 은 비즈니스 state, composable 은 UI-local state 만.

## 🔗 관련 문서
- [[Android_Compose_Recomposition_Pitfalls]]
- [[Android_ViewModel_State_Persistence]]