[안드로이드 Compose 3] - Slot API

📌 Slot API란?

Composable한 함수, 즉 UI 요소를 매개변수로 하여 또 다른 Composable 함수를 만들고 싶을 때 사용한다. 이를 통해 컴포넌트화를 더욱 수월하게 할 수 있다.

간단한 예제를 보자

@Composable
fun CheckBoxWithSlot(
    checked: Boolean,
    onCheckedChanged: () -> Unit,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.clickable {
            onCheckedChanged()
        }
    ) {
        Checkbox(checked = checked, onCheckedChange = { onCheckedChanged() })
        content()
    }
}

CheckBoxWithSlot은 checkbox 옆에 text 등등 내가 원하는 요소를 넣을 수 있도록 만들어놓은 컴포넌트이다.

onCheckChanged는 전체를 감싸는 Row, 혹은 Checkbox를 눌렀을 때 실행될 함수로, 토글이 되도록 할 것이다.

마지막으로 content 부분이 slot 자리인데, 이 안에 @Composable 함수를 넣을 수 있다.
일반적으로는 ()->Unit으로 작성을 하지만,

RowScope.() -> Unit 와 같이 작성을 한다면 Row안에 있는 의미로 쓰여 RowScope의 이점을 가질 수 있다고 하는데, 아직 정확히 이렇게 쓰는 게 어떤 이점이 있는지는 확실하지 않다.

이제 이 Slot 컴포넌트를 사용해 보면

@Composable
fun Greetings() {
    var isChecked by remember {
        mutableStateOf(false)
    }
    Column() {
        CheckBoxWithSlot(
            checked = isChecked,
            onCheckedChanged = { isChecked = !isChecked },
            content = { Text("someText", ) }, )
    }
}

이와 같이 쓸 수 있다. Text 요소를 {} 안에 넣어줘야 올바르게 렌더링 되며, 마지막 인자가 람다식이기 때문에 마지막으로 뺄 수 있다.

        CheckBoxWithSlot(
            checked = isChecked,
            onCheckedChanged = { isChecked = !isChecked },
        ) {
            Text("someText")
        }

마치 row나 column 사용 방식과 같게 구성이 되었다.