[iOS - SwiftUI] 커스텀 뷰 만들때 ViewModifier 사용하기 (ViewModifier의 역할, 커스텀 스타일)

커스텀 뷰

cornerRadius가 들어간 버튼

• cornerRadius가 들어간 버튼을 만들어야할 때, SwiftUI에서는 두 가지 방법이 존재
  • 1) RoundedButton 뷰 만들기
  • 2) ViewModifier로 정의하고 뷰에 이 modifier 등록하기
• SwiftUI에서는 ViewModifier를 두어서, 커스텀 뷰 뿐만이 아닌 커스텀 스타일을 사용하는곳에서 간편하게 사용할 수 있도록 설계
• cornerRadius가 들어간 버튼의 스타일은 여러곳에서 사용할 수 있으므로 ViewModifier로 추상화하기
• 커스텀 뷰를 만드는 것이 아닌, 커스텀 스타일을 만드는 것

ViewModifier로 커스텀 스타일 만들기

• ViewModifier로 만들기 전에 커스텀뷰로 먼저 만들어보면 아래처럼 만들기가 가능
  • 하지만 단순히 스타일을 적용하고 여러 버튼에 재사용하려는 목적도 있으므로 커스텀뷰보단 ViewModifier로 만들기

struct RoundedButton: View {
    var title: String
    var action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .padding()
                .foregroundColor(.white)
                .background(Color.blue)
                .cornerRadius(10)
        }
    }
}

• ViewModifier를 준수하고 body(content:) 메서드를 구현

struct RoundedButtonStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .foregroundColor(.white)
            .background(Color.blue)
            .cornerRadius(10)
    }
}

• 이 ViewModifier를 사용

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Press Me") {
                print("Button pressed!")
            }
            .modifier(RoundedButtonStyle())
        }
    }
}

 

• ViewModifier를 사용할 때의 이점은 스타일을 공통화하여 코드 중복을 피할 수도 있지만, 스타일들을 추상화하여 개발자 입장에서는 추상화된 기능들을 사용하여 단순히 무엇을 만들 것인지에 관한 관심을 집중으로 조금 더 선언적 프로그래밍에 근접한 형태로 개발이 가능