😵‍💫Preview 때문에 코드가 너무 길어요! (PreviewParameter)

안녕하세요! 오늘은 Compose를 사용하면서 Preview 코드가 너무 길어져 고민했던 경험과 이를 개선한 방법에 대해 공유하려고 합니다.

Preview가 길어진 이유

버튼 컴포넌트를 만들고, 피그마 디자인에 있는 모든 버튼 스타일을 Preview로 확인할 수 있도록 코드를 작성하다 보니 Preview 코드가 점점 길어지기 시작했습니다.

PR을 올릴 때는 리뷰어분들께 "버튼 컴포넌트에 Preview가 많아 코드가 길 수 있다" 는 메시지를 남겨야 할 정도였죠.

하지만 코드 리뷰 중 한 리뷰어분께서 PreviewParameter라는 유용한 기능을 알려주셨고, 이를 활용해 코드 길이를 획기적으로 줄일 수 있었습니다.

PreviewParameter를 활용한 코드 간소화

Compose의 PreviewParameter는 Preview를 위한 매개변수를 제공하는 기능입니다. 이를 활용하면 같은 컴포넌트를 다양한 상태로 Preview할 때 반복되는 코드를 줄일 수 있습니다.

컴포저블 미리보기로 UI 미리보기  |  Jetpack Compose  |  Android Developers

PreviewParameterProvider 정의

먼저, Preview에 사용될 버튼 스타일을 정의하는 PreviewParameterProvider를 생성합니다.

여기서 각 버튼 스타일을 제공하는 ButtonStyleProvider를 작성했어요.

private class ButtonStyleProvider : PreviewParameterProvider<ButtonStyle> {
    override val values: Sequence<ButtonStyle> = sequenceOf(
        ButtonStyle.Primary,
        ButtonStyle.Secondary,
        ButtonStyle.Tertiary
    )
}

제가 작성한 예시 코드를 보며 설명할게요!

1. PreviewParameterProvider 를 통한 ButtonStyleProvider 클래스 정의

먼저, ButtonStyleProvider는 Preview에 전달할 값을 관리하는 클래스입니다. 이 클래스는 PreviewParameterProvider<T>를 상속받아 values 속성을 통해 Preview에서 사용할 매개변수의 목록을 제공합니다.

private class ButtonStyleProvider : PreviewParameterProvider<ButtonStyle> {
    override val values: Sequence<ButtonStyle> = sequenceOf(
        ButtonStyle.Primary,
        ButtonStyle.Secondary,
        ButtonStyle.Tertiary
    )
}

• PreviewParameterProvider<T>: Preview에 전달할 데이터 타입 T를 명시합니다. 여기서는 ButtonStyle 타입을 사용합니다.
• values: Sequence 타입으로 Preview에서 사용할 여러 값을 정의합니다.
  • sequenceOf()를 사용해 필요한 버튼 스타일들을 나열했습니다.
  • 여기서는 ButtonStyle.Primary, ButtonStyle.Secondary, ButtonStyle.Tertiary 세 가지 스타일을 제공합니다.

---

2. PreviewParameter 애노테이션 사용

이제 ButtonStyleProvider를 활용해 Preview 함수에서 다양한 스타일을 미리 볼 수 있습니다.

기본 사용법

@PreviewParameter 애노테이션을 사용해, Preview 함수의 매개변수로 데이터를 전달받을 수 있습니다.

@Preview
@Composable
fun SpoonyButtonEnabledPreview(
    @PreviewParameter(ButtonStyleProvider::class) style: ButtonStyle
) {
    SpoonyAndroidTheme {
        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            // 여기서 전달받은 style을 사용
            ButtonSize.entries.forEach { size ->
                SpoonyButton(
                    text = "버튼",
                    style = style, // 전달받은 style
                    size = size,   // 반복문으로 모든 크기 처리
                    onClick = { }
                )
            }
        }
    }
}

동작 방식

