[Compose] Modifier란?, Modifier 체이닝 순서

Modifier란?

Modifier는 Jetpack Compose에서 UI 요소의 크기, 정렬, 배경, 패딩, 클릭 이벤트 등 다양한 속성을 조정하는 역할을 하는 객체입니다.

• 레이아웃 조정: fillMaxSize(), size(), width(), height() 등
• 스타일 적용: background(), border(), shadow() 등
• 이벤트 처리: clickable(), pointerInput() 등
• 애니메이션 효과: graphicsLayer(), alpha() 등

Modifier는 체이닝 방식으로 여러 개를 연결하여 사용할 수 있으며, 적용 순서에 따라 UI가 다르게 동작할 수 있습니다.

Modifier 예제

Box(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .background(Color.Gray)
) {
    Text("Hello Modifier")
}

위 코드에서는

• fillMaxWidth() → Box가 가득 차도록 설정
• padding(16.dp) → 내부 컨텐츠가 16dp만큼 안쪽으로 밀려남
• background(Color.Gray) → 배경을 회색으로 설정

 

Modifier의 순서 (체이닝 순서)

Modifier는 선언된 순서대로 적용됩니다.
Modifier는 체이닝 방식으로 여러 개를 연결할 수 있으며, 적용 순서가 UI의 결과에 직접적인 영향을 미칩니다.

마진효과를 원하면 padding을 먼저 적용하고 background를 나중에 적용
패딩효과를 원하면 background를 먼저 적용하고 padding을 나중에 적용

• background를 사용하지 않는 경우 배경 바깥에 패딩(마진효과)이 적용됩니다.

 

Modifier 체이닝 예제

Box(
    modifier = Modifier
        .padding(16.dp) // 패딩을 먼저 적용
        .background(Color.Red) // 배경을 나중에 적용
) {
    Text("Hello Modifier")
}

결과: 배경색이 패딩을 제외한 영역에만 적용됨 (즉, 내부 컨텐츠가 패딩으로 인해 안쪽으로 밀려난 상태에서 배경이 설정됨)

순서를 바꿨을 때

Box(
    modifier = Modifier
        .background(Color.Red) // 배경을 먼저 적용
        .padding(16.dp) // 패딩을 나중에 적용
) {
    Text("Hello Modifier")
}

결과: 배경색이 패딩을 포함한 전체 영역을 덮음 (즉, 배경이 먼저 그려지고, 그 위에 패딩이 적용되므로 전체 영역이 빨간색이 됨)

 

Modifier 체이닝 순서에 따라 패딩, 마진 여부가 달라져서 작업시에 원하는 Ui가 그려지지 않았어서 정리 했습니다!