Compose Docs | Modifiers

Compose 수정자  |  Jetpack Compose  |  Android Developers

Compose modifiers

modifiers는 구성 요소를 꾸미거나 보강하는 데 사용됩니다. modifiers를 사용하면 다음과 같은 작업을 수행할 수 있습니다:

 

• 구성 요소의 크기, 레이아웃, 동작 및 모양 변경
• 접근성 레이블과 같은 정보 추가
• 사용자 입력 처리 클릭 가능하게 만들거나 스크롤, 드래그, 확대/축소 등과 같은 상위 수준 상호작용 추가

 

modifiers는 표준 Kotlin 객체입니다. Modifier 클래스 함수 중 하나를 호출하여 modifiers를 생성할 수 있습니다.

Order of modifiers matters

modifiers 함수의 순서는 중요합니다. 각 함수는 이전 함수에 의해 반환된 Modifier에 변경 사항을 적용하기 때문에 순서가 최종 결과에 영향을 미칩니다. 이를 통해 서로 다른 modifiers가 상호작용하는 방식에 대해 논리적으로 이해할 수 있습니다. 이는 기존의 뷰(View) 기반 시스템과 비교하면 상당한 이점을 제공합니다. 뷰 기반 시스템에서는 박스 모델을 배워야 했으며, 여백(margin)이 요소 외부에 적용되고 패딩(padding)이 내부에 적용되며, 배경 요소는 이에 따라 크기가 조정되는 등의 동작이 있었습니다. 하지만 modifiers 디자인은 이러한 동작을 명확하고 예측 가능하게 만들어주며, 원하는 정확한 동작을 달성하기 위해 더 많은 제어권을 제공합니다. 또한 이것이 왜 여백(margin) modifiers가 없고 패딩(padding) modifiers만 있는지 설명합니다.

Build-in modifiers

Jetpack Compose는 구성 요소를 꾸미거나 보강하는 데 도움이 되는 내장 modifiers 목록을 제공합니다. 

• padding
• size
• requiredSize : 부모의 제약 조건과 상관없이 구성 요소의 크기를 고정하고 싶을 때
• fillMaxHeight
• fillMaxWidth
• fillMaxSize
• paddingFromBaseline : 레이아웃의 상단으로부터 기준선까지 특정 거리를 확보하고 싶을 때
• offset : 레이아웃의 방향에 따라 수평적으로 적용됩니다. 왼쪽에서 오른쪽으로 진행되는 문맥에서는 양의 오프셋은 요소를 오른쪽으로 이동시키고, 오른쪽에서 왼쪽으로 진행되는 문맥에서는 요소를 왼쪽으로 이동시킵니다.
• absoluteOffset : 레이아웃 뱡향을 고려하지 않고 오프셋을 설정해야 하는 경우

Extracting and reusing modifiers

여러 modifiers를 함께 연결하여 구성 요소를 꾸미거나 보강할 수 있습니다. 이러한 체인은 Modifier 인터페이스를 통해 생성됩니다. Modifier 인터페이스는 순서가 있는 변경할 수 없는(Modifiable) 단일 Modifier.Element의 목록을 나타냅니다.

 

각 Modifier.Element는 레이아웃, 그리기와 그래픽 동작, 모든 제스처 관련 동작, 포커스와 의미론적 동작, 그리고 디바이스 입력 이벤트와 같은 개별적인 동작을 나타냅니다. 이들의 순서가 중요합니다. 먼저 추가된 modifiers 요소가 먼저 적용됩니다.

 

가끔은 동일한 modifiers 체인을 여러 구성 요소에서 재사용하는 것이 유용할 수 있습니다. 이는 변수로 추출하고 더 높은 범위에 끌어올려 사용하는 것을 의미합니다. 이렇게 하면 몇 가지 이점이 있습니다:

 

• modifiers를 사용하는 구성 요소가 다시 구성되었을 때 modifiers의 재할당이 반복되지 않습니다.
• modifiers 체인은 길고 복잡할 수 있으므로 동일한 체인 인스턴스를 재사용하면 Compose 런타임이 비교할 때 수행해야 하는 작업 부하를 줄일 수 있습니다.
• 이러한 추출은 코드의 가독성, 일관성, 유지 보수성을 증진시킵니다.

 

이러한 방식으로 코드를 작성하면 앱의 성능과 유지 관리에 도움이 되며 코드베이스 전체적으로 코드를 깨끗하게 유지할 수 있습니다.