1. 매개변수 style에 값 전달:
   • @PreviewParameter(ButtonStyleProvider::class)는 ButtonStyleProvider에서 정의한 values를 순회하면서 Preview를 생성합니다.
   • values에서 제공된 각 ButtonStyle(Primary, Secondary, Tertiary)에 대해 별도의 Preview 화면이 렌더링됩니다.
2. Preview 생성:
   • Compose는 각 ButtonStyle에 대해 한 번씩 Preview를 생성하여, 동일한 UI를 다양한 스타일로 확인할 수 있도록 합니다.

Preview의 결과

위 코드를 사용하면 버튼 스타일(Primary, Secondary, Tertiary) 각각에 대해 Preview 화면이 따로 생성됩니다. 결과적으로, 스타일별 Preview를 작성할 때 중복된 코드를 작성할 필요가 없어집니다.

코드 변경 전

기존에는 버튼 스타일과 크기별로 Preview를 모두 작성했기 때문에 코드가 아래처럼 길어졌습니다.

@Preview
@Composable
private fun SpoonyButtonPrimaryEnabledPreview() {
    SpoonyAndroidTheme {
        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            SpoonyButton(
                text = "버튼",
                onClick = {},
                style = ButtonStyle.Primary,
                size = ButtonSize.Xlarge
            )
            SpoonyButton(
                text = "버튼",
                onClick = {},
                style = ButtonStyle.Primary,
                size = ButtonSize.Large
            )
            SpoonyButton(
                text = "버튼",
                onClick = {},
                style = ButtonStyle.Primary,
                size = ButtonSize.Medium
            )
            SpoonyButton(
                text = "버튼",
                onClick = {},
                style = ButtonStyle.Primary,
                size = ButtonSize.Small
            )
            SpoonyButton(
                text = "버튼",
                onClick = {},
                style = ButtonStyle.Primary,
                size = ButtonSize.Xsmall
            )
        }
    }
}

@Preview
@Composable
private fun SpoonyButtonPrimaryDisabledPreview() {
    SpoonyAndroidTheme {
        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            SpoonyButton(
                text = "버튼",
                style = ButtonStyle.Primary,
                size = ButtonSize.Xlarge,
                enabled = false
            )
            SpoonyButton(
                text = "버튼",
                style = ButtonStyle.Primary,
                size = ButtonSize.Large,
                enabled = false
            )
            SpoonyButton(
                text = "버튼",
                style = ButtonStyle.Primary,
                size = ButtonSize.Medium,
                enabled = false
            )
            SpoonyButton(
                text = "버튼",
                style = ButtonStyle.Primary,
                size = ButtonSize.Small,
                enabled = false
            )
            SpoonyButton(
                text = "버튼",
                style = ButtonStyle.Primary,
                size = ButtonSize.Xsmall,
                enabled = false
            )
        }
    }
}
...

코드 변경 후

PreviewParameter를 사용해 스타일을 매개변수로 전달받도록 개선했습니다.

버튼 크기별로도 반복문을 활용해 코드의 중복을 줄였어요.

@Preview
@Composable
fun SpoonyButtonEnabledPreview(
    @PreviewParameter(ButtonStyleProvider::class) style: ButtonStyle
) {
    SpoonyAndroidTheme {
        Column(
            modifier = Modifier,
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            ButtonSize.entries.forEach { size ->
                SpoonyButton(
                    text = "버튼",
                    style = style,
                    size = size,
                    onClick = { }
                )
            }
        }
    }
}

코드 커밋 후 코드 줄 수 변화

위와 같이 코드를 수정하니 Preview가 훨씬 간결해졌습니다. 버튼 스타일과 크기별 Preview를 하나의 함수로 처리할 수 있어 유지보수도 편리해졌고, 코드 가독성도 크게 향상되었죠.

저는 해당 리뷰를 통해 PreviewParameter라는 기능을 알게 된 것도 큰 수확이었습니다.

Preview가 너무 길어져 고민 중이라면, 저처럼 PreviewParameter를 활용해보는 건 어떨까요? 코드가 훨씬 깔끔해질 거예요! 😊