[Compose] Modifier의 위치와 적용 규칙

Modifier의 위치에 대한 이해

컴포즈를 실제 적용하다보니 Modifier의 위치? 가 너무 헷갈렸습니다.
이해를 돕기 위해 정리해 보았습니다!

Jetpack Compose에서 modifier의 위치는 
Composable의 유형(일반적인 UI 요소 vs. 레이아웃 컨테이너)에 따라 다르게 적용됩니다.

 

1. 일반적인 Composable 함수(@Composable 함수, Text, Button 등)에서의 Modifier 위치

일반적인 Composable 함수(@Composable이 붙는 함수),Text, Button, Icon 같은 
일반적인 UI 요소에서는 modifier가 필수 매개변수 뒤에 위치하며, 선택적 매개변수(color, fontSize 등)보다 앞에 배치됩니다.

적용 규칙

예제: Text의 Modifier 위치

Text(
    text = "Hello Compose", // 필수 매개변수
    modifier = Modifier.padding(8.dp), // 선택적 매개변수(color, fontSize 등)보다 앞에 위치
    color = Color.Red,
    fontSize = 16.sp
)

• modifier는 필수 매개변수인 text 뒤에 오며, 선택적 매개변수(color, fontSize 등)보다 앞에 위치해야 합니다.

예제: 일반적인 Composable 함수의 Modifier 위치

@Composable
fun CustomButton(
    text: String, // 필수 매개변수
    onClick: () -> Unit, // 이벤트 핸들러
    modifier: Modifier = Modifier, // 선택적 매개변수보다 앞에 위치
    enabled: Boolean = true // 기본값이 있는 선택적 매개변수
) {
    Button(
        onClick = onClick,
        modifier = modifier,
        enabled = enabled
    ) {
        Text(text)
    }
}

• modifier는 필수 매개변수인 text와 onClick 뒤에 오며, 선택적 매개변수(enabled 등)보다 앞에 위치해야 합니다.

 

예외 사항 (Trailing Lambda)

Compose에서 onClick: () -> Unit 같은 이벤트 핸들러를 마지막 매개변수로 두면, Compose가 content 슬롯과 헷갈릴 가능성이 있음.

이 경우, MyButton("Click Me") {}처럼 호출하면, onClick이 아니라 UI content를 전달하는 것처럼 보일 수 있음!

Compose에서는 onClick을 마지막에 두지 않는 다고 함.

→ 이 경우(매개 변수와, 이벤트 핸들러만 있을 경우) : 매개변수 앞에, 이벤트 핸들러를 둔다.

 

2. 레이아웃 컨테이너(Box, Row, Column 등)에서의 Modifier 위치

Box, Row, Column 같은 레이아웃 컨테이너에서는 modifier가 가장 중요한 속성이므로 맨 앞에 위치합니다.

적용 규칙

• modifier → 나머지 기본값이 있는 매개변수 → content 람다 (마지막에 배치)
• modifier가 크기, 정렬, 배경 등 핵심 속성을 담당하므로 맨 앞에 위치하는 것이 일반적

예제: Box의 Modifier 위치

Box(
    modifier = Modifier.fillMaxSize(), // 가장 중요한 속성이므로 맨 앞
    contentAlignment = Alignment.Center
) {
    Text("Hello")
}

• modifier가 가장 먼저 선언되고, content 람다는 마지막에 배치됨

 

Modifier의 위치 차이