[SwiftUI] View Modifier: 개념부터 고급 사용법까지

SwiftUI에서 ViewModifier는 뷰에 공통적으로 적용할 수 있는 변형이나 스타일을 캡슐화하는 강력한 도구입니다. 이 포스트에서는 ViewModifier의 개념, 원리, 기본 사용법, 그리고 고급 사용법까지 모두 살펴보겠습니다.

View Modifier란?

ViewModifier는 SwiftUI에서 하나 이상의 뷰에 쉽게 재사용할 수 있는 방법으로 변형(Modifier)을 적용할 수 있는 프로토콜입니다. 흔히 .padding(), .background() 등과 같은 메서드를 사용하지만, 커스텀한 변형을 정의하고 적용할 수 있다는 것이 핵심입니다.

View Modifier의 원리

ViewModifier는 하나의 메서드 body(content:)를 정의해야 하며, 이 메서드는 Content(적용되는 뷰)와 반환할 변형된 뷰를 받습니다. 이 원리를 통해, 원하는 방식으로 뷰에 변형을 적용할 수 있습니다.

ViewModifier 프로토콜 구조

protocol ViewModifier {
    associatedtype Body: View
    func body(content: Self.Content) -> Self.Body
}

• body(content:) 메서드: content는 Modifier가 적용되는 뷰입니다. 이 메서드에서 변형된 뷰를 반환합니다.

기본 사용법

SwiftUI에서 ViewModifier는 뷰에 커스텀한 변형을 적용하는 가장 기본적인 방법 중 하나입니다. 기본적으로는 View 프로토콜을 따르는 모든 뷰에 공통적인 스타일이나 변형을 캡슐화해 쉽게 재사용할 수 있습니다.

커스텀 View Modifier 작성 예시

다음은 텍스트에 커스텀한 스타일을 적용하는 간단한 ViewModifier입니다.

struct CustomTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.headline)
            .foregroundColor(.blue)
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(10)
    }
}

이제 이 ViewModifier를 적용하는 방법입니다.

Text("Hello, SwiftUI!")
    .modifier(CustomTextModifier())

이 코드를 실행하면, "Hello, SwiftUI!" 텍스트가 파란색, headline 폰트, 회색 배경, 10pt의 둥근 모서리 스타일로 표시됩니다.

예시: ViewModifier 재사용

ViewModifier를 커스텀한 메서드로 만들어 코드의 가독성을 높이고 재사용성을 향상시킬 수 있습니다.

extension View {
    func customTextStyle() -> some View {
        self.modifier(CustomTextModifier())
    }
}

이제 다음과 같이 쉽게 적용할 수 있습니다.

Text("Hello, SwiftUI!")
    .customTextStyle()

고급자 가이드

ViewModifier는 기본적인 스타일 변경 외에도 더욱 고급스러운 기능을 제공합니다. 상태 값과 함께 사용할 수 있고, 조건에 따라 뷰를 동적으로 변경하는 등의 기능을 수행할 수 있습니다.

상태 값을 사용하는 ViewModifier

다음은 상태 값에 따라 뷰의 투명도를 변경하는 ViewModifier입니다.

struct OpacityModifier: ViewModifier {
    var isHighlighted: Bool

    func body(content: Content) -> some View {
        content
            .opacity(isHighlighted ? 1.0 : 0.5)
            .scaleEffect(isHighlighted ? 1.2 : 1.0)
    }
}

이제 이 ViewModifier를 적용하여 상태에 따라 뷰의 외형을 변경할 수 있습니다.

struct ContentView: View {
    @State private var isHighlighted = false

    var body: some View {
        Text("Tap Me")
            .modifier(OpacityModifier(isHighlighted: isHighlighted))
            .onTapGesture {
                isHighlighted.toggle()
            }
    }
}

위 예시에서 텍스트는 탭할 때마다 isHighlighted 상태 값에 따라 투명도와 크기가 변경됩니다.

고급 예시: 조건부 ViewModifier

ViewModifier를 활용해 조건에 따라 뷰에 변형을 동적으로 적용할 수 있습니다. 예를 들어, 사용자의 테마 설정에 따라 텍스트 색상을 변경하는 방법을 살펴보겠습니다.

struct DynamicTextColorModifier: ViewModifier {
    @Environment(\.colorScheme) var colorScheme

    func body(content: Content) -> some View {
        content
            .foregroundColor(colorScheme == .dark ? .white : .black)
    }
}

extension View {
    func dynamicTextColor() -> some View {
        self.modifier(DynamicTextColorModifier())
    }
}

struct ContentView: View {
    var body: some View {
        Text("Hello, Dynamic Theme!")
            .dynamicTextColor()
    }
}

위 코드에서는 시스템의 테마 설정(.dark 또는 .light)에 따라 텍스트의 색상이 흰색 또는 검은색으로 자동으로 변경됩니다.

결론

SwiftUI의 ViewModifier는 매우 강력하고 유연한 도구로, 간단한 뷰 스타일 변경부터 복잡한 뷰 로직 처리까지 광범위하게 사용됩니다. 기본적인 스타일링에서 상태 값과 결합한 동적 처리, 조건부 변형 적용까지 다양한 시나리오에 맞춰 활용할 수 있습니다.

이를 통해 뷰에 일관된 스타일을 적용하고, 재사용성을 높이며, 코드를 깔끔하게 유지할 수 있습니다.