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

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` 내부에서만 적용되는 수정 사항이 필요한 경우.

---

요약

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