값 전달과 상태 호이스팅의 차이

값 전달과 상태 호이스팅(State Hoisting)은 컴포넌트 간의 상태 관리를 다루는 두 가지 방식입니다. 두 개념은 비슷해 보일 수 있지만, 실제로는 상태 변경 권한을 누가 가지느냐에 큰 차이가 있습니다. 하나씩 설명하겠습니다.

1. 값 전달 (Value Passing)

• 값 전달은 단순히 상위 컴포넌트에서 값만 자식 컴포넌트로 전달하는 방식입니다.
• 이 방식에서는 자식 컴포넌트가 전달받은 값을 변경할 권한이 없으며, 전달받은 값은 읽기 전용으로 사용됩니다.
• 값 전달은 자식 컴포넌트가 상태를 변경할 필요가 없고, 상위 컴포넌트에서 일방적으로 값만 표시하고자 할 때 유용합니다.

예시

@Composable
fun ParentComponent() {
    val message = "Hello, Compose!"
    ChildComponent(message = message)
}

@Composable
fun ChildComponent(message: String) {
    Text(text = message)
}

• 여기서 message 값은 ParentComponent에서 정의되고, ChildComponent로 전달됩니다.
• ChildComponent는 이 값을 읽기 전용으로 사용하며, message 값을 변경할 수 없습니다.

---

2. 상태 호이스팅 (State Hoisting)

• 상태 호이스팅은 상위 컴포넌트가 상태를 관리하고, 자식 컴포넌트에 상태 값과 함께 상태를 변경할 수 있는 람다 함수를 함께 전달하는 방식입니다.
• 이 방식에서는 자식 컴포넌트가 상위 컴포넌트에 상태 변경을 요청할 수 있습니다. 하지만 실제 상태 변경은 상위 컴포넌트에서만 수행됩니다.
• 상태 호이스팅은 여러 자식 컴포넌트가 동일한 상태를 공유하거나, 상위 컴포넌트가 상태의 일관성을 유지해야 할 때 유용합니다.

예시

@Composable
fun ParentComponent() {
    var sliderPosition by remember { mutableStateOf(24f) }

    // 자식 컴포넌트에 상태와 상태 변경 람다 전달
    MySlider(
        value = sliderPosition,
        onValueChange = { newValue -> sliderPosition = newValue }
    )
}

@Composable
fun MySlider(value: Float, onValueChange: (Float) -> Unit) {
    Column {
        Text(text = "Slider Value: $value")
        Slider(
            value = value,
            onValueChange = onValueChange // 상태 변경 요청
        )
    }
}

• ParentComponent에서 sliderPosition 상태를 정의하고 관리합니다.
• MySlider는 상태 값(value)과 상태를 변경할 수 있는 람다 함수(onValueChange)를 전달받습니다.
• MySlider는 직접 상태를 변경할 권한은 없지만, onValueChange 람다를 호출해 상위 컴포넌트에 상태 변경 요청을 할 수 있습니다.
• 실제 상태 변경은 상위 컴포넌트(ParentComponent)에서 이루어집니다.

---

값 전달 vs. 상태 호이스팅(표)

특성	값 전달	상태 호이스팅
상태 변경 권한	없음 (읽기 전용)	자식이 상위 컴포넌트에 변경 요청 가능
주요 사용 목적	단순히 값 표시	상태를 여러 컴포넌트에서 공유, 상태 일관성 유지
예시	단순히 값 전달 (예: message)	값 + 상태 변경 함수 전달 (예: value, onValueChange)

• 값 전달은 단순히 값을 읽는 용도로만 사용하고 상태 변경이 필요 없을 때 사용합니다.
• 상태 호이스팅은 상위 컴포넌트가 상태를 관리하고, 자식 컴포넌트는 상태 변경 요청만 할 수 있도록 하는 방식입니다.