[G1-Sync] Manual knowledge update

10_Wiki/Topics/Coding/Android_Compose_State_Hoisting.md

@@ -0,0 +1,111 @@
+---
+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]]