2nd/10_Wiki/Topics/Coding/Android_Compose_State_Hoisting.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
android-compose-state-hoisting	Jetpack Compose — State Hoisting	Coding	draft	B	conceptual	2026-05-09	2026-05-09	android compose state-hoisting vibe-coding	language applicable_to Kotlin / Jetpack Compose Android		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

@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

@Composable
fun PriceWidget() {
    var price by rememberSaveable { mutableStateOf(0) }
    Row {
        PriceSlider(value = price, onValueChange = { price = it })
        PriceLabel(value = price)
    }
}

rememberSaveable — config change 에 보존

var query by rememberSaveable { mutableStateOf("") }
// 화면 회전 시에도 유지 (Bundle 자동 복원)

복잡 state — Holder 패턴

@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 만 노출.
• 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