MutableState는 왜? 언제? 어떻게?
Compose를 잘 사용하기 위해서는 State를 잘 다룰줄 알아야된다. 화면에 변화가 일어날 때
즉 State가 변할 때 그에 맞게 UI를 나타내줘야 될 것이다. 그러기 위해서는 상태에 변화를 감지해야된다.
바로 이때 사용되는 것이 MutableState이다. 위에 한 문장으로 왜? 언제? 사용하는 지 답이 됐을 것 같다.
이제 어떻게 사용하는 지 간단하게 알아보자!
우선 MutableState를 사용하는 방식은 총 3가지 방식이 있다.
1. 우선 기본적으로 사용하는 방식이다.
@Composable
fun MainScreen() {
val name = remember { mutableStateOf("우발자")}
TextField(
value = name.value,
onValueChange { text -> name.value = text }
)
}상태에 값을 가져와서 사용하기 위해선 value라는 프로퍼티로 가져오거나 변경할 수 있다.
2. by 사용법 delegation 방식이다
@Compose
fun MainScreen() {
var name by remember { mutableStateOf("우발자")}
TextField(
value = name,
onValueChange = { text -> name = text }
)
}이 방식은 by 키워드를 통해 getter와 setter를 상태값에 위임한다. 위임해서 사용하기 위해서는 꼭 var을 사용해줘야 된다. 그래서 value가 필요 없이 바로 접근하여 사용할 수 있다.
3. 구조 분해 방법
fun MainScreen() {
val (name, setName) = remember { mutableStateOf("우발자")}
TextField(
value = name,
onValueChange = setName
)
}이렇게 구조 분해방식으로 할당하게 되면 name도 value에 값을 할당받게 되고
setName은 (String) -> Unit이라는 람다가 할당받게 된다.
그래서 TextFiled를 사용할 때 이 방식을 이용하면 코드량을 줄일 수 있다.
remember는 뭘까?
위에 설명중에 계속 나온 remember는 왜 사용되고 있는 걸까?
compose에선 상태가 변경되면 recomposition이 빈번하게 일어난다. 이 때 내가
버튼를 눌렀을 때 텍스트의 값을 "A"에서 "B"로 변경하고 싶다고 가정해보자.
@Composable
fun MainSreen() {
var text by mutableStateOf("A")
Column {
Text(
text = text
)
Button(
onClick = {
text = "B"
}
) {
Text(
text = "B로 변경하는 버튼"
)
}
}
}이렇게 있다고 하면 과연 버튼을 눌렀을 때 "B"로 바뀔것인가?
이론적으로 보면 바뀌는 게 맞는 것 같다. 하지만 우리눈엔 버튼을 눌러도 바뀌는 건 없을 것이다. 왜냐하면 text에 값을 "B"로 변경하는 순간 recomposition이 일어나면서 다시 "A"로 변수를 초기화 할 것이기 때문이다. 이걸 방지하기 위해 remember가 필요한 것 이다.
@Composable
fun MainSreen() {
var text by remember { mutableStateOf("A") }
Column {
Text(
text = text
)
Button(
onClick = {
text = "B"
}
) {
Text(
text = "B로 변경하는 버튼"
)
}
}
}이렇게 remember로 감싸주면 객체를 다시 만들지 않고 이전에 있던 객체가 유지된다.
그래서 왜? 언제? 어떻게는 알아보았다. 이제 실무에서 어떻게 써야될까?
compose를 개발하는 분들은 대부분 비지니스 로직을 viewModel에 둘 것이다.
그럼 viewModel에서 정의된 객체를 compose에서 정의 후 사용하는 방식이 대부분일 것 이다. viewModel에서 정의된 StateFlow를 가져올 때 보통은 collectAsState() 써서 가져올 것이다. 그럼 상태관리는 최종적으로 viewModel에서 하는 것이고 만약 변경을 해도 viewModel로 전달되어 변경될 것이다. 그래서 remember를 굳이 안써도 된다.
추가적으로 collectAsState()도 StateFlow를 State값으로 변환해주는 기능이 있기 때문에 별도에 mutableState를 사용할 필요가 없다.
결론은 MutableState와 remember는 Compose 로컬에서 필요할 때 사용하면 된다.
