본문 바로가기
Android/Compose

[Android] Modifier 전달과 생성의 차이

by LoseyKim 2024. 9. 4.

Jetpack Compose에서 UI 요소의 스타일과 배치를 결정하는 데 중요한 역할을 하는 Modifier는 다양한 방법으로 활용될 수 있어요. 특히, Modifier를 외부로부터 전달받아 사용하는 경우와 내부에서 새로 생성해 사용하는 경우에는 각각의 목적과 특징이 달라요. 이번 글에서는 이 두 가지 방법의 차이점을 자세히 알아볼게요.


1. 외부로부터 전달받은 Modifier 사용

외부에서 전달받은 Modifier를 사용하는 것은 Composable 함수의 유연성을 높이기 위한 방법이에요. 이 방법을 사용하면, Composable을 호출하는 쪽에서 해당 UI 요소의 레이아웃과 스타일을 자유롭게 설정할 수 있어요.

예시

@Composable
fun GreetingText(modifier: Modifier = Modifier) {
    Column(modifier = modifier) {
        // Text 컴포넌트들
    }
}

특징

  • 유연성: Composable 함수를 호출하는 쪽에서 원하는 대로 Modifier를 설정할 수 있어요. 예를 들어, GreetingText를 사용할 때 특정 패딩이나 배경색을 추가하고 싶다면, 호출 시 전달된 Modifier를 통해 쉽게 조정할 수 있어요.
  • 재사용성: 동일한 Composable 함수를 여러 곳에서 사용하되, 각기 다른 스타일을 적용할 수 있어요. 이로써 코드의 재사용성이 높아지고, 유지보수가 쉬워져요.

사용 사례

  • 외부에서 특정 UI 요소에 대한 배치나 스타일을 제어해야 하는 경우.
  • 여러 곳에서 동일한 Composable을 사용하되, 다른 Modifier를 적용하고 싶은 경우.

2. 새로 생성한 Modifier 사용

새로운 Modifier를 생성해서 사용하는 것은 해당 Composable 내부에서 특정 UI 요소에 대해 고유한 스타일이나 배치를 적용하기 위한 방법이에요. 이 경우, 외부에서 전달된 Modifier와는 별도로, 특정 UI 요소에만 적용될 수정 사항을 정의하게 돼요.

예시

@Composable
fun GreetingText(modifier: Modifier = Modifier) {
    Column(modifier = modifier) {
        Text(
            text = "Hello, World!",
            modifier = Modifier
                .align(alignment = Alignment.CenterHorizontally)
                .padding(16.dp),
            fontSize = 24.sp
        )
    }
}

특징

  • 세밀한 제어: 각 UI 요소에 대해 개별적으로 Modifier를 설정할 수 있어요. 예를 들어, 특정 텍스트를 중앙에 배치하고 싶을 때, 해당 Text에만 적용되는 Modifier를 사용해 정확한 배치와 스타일을 지정할 수 있어요.
  • 내부 논리 캡슐화: 외부에서 전달된 Modifier와는 별도로, 내부적으로 필요한 스타일과 레이아웃을 지정할 수 있어요. 이를 통해 외부 코드와 독립적으로 Composable 내부의 스타일을 관리할 수 있어요.

사용 사례

  • 특정 UI 요소에 고유한 스타일이나 배치가 필요할 때.
  • 외부에서의 Modifier 설정과 상관없이, Composable 내부에서만 적용되는 수정 사항이 필요한 경우.

요약

  • 외부로부터 전달받은 ModifierComposable 함수의 유연성과 재사용성을 높이는 데 주로 사용돼요. 이 방법을 통해 호출하는 쪽에서 자유롭게 스타일과 레이아웃을 조정할 수 있어요.
  • 새로 생성한 Modifier는 특정 UI 요소에 고유한 스타일이나 배치를 적용하고자 할 때 유용해요. 이를 통해 Composable 내부에서 세밀하게 제어할 수 있고, 외부와 독립적으로 관리할 수 있어요.