컴포저블 함수에서는 하나 이상의 컴포저블 함수를 호출할 수 있습니다.

Slot API는 컴포저블 함수를 통해 사용자 정의 UI 컴포넌트에 Slot을 제공하여, 이 컴포넌트의 일부를 외부에서 정의할 수 있습니다 . 하나의 Slot API는 하나 이상의 요소가 비어 있는 UI 템플릿입니다. 컴포저블이 호출될 때 파라미터로 전달되며 컴포저블 런타임 시스템이 사용자 인터페이스(UI)를 렌더링할 때 포함됩니다.

컴포저블 슬롯을 추가할 때는 슬롯을 파라미터로 받을 수 있도록 람다 표현식을 이용해서 작성합니다.

예제

@Composable
fun CustomSlot(content: @Composable () -> Unit){
		Column{
				Text("Top content")
				content()
				Text("Bottom content")
		}
}

위 코드와 같이 Slot API를 사용하도록 파라미터로 람다 표현식을 선언합니다.

@Preview(showBackground = true)
@Composable
fun CustomPreview(){
		CustomSlot {
				CustomButton()
		}
}

@Composable
fun CustomSlot(content: @Composable () -> Unit){
		Column{
				Text("Top content")
				content()
				Text("Bottom content")
		}
}

@Composable
fun CustomButton(){
				Button(onClick = { /*TODO*/ }) {
				Text("Button")
		}
}

CustomPreview() 함수의 코드를 보면, CustomSlot의 인자로 CustomButton()을 전달하는 것을 볼 수 있습니다.

실행 결과에서 Slot API를 활용하여 슬롯에 CustomButton 컴포저블이 들어간 것을 볼 수 있습니다.

후기

Slot API를 활용하면 호출 시점에 컴포저블을 동적으로 구성할 수 있어 재사용성과 유연성을 크게 높일 수 있습니다. 이를 통해 UI 템플릿을 추상화하여 반복되는 코드를 획기적으로 줄일 수 있습니다. Stateless 컴포저블은 단일 컴포저블에 대한 추상화를 가능하게 하여 상태를 갖지 않는 UI 컴포넌트를 쉽게 만들고 관리할 수 있습니다.

결국, Slot API와 Stateless 컴포저블을 조합하면 개별 UI 컴포넌트와 전체 UI 구조 모두에 대해 효율적인 추상화를 실현할 수 있습니다. 이를 통해 코드의 가독성을 높이고 유지보수를 용이하게 할 뿐만 아니라, 다양한 UI 요구사항에 유연하게 대응할 수 있습니다.

Jetpack Compose의 Slot API를 사용해 보니, 이러한 추상화의 장점을 더욱 느낄 수 있었습니다.