Android Weekly

Android Weekly #-594 "Jetpack Compose의 modifier의 변화 역사?"

베블렌 2023. 12. 12. 01:03

10월 5주차에는 Jetpack Compose의 modifier의 변화와 발전에 대한 글입니다.

 

https://proandroiddev.com/harmonizing-modifiers-in-jetpack-compose-a-tale-of-flexibility-and-usability-4792131ea12a

 

Harmonizing Modifiers in Jetpack Compose: A Tale of Flexibility and Usability

“In Jetpack Compose, we journey from strict modifier rules to flexible design, seeking the perfect harmony of usability.” 🚀

proandroiddev.com

 

 

소개 및 정리

이 글은 Jetpack Compose에서 모디파이어(modifier)의 활용 방식에 대한 변화와 진화를 다루고 있습니다.

저는 창피하게도 modifier를 쓸때마다 이건 있나? 이건 있지? 이것도 있겠지? 하면서 IDE빨로 사용하는것 같습니다.

modifier에 대한 글이 나오면 작성해야겠다 생각했는데 아쉽게도 역사 수업같은 글이였습니다.

이 글에서는 디자인 시스템이 성장함에 따라 모디파이어에 대한 접근 방식이 어떻게 발전했는지 설명하고 있습니다.

 

 

내용

  1. 초기 디자인 시스템의 문제
    • 초기 디자인 시스템에서는 모디파이어를 과도하게 사용하는 문제가 있었습니다. 개발자들이 각자의 비전에 따라 버튼의 모양을 변경하려 했고, 이는 UI 컴포넌트를 관리하고 사용자 정의하기 어렵게 만들었습니다.
  2. 유연성의 중요성 인식
    • 디자인 시스템이 성숙하면서, 모디파이어 수정이 특히 사용성 향상에 도움이 될 수 있다는 것을 인식했습니다. 글글쓴이의 동료 Amin은 모든 모디파이어 수정이 문제가 되는 것은 아니며, 클릭 행동과 관련된 수정은 사용성을 높이고 복잡성을 줄일 수 있다고 주장했습니다.
  3. 모디파이어의 적절한 사용
    • 모디파이어를 사용할 때 "제공된 모디파이어에 수정을 적용하지 말라"는 원칙을 고수한다고 해서 모든 것을 호출자 컴포저블에서 정의해야 하는 것은 아닙니다. 입력 모디파이어는 컴포넌트의 레이아웃에 영향을 미쳐야 하며, 컴포넌트 별로 특정한 세부사항은 그 내부에서 결정되어야 합니다.
  4. 모디파이어에 모디파이어 적용의 예
    • 이 새로운 관점은 기존 원칙을 명확히 하며, "SimpleButton" composable 예시를 들어 클릭 기능을 직접 적용하는 방식을 설명합니다. 이는 코드의 명확성을 향상시키고 개발자의 혼란을 줄이며 UI 컴포넌트의 사용성을 개선합니다.
  5. "onClick" 매개변수의 장점
    • 클릭 기능을 매개변수로 분리함으로써, 개발자는 어떤 모디파이어가 클릭 동작을 처리하는지 기억할 필요가 없게 됩니다. 이는 개발의 복잡성을 줄이고 사용성을 높입니다.

 

// 4번 예시

@Composable
fun SimpleButton(
    text: String,
    type: ButtonType,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Box(modifier = modifier) {
        BaseButton(
            text = text,
            modifier = Modifier
                .clip(RoundedCornerShape(8.dp))
                .background(type.backgroundColor)
                .clickable { onClick() },
        )
    }
}

enum class ButtonType {
    Primary,
    Danger,
    Neutral,
    Success
}

 

 

 

 

 

 

https://androidweekly.net/

 

Android Weekly - Free weekly Android & Kotlin development newsletter

Android Weekly - Free weekly Android & Kotlin development newsletter

androidweekly.net