안드로이드 Compose Preview를 잘 활용하는 방법은? - 함수를 잘 분리하자.
Android XML은 기본 Preview가 잘 나온다. 하지만 Compose는 Preview를 하기 위한 기법이 필요하다.
- Preview를 잘하기 위해서는
Primitive types
또는 class 객체를 넘겨준다. - DI를 이용하는 경우 Preview가 힘들다.
- DI를 활용하는 경우라면
@Preview
함수 내에서 DI에서 만들어주는 객체를manual dependency injection
을 통해 생성해 초기화 시켜야 한다.
그래서 추천하는 방식은 아래와 같다.
- DI를 활용한 ViewModel에서 전달받아 값을 처리하는
@Composable fun
을 하나 만든다. Primitive types
/data class
/@Composable () -> Unit
를 파라메터로 가지는 함수를 생성한다.-
- 번을 Preview 하는 함수를 작성한다.
// 1번에 대한 구현
@Composable
internal fun MainContainer(viewModel: ViewModel) {
val value by remember { viewModel.value }
MainContainer(value)
}
// 2번에 대한 구현
@Composable
private fun MainContainer(value: String) {
Text(text = value)
}
// 3번에 대한 구현
@Preview
@Composable
internal fun PreviewMainContainer() {
SampleThemePreview {
MainContainer(
value = "value",
)
}
}
이 글에서 알아볼 내용
- Compose Preview를 잘 그릴 수 있는 방법
- ViewModel을 쉽게 활용하기 위한 방법