[SwiftUI] ViewModifier

ViewModifier

A modifier that you apply to a view or another view modifier, producing a different version of the original value.

protocol ViewModifier

 

Overview

ViewModifier 프로토콜은 어떠한 뷰에서도 적용할 수 있는 재사용 가능한 modifier를 생성하는 것입니다.

 

예를 들어 SwiftUI를 통해 View를 만들 때, 글자 크기나 폰트 등이 공통적인 특성을 가지는 경우가 있습니다.

이러한 경우에 코드를 작성할 때 각각의 특성을 모두 작성하게 된다면, 코드의 가독성이 떨어지고 비효율적이게 됩니다.

 

따라서 이러한 공통적인 특성을 묶어서 관리하고 원할 때마다 해당하는 공통적인 특성을 사용할 수 있도록 만들어주는 것이

ViewModifier의 기능입니다.

 

설명보단 코드를 직접 보고 이해하는 것이 더욱 편리하기 때문에 코드를 보면서 이해하시면 될 것 같습니다.

 

아래 예시는 여러 modifier를 결합하여 둥근 사각형으로 둘러싸인 파란색 텍스트를 만든 것입니다.

struct BorderedCaption: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.caption2)
            .padding(10)
            .overlay(
                RoundedRectangle(cornerRadius: 15)
                    .stroke(lineWidth: 1)
            )
            .foregroundColor(Color.blue)
    }
}

이제 해당 ViewModifier를 적용할 수 있습니다. 

 

다음은 modifier(_:)를 view에 바로 적용한 것입니다.

Text("Hi")
	.modifier(BorderedCaption())

위처럼 사용하면 extension에 추가하지 않아도 됩니다.

 

modifier(_:)를 view에 바로 적용할 수도 있지만, 이상적이고 흔한 방법은 View의 extension에 정의하는 방법입니다.

extension View {
    func borderedCaption() -> some View {
        modifier(BorderedCaption())
    }
}

 

extexnsion에 정의한 뒤, 다음과 같이 모든 뷰에서 사용할 수 있습니다.

Image(systemName: "bus")
    .resizable()
    .frame(width:50, height:50)
Text("Downtown Bus")
    .borderedCaption()

 

 

현재 Swift Student Challenge 프로젝트를 리팩토링하고 있는데, ViewModifier 또한 적용해봐야겠다.