06. Kotlin-MutableState

MutableState의 사용 방법을 구문별로 쉬운 예시를 들어 설명하겠습니다.

1. remember와 함께 사용하기

@Composable
fun CounterExample() {
    val countState = remember { mutableStateOf(0) }
    val count = countState.value

    Column {
        Text("Count: $count")
        Button(onClick = { countState.value++ }) {
            Text("Increment")
        }
    }
}

• remember { mutableStateOf(0) }: 초기값이 0인 MutableState 객체를 생성하고 이를 countState 변수에 할당합니다. remember를 사용하여 countState가 재구성 시에도 유지되도록 합니다.[1][2][4]
• countState.value: MutableState 객체에 저장된 값을 가져옵니다. 처음에는 0이 반환됩니다.[1][4]
• countState.value++: MutableState 객체에 저장된 값을 1 증가시킵니다. 버튼을 클릭할 때마다 값이 증가합니다.[1][4]

2. 구조 분해 사용하기

@Composable
fun CounterExample() {
    val (count, setCount) = remember { mutableStateOf(0) }

    Column {
        Text("Count: $count")
        Button(onClick = { setCount(count + 1) }) {
            Text("Increment")
        }
    }
}

• val (count, setCount) = remember { mutableStateOf(0) }: 구조 분해를 사용하여 MutableState 객체의 value와 setValue 함수를 각각 count와 setCount 변수에 할당합니다.[2][3]
• setCount(count + 1): setCount 함수를 호출하여 count 값을 1 증가시킨 새로운 값으로 MutableState 객체를 업데이트합니다. 버튼을 클릭할 때마다 값이 증가합니다.[2][3]

3. by 키워드 사용하기

@Composable
fun CounterExample() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text("Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

• var count by remember { mutableStateOf(0) }: by 키워드를 사용하여 MutableState 객체를 count 변수에 직접 할당합니다. remember를 통해 재구성 시에도 상태가 유지됩니다.[3]
• count++: count 변수에 직접 증가 연산자를 사용하여 값을 1 증가시킵니다. 버튼을 클릭할 때마다 값이 증가합니다.[3]

이처럼 MutableState는 remember와 함께 사용하거나, 구조 분해 또는 by 키워드를 통해 상태를 관리할 수 있습니다. 상태가 변경되면 Compose가 자동으로 UI를 다시 렌더링하여 변경 사항을 반영합니다.[1][2][3][4]

Citations:
[1] https://kotlinworld.com/208
[2] https://developer88.tistory.com/entry/mutableStateOf-%EC%99%80-MutableStateFlow-%EB%B9%84%EA%B5%90-%EC%B4%9D%EC%A0%95%EB%A6%AC-collectAsState
[3] https://heegs.tistory.com/122
[4] https://doojuns-ordinary.tistory.com/m/116
[5] https://dev-inventory.com/42