구조 분해와 MutableState

 

이번에 어떤 책을 보면서 다음과 같이 사용하고 있는 것을 보았습니다.

val (value, onValueChanged) = remember { mutableStateOf("") }

 

아마 저만 몰랐을거 같다고 생각하지만, 처음 한 방법이여서 사용법이여서 어떻게 이런식으로 사용하는지에 대해 알아보고자 합니다. 

 

 

구조 분해

---

먼저 구조 분해에 대해 알아보겠습니다. 구조 분해는 객체나 배열 등의 데이터 구조를 분해하여 그 내부의 요소를 여러 변수로 쪼개어 할당하는 방법입니다.

 

data class Person(val name: String, val age: Int)

fun main() {
    val (name, age) = Person("준형", 29)
}

 

 

위와 같은 예시가 있을 때, 다음과 같이 컴파일러가 자동으로 `componentN` 함수를 호출합니다.

val name = person.component1()
val age = person.component2()

 

 

예시로 할 수 있듯 구조 분해를 위해서는 `componentN` 함수가 있어야 합니다. 위의 예시와 같은 Data class의 경우에는 컴파일러가 자동으로 다음과 같은 함수를 자동으로 생성합니다. 물론 직접 구현도 가능합니다.

operator fun component1() = name
operator fun component2() = age

 

 

 

MutableState

---

MutableState의 내부를 보면 `componentN` 함수를 구현하고 있기 떄문에 구조 분해를 할 수 있습니다.

@Stable
public interface MutableState<T> : State<T> {
    override var value: T

    public operator fun component1(): T

    public operator fun component2(): (T) -> Unit
}

 

 

구조 분해를 잘 활용한다면 텍스트 입력을 처리해야 할 경우에는 아래와 같이 매우 간단하게 처리할 수 있습니다.

@Composable
fun SimpleTextFieldExample() {
    val (text, onTextChange) = remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        OutlinedTextField(
            value = text,               
            onValueChange = onTextChange,
            label = { Text("이름을 입력하세요") },
            modifier = Modifier.fillMaxWidth()
        )
    }
}