[Compose] State를 알아보자

Compose에서는 Composable로 화면을 표현한다. 또한 State를 통해서 데이터 변경을 감지하고 Recomposition을 실행함으로써 화면을 재구성 하게 된다.

관찰 가능한 상태 객체를 우리는 mutableStateOf()을 통해서 생성하게 된다.

@Compose
fun view(){
 var isTrue = false
 ...
}

만약 위와 같이 일반 자료형을 사용하게 되면 Compose가 추적할수 없어서 데이터 변경으로 인해 뷰 변화가 일어나지 않는다.
mutableStateOf을 한번 뜯어보면서 내부 동작을 확인해 보자.

✏ mutableStateOf

---

fun <T> mutableStateOf(
    value: T,
    policy: SnapshotMutationPolicy<T> =structuralEqualityPolicy()
): MutableState<T> =createSnapshotMutableState(value, policy)

mutableStateOf은, value와 policy를 받아 SnapshotMutableState를 생성하게 되면서 MutableState 인터페이스의 구현체가 된다.

• SnapshotMutableState로 생성하게 되면, RecomposeScope는 value의 변경사항을 구독하면서 변경될 때 마다 Recompose를 예약하게 된다.
  
  
  

✏ mutableState, State

---

@Stable
interface MutableState<T> : State<T> {
    override var value: T
    operator fun component1(): T
    operator fun component2(): (T) -> Unit
}

@Stable
interface State<out T> {
    val value: T
}

State 인터페이스는, 읽기만 가능한 상수(val) value가 선언되어 있어서, 값을 변경할 수가 없다.

MutableState 인터페이스는 State에서 val로 선언되어 있던 value를 변수(var) 로 선언하게 되면서 변경 가능한 값이 된다.

✏ 구조 분해

---

MutableState는 구조 분해 구문을 사용하고 있는데, operator라는 연산자 오버로딩을 사용한다. operator fun componentN() 로 반환할 멤버나 람다식을 구현하게 되면 1부터 N번째 까지 구조 분해를 했을 때 순서대로 할당이 된다.

💡 val (value, setValue) = MutableStateOf(””)

위와 같이 분리 선언된 코드를 컴파일 하게 되면 아래 코드가 된다.

💡 val value = person.component1() val setValue = person.comonent2()

객체를 여러 변수로 분리하길 원할 때, 구조 분해 구문을 사용하게 되면 여러 개의 변수로 생성할 수 있다. 위의 예제에서는 Getter와 Setter를 생성하면서 객체를 생성하고 있다.