[SwiftUI] ViewModifier

SwiftUI

(강의자료 76회차)

SwiftUI 프레임워크에는 'ViewModifier' 라는 프로토콜이 내장되어 있다

이 프로토콜을 사용하면 기존에 생성한 뷰에 추가적으로 꾸며줄 수 있는 Custom Modifier를 생성할 수 있다

 

ViewModifier 구현

struct PurpleModifier: ViewModifier { 

    func body(content: Content) -> some View {
          
    }     
}

먼저, ViewModifier를 채택한 구조체를 선언한다

구조체 내에 body를 입력하면 자동완성으로 메서드가 나타난다

 

body 메서드는 some View 타입을 반환해야 한다

자동완성 된 메서드의 파라미터를 보면 content: Content가 있는데

이 파라미터가 Modifier가 적용될 뷰를 나타낸다

struct PurpleModifier: ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .font(.title)
            .padding()
            .foregroundStyle(.white)
            .background(.purple)
            .clipShape(.capsule)
    }
}

여기서 content는 스타일을 적용할 대상, 제네릭 타입이라고 생각하면 된다

modifier( :)를 뷰에 직접 적용할 수 있지만

extension을 사용하는 것이 더 일반적인 접근 방식이라고 말한다

extension View {
    func wrapToButton(action: @escaping () -> Void) -> some View {
        modifier(ButtonWrapper(action: action))
    }
}

 

View Protocol과 ViewModifier Protocol의 역할

View Protocol

SwiftUI에서 모든 화면 요소가 따르는 기본 프로토콜이다

Text, Button, Image 등의 기본적인 SwiftUI 컴포넌트는 모두 View Protocol을 따른다

 

ViewModifier Protocol

기존 뷰를 수정하거나 꾸미기 위해 사용되는 프로토콜이다

주로 뷰의 모양, 스타일, 레이아웃 등을 변경하는데 사용된다

텍스트에 배경 색상을 추가하거나, 테두리를 추가하는 등의 작업을 수행할 수 있다

 

View Protocol은 기본 뷰의 구조를 정의하는데 사용되고,

ViewModifier Protocol은 이러한 뷰를 꾸미거나 수정하는데 사용된다