Jetpack Compose mutableStateOf 사용 방법 (remember, by, 코틀린 구조 분해)

remeber mutableStateOf 사용방식 3가지에 대해서 알아보자.

1. remember
2. by remember
3. (T, T) = remember

먼저 remember는 말 그대로 기억하겠다는 것이다.

예를 들어, 세로모드 또는 가로모드로 디바이스를 돌렸을 때 Composable은 ReComposition이 발생한다.

이 때, remeber로 선언된 변수는 초기화가 되지 않고 이전 값을 그대로 보여주게 된다.

 

1. remember

- 일반적으로 사용하는 방식이다. v1.value를 이용해 get, set을 할 수 있다.

val v1 = remember { mutableStateOf(false) }

//set
v1.value = true

//get
Text(text = "${v1.value}")

 

2. by remember

- MutableState의 value에 대해 getValue()와 setValue() 기능을 위임 받겠다는 뜻이다.

- 일반 변수처럼 get, set을 할 수 있다.

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

var v2 by remember { mutableStateOf(true) }

//set
v2 = false

//get
Text(text = "$v2")

 

3. 코틀린 구조 분해

- MutableState 내부구조를 보면 operator fun 함수가 2개가 있다.

- component1()은 value를 get하는 방식이다.

- component2()는 value에 값을 set하는 방식이다.

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

val (isVisible, setVisible) = remember { mutableStateOf(false) }
Button(onClick = {
    //set
    setVisible(!isVisible)
}) {
    //get
    Text(text = "$isVisible")
}

- 값을 읽을 때는 isVisible 그대로 사용한다.

- 값을 쓸 때는 setVisible(T)를 사용한다.

 

4. 결과

3가지 방식 모두 동일한 결과를 가진다. 때에 따라 입맛에 맞게 사용하면 되겠다.