Jetpack Compose (CheckBox)

콩쥬·2024년 2월 18일

jetpack_compose

목록 보기

6/6

CheckBox

1. 세팅

Row에 Text하나가 들어 있는 상태를 만들어주자

@Composable
fun CheckBoxEx() {
    Row(verticalAlignment = Alignment.CenterVertically) {
		Text(text = "프로그래머입니까?")
    }
}

2. checkbox를 생성

checked 속성은 false, onCheckedChange는 비워두자
@Composable
fun CheckBoxEx() {
    Row(verticalAlignment = Alignment.CenterVertically) {
    	Checkbox(checked = false, onCheckedChange = {} )
		Text(text = "프로그래머입니까?")
    }
}
일반적인 안드로이드의 레거시 뷰하고는 좀 다른점이 있다
레거시뷰는 코드를 넣지않아도 동작을 하지만 jetpackcompose는 그렇게 되어있지 않고
체크박스에 false가 되어있기에 클릭을 해도 check가 되지를 않는다

3. 클릭을 했을 때 check가 되게 해보자

onCheckedChange에서 boolean 값 변수를 바꾸고 checked에서 그 값을 반영해보자
@Composable
fun CheckBoxEx() {
    Row(verticalAlignment = Alignment.CenterVertically) {
    	var checked = false
    	Checkbox(checked = checked, onCheckedChange = {
        	checked = !checked
        } )
		Text(text = "프로그래머입니까?")
    }
}
에뮬레이터를 키고 동작을 해보면 되지 않는 것을 알 수가 있다.
??

그 이유는 checked 변수가 상태값이 아니기 때문이다.

Composalbe은 언제든지 다시 그려질 수 있고, 중단 되거나, 사라질 수 있다고 생각을 해야한다.

그렇기에 상태값으로 지정을 해놓아야한다.

여기서 끝나는 것이 아니라 상태값을 지정을 해놓더라도 기본적으로 Composable은 어떠한 상태값이 바뀌게 되면 재구성이 일어나게 된다.

재구성이 일어나기때문에 Remeber를 통해서 상태를 기억했다가 나중에 사용할 수 있게 해야한다.

4. remember와 mutableStateOf를 활용해 check가 바뀌게 해보자

mutableStateOf를 통해서 상태값을 저장할 수 있고 remember를 통해 상태값을 기억할 수 있다.
value property를 이용해서 상태값에 접근할 수 있다.
@Composable
fun CheckBoxEx() {
    Row(verticalAlignment = Alignment.CenterVertically) {
    	var checked = remember { mutableStateOf(false) }
    	Checkbox(checked = checked.value, onCheckedChange = {
        	checked.value = !checked.value
        } )
		Text(text = "프로그래머입니까?")
    }
}

그런데 이렇게 계속 value를 써줘야 하는 것이 불편하다.

안사용할 수 있는 방법이 있다.

5. delegated properties로 변경해보자

delegated properties라고 하면 위임한다고 생각하면된다
by라는 키워드를 사용하여 getter,setter,를 위임한다고 생각하면 된다.
이때 반드시 var로 선언을 해야한다.
@Composable
fun CheckBoxEx() {
    Row(verticalAlignment = Alignment.CenterVertically) {
    	var checked by remember { mutableStateOf(false) }
    	Checkbox(checked = checked, onCheckedChange = {
        	checked = !checked
        } )
		Text(text = "프로그래머입니까?")
    }
}

동일하게 동작하는 것을 확인할 수 있다.

6. destruction으로 상태를 받아서 사용해보자

위임을 통해서도 할 수 있지만 destruction 즉 비구조화를 통해서도 할 수 있다.
mutableStateOf의 문서를 보면 getter와 setter가 있다.

이 구조화되어있는 getter와 setter를 따로 분리 시켜준다고 생각하면 된다.
코드로 한번 보면 이해가 될것이다.
@Composable
fun CheckBoxEx() {
    Row(verticalAlignment = Alignment.CenterVertically) {
    	val (checked, setChecked) = remember { mutableStateOf(false) }
    	Checkbox(checked = checked, onCheckedChange = {
        	setChecked(it)
        } )
		Text(text = "프로그래머입니까?")
    }
}

7. (응용)text를 클릭했을 때도 checkbox가 변경되도록 해보자

@Composable
fun CheckBoxEx() {
    Row(verticalAlignment = Alignment.CenterVertically) {
    	val (checked, setChecked) = remember { mutableStateOf(false) }
    	Checkbox(checked = checked, onCheckedChange = setChecked)
		Text(text = "프로그래머입니까?",modifier = Modifier.clickable{
        	setChecked(!checked)
        })
    }
}

Text에 modifier에 clickable을 활용하여 setChecked를 사용하면 된다