rememberSaveable 에는 배열 넣으면안되나요?

Question

@Composable
fun Greeting() {
    var mem by rememberSaveable { mutableStateOf(Array(5){0})}

    var context = LocalContext.current
    var i = 0

    Column() {
        while (i != 4) {
            if (mem[i] == 0) {
                Card(modifier = Modifier.padding(15.dp)) {
                    Box(
                        modifier = Modifier
                            .padding(15.dp)
                            .clickable {
                                mem[i] = 1
                            }
                    ) {
                        Text(
                            text = "Hello",
                            color = Color.Red
                        )
                    }
                }
            } else {
                Card(modifier = Modifier.padding(15.dp)) {
                    Box(
                        modifier = Modifier
                            .padding(15.dp)
                            .clickable {
                                mem[i] = 0
                            }
                    ) {
                        Text(
                            text = "Hello",
                            color = Color.White
                        )
                    }
                }
            }
            i++
        }
    }
}

 

----------

Hello 글자를 클릭하면 빨간색에서 흰색으로 변하게 만들엇습니다

근데 rememberSavable 에 배열대신 정수같은걸 넣어서 하면 잘되는데 배열로하면 배열 값은 들어가는데

색상은 안변합니다

Answer 1

mutableState대신에 mutableStateListOf 를 사용하세요. 님과 같이 mutable한 데이터타입(Array)을 Composable 안에서 직접 사용하시면 컴포즈는 데이터가 변경되었는지 알지 못합니다. 이런이유로 mutableStateOf, mutableStateListOf와 같은 함수를 별도로 제공하는 겁니다. 그리고 컴포즈에서 리스트를 다루신다면 아래 링크를 필독하시기 바랍니다.

https://developer.android.com/develop/ui/compose/performance/stability/fix

Answer 2

그리고 아래처럼 분리를 하시면 코드가 눈에 더 쉽게 들어오실 겁니다.

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.foundation.layout.Column

@Composable
fun Greeting() {
    var textColors by rememberSaveable { mutableStateListOf(*(0..4).map { Color.Red }.toTypedArray()) }

    Column {
        textColors.forEachIndexed { index, textColor ->
            GreetingCard(
                id = index,
                text = "Hello",
                textColor = textColor
            ) { idx ->
                textColors[idx] = if (textColor == Color.Red) Color.White else Color.Red
            }
        } 
    }
}

// LazyColumn version
@Composable
fun GreetingLazy() {
    var textColors by rememberSaveable { mutableStateListOf(*(0..4).map { Color.Red }.toTypedArray()) }

    LazyColumn {
        itemsIndexed(textColors) { index, textColor ->
            GreetingCard(
                id = index,
                text = "Hello",
                textColor = textColor
            ) { idx ->
                textColors[idx] = if (textColor == Color.Red) Color.White else Color.Red
            }
        }
    }
}

@Composable
fun GreetingCard(id: Int, text: String, textColor: Color, onClick: (Int) -> Unit) {
    Card(modifier = Modifier.padding(15.dp)) {
        Box(
            modifier = Modifier
                .padding(15.dp)
                .clickable {
                    onClick(id)
                }
        ) {
            Text(
                text = "Hello",
                color = textColor
            )
        }
    }
}

 

Comments

var textColors by rememberSaveable { mutableStateListOf(*(0..4).map { Color.Red }.toTypedArray()) }
 
부분에서 에러나는데요?

---

mutableStateList는 rememberSavable에서 지원하지 않는 타입이네요. 아래처럼 rememberSavable에 커스텀 Saver를 사용하는 방법을 시도해 보세요.
val textColors = rememberSaveable(
        saver = Saver(
            save = { it.toList() }, // Save the MutableStateList as a List
            restore = { it.toMutableStateList() } // Restore it back to a MutableStateList
        )
    ) {
        (0..4).map { Color.Red }.toMutableStateList()
    }

참고로, 실제 앱에서 사용하는 코드는 rememberSaeable 대신에 거의 대부분은 ViewModel을 사용해서 뷰상태를 저장합니다.