[Compose] 상태 호이스팅 (State Hoisting)

안드로이드 Compose에서 상태 호이스팅(State Hoisting)은 상태(State)를 컴포저블(Composable) 밖으로 끌어올려 더 높은 레벨에서 관리하게 하는 패턴입니다. 이는 컴포저블을 더 재사용 가능하고 테스트하기 쉽게 만들어 줍니다.

 

간단한 버튼을 눌러 텍스트를 변경하는 예제를 통해 상태 호이스팅을 이해해보겠습니다.

여기서는 텍스트의 State를 상위 컴포저블로 끌어올려 관리하도록 하겠습니다.

 

@Composable
fun TextHoisted() {
    var text by remember { mutableStateOf("state") }

    // 상태와 상태를 변경하는 함수(onTextChange)를 하위 컴포저블에 전달
    TextToggleContent(
    	text = text, 
        onTextChange = { newText -> text = newText }
    )
}

@Composable
fun TextContent(text: String, onTextChange: (String) -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = text)
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { onTextChange(if (text == "state") "hosting" else "state") }) {
            Text("Toggle")
        }
    }
}

 

• TextHoisted 컴포저블은 text 상태를 관리하고, text와 onTextChange 콜백을 하위 컴포저블인 TextContent에 전달합니다.
• TextContent는 상태를 직접 관리하지 않고, 전달받은 text와 onTextChange 콜백을 사용합니다.
• 버튼을 클릭하면 onTextChange 콜백을 호출하여 상위 컴포저블의 상태를 변경합니다.

이렇게 상태를 호이스팅하면 상태 관리와 UI 렌더링을 분리할 수 있어 코드의 가독성과 재사용성이 향상됩니다.

---

Stateful? Stateless?

 

TextHoisted 컴포저블은 상태를 관리하기 때문에 Stateful 컴포저블입니다.

반면에 TextContent 컴포저블은 상태를 직접 관리하지 않고, 상태와 상태를 변경하는 콜백을 인자로 받아서 사용하기 때문에 Stateless 컴포저블입니다.

 

TextHoisted 컴포저블은 상태(text)를 보유하고 있으며, 이를 관리합니다.

또한, 상태를 변경하는 로직(onTextChange)도 포함하고 있습니다.

 

TextContent 컴포저블은 상태를 직접 관리하지 않고, 상태(text)와 상태를 변경하는 콜백 함수(onTextChange)를 외부로부터 인자로 받습니다. 이로 인해 상태와 UI 로직이 분리되어 재사용성이 높아집니다.