2024.6.21.md

Component

• CheckBox
• TextField
• TopAppBar
• Slot Api
• Scaffold

CheckBox

CheckBox는 checked 속성이 false로 설정되어 있다면 무조건 바뀌지 않음. 즉, 해당 속성의 값을 바꿔야만 ui가 갱신.

보통은 해당 속성의 값을 mutableStateOf() 를 사용하는데, 이 때 remember와 같이 써줘야 함. 상태가 날라갈 수 있기 때문이다.

Compose에서 recomposition이란 다시 그리는 현상을 의미하는데 상태가 바뀌었을 때 이 현상이 일어난다고 함.

예시 1. mutableStateOf 사용

var check = remember { mutableStateOf(false) }
Checkbox(
  checked = check.value,
  onCheckedChange = {
    check.value = !check.value
  }
)

예시 2. Delegate property(위임된 속성) 사용

var check by remember { mutableStateOf(false) }
Checkbox(
  checked = check,
  onCheckedChange = {
    check = !check
  }
)

특징 : = 대신 by를 쓰게 되면 마치 check를 value처럼 사용 가능하다.

Slot Api

어떤 Composable 함수가 다른 Composable 함수나, Component를 포함할 수 있게 되어있는 것을 의미.

예시

@Composable
fun checkBoxWithSlopApi(
    checked : Boolean,
    content : @Composable () -> Unit
){
    Row {
        Checkbox(checked = checked, onCheckedChange = {})
        content()
    }
}

@Composable
fun Greeting() {
    var checked by remember { mutableStateOf(false) }
    checkBoxWithSlopApi(checked = checked) { Text(text = "하이")}
}

이런 식으로 사용 가능

추가

항상 거의 필수로 사용되었던 RecyclerView는 어떻게 대체되는거지 했는데 LazyColumn이 있다는 것을 알게 되었다. adapter viewholder 필요없이

LazyColumn{
  items(list){ item ->
    Composable함수(item) // 미리 정의한 내용 즉 viewholder가 되겠다
  }
}

이렇게 넣는듯