[SwiftUI] ViewBuilder 알아보기

Definition

@resultBuilder
struct ViewBuilder

클로저에서 뷰를 구성하는 사용자 지정 파라미터 속성

 

func contextMenu<MenuItems: View>(
    @ViewBuilder menuItems: () -> MenuItems
) -> some View

클로저 파라미터를 통해 child view를 생성하고자 할 때 ViewBuilder를 사용할 수 있다. 위와 같이 파라미터로 ViewBuilder를 사용해 클로저로 child view를 포함하는 뷰를 생성할 수 있다. 

myView.contextMenu {
    Text("Cut")
    Text("Copy")
    Text("Paste")
    if isSymbol {
        Text("Jump to Definition")
    }
}

contextMenu의 menuItems 클로저로 여러 Text를 포함하는 child view를 구성할 수 있다. 

주로 복잡한 레이아웃을 쪼개어 사용자 정의 뷰로 생성하고 조합하는데 사용된다.

 

so what is ViewBuilder

• custom parameter attribute 
  • custom : SwiftUI에 의해 정의된 것이 아닌 사용자 정의에 의해 단일 복합 뷰 생성 가능
  • parameter : 함수나 이니셜라이저 파라미터 앞에 위치하는 파라미터 속성
  • attribute : 메타데이터, 추가 정보를 파라미터와 코드에 제공하는 역활
• 여러개의 뷰를 단일 복합 뷰(Composite View)로 조합 가능하게 함 (개인적으로는 클로저로 여러개의 뷰를 전달한다기 보다는 뷰 계층 구조를 전달한다고 하는게 맞는 것 같다. view의 subview, 여러 view 전달 가능하기 때문에)

advantage

• 유연성
  • 동적으로 뷰를 생성할 수 있음. 클로저 내부에서 조건문, 반복문을 사용하여 유연하게 대응 가능
  • 상위 뷰에서 @ViewBuilder를 사용하여 어떠한 뷰도 전달 할 수 있기 때문에 유연하게 커스터마이즈 할 수 있음

VStack {
	if isStart {
    	StartView()
    } else {
    	InfoView()
    }
}

• 재사용성
  • 커스텀 뷰를 생성하여 동일한 구성을 가지는 뷰에서 재사용 가능함
• 코드 간결성
  • 뷰 로직을 분리할 수 있기 때문에 복잡한 UI를 구성할 때 코드를 간결하게 할 수 있음
  • 뷰를 작은 부분으로 쪼갠 뒤 조합하여 복잡한 UI를 구성할 수 있으며 유지보수 측면의 이점을 가짐

disadvantage

• 복잡성
  • View를 분리하므로서 생기는 복잡성으로 인해 코드와 동작 원리를 이해하기 힘들게 만들 수 있으며 가독성을 해칠 수 있음
• 디버깅
  • 여러 뷰 로직이 중첩되면서 캡슐화 되기 때문에 특정 데이터가 어디서 오고 어디서 사용되는지 추적하기 어려울 수 있음
• 런타임 이슈
  • ViewBuilder가 생성하는 뷰의 갯수와 타입이 컴파일 타이밍에 결정되며 이는 타입 안정성과 런타임 이슈를 발생시킬 수 있음

 

Example

@inlinable public init(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, @ViewBuilder content: () -> Content)

정의를 보면 파라미터로 @ViewBuilder가 붙은 것을 확인할 수 있고 이 파라미터는 클로저를 통해 여러 단일 뷰를 전달 받는다. 뷰 빌더로 부터 전달된 단일 뷰들로 복합 뷰를 생성할 수 있다. ViewBuilder를 사용하면 일종의 custom container를 만들 수 있다. 

ViewBuilder를 사용해서 커스텀 컨테이너를 생성할 때 다른 파라미터 인자로 부터 필요한 디펜던시를 함께 전달 받을 수 있다. 

 

예제 코드

https://github.com/youabledev/viewbuilder_swiftui

GitHub - youabledev/viewbuilder_swiftui: viewbuilder 예제

struct NormalView<Content: View>: View { // 제네릭으로 View를 Content로
    let title: String
    let buttonName: String
    let content: () -> Content // 클로저로 전달 받음
    
    init(title: String, buttonName: String, @ViewBuilder content: @escaping () -> Content) {
        self.title = title
        self.buttonName = buttonName
        self.content = content
    }
    
    var body: some View {
        VStack(spacing: 0) {
            ZStack {
                Text(title)
                    .font(.system(.headline))
                    .fontWeight(.bold)
                
                HStack {
                    Button {
                        
                    } label: {
                        Image(systemName: "xmark")
                            .frame(width: 44, height: 44)
                            .foregroundColor(.black)
                    }
                    .padding(.leading, 14)
                    
                    Spacer()
                } //: HStack
            } //: ZStack
            .frame(maxWidth: .infinity)
            .frame(height: 48)
            
            Spacer()
            
            content()
            
            Spacer()
            
            Button {
                
            } label: {
                Text(buttonName)
                    .foregroundColor(.white)
                    .padding(.vertical, 20)
                    .frame(maxWidth: .infinity)
                    .background(.black)
            }
        }
    }
}

공통으로 사용되는 View를 ViewBuilder를 통해 생성

struct NormalView_Previews: PreviewProvider {
    static var previews: some View {
        NormalView(title: "제목", buttonName: "버튼이름") {
            Text("테스트")
        }
    }
}

preview를 설정해서 보면 공통적으로 사용할 화면 영역을 ViewBuilder 를 이용한 View로 지정할 수 있으며 클로저를 통해 표시할 뷰를 전달할 수 있음

struct ProductDetailView: View {
    var body: some View {
        NormalView(title: "상품 상세", buttonName: "구입하기") {
            GeometryReader { geometry in
                VStack(alignment: .leading) {
                    Rectangle()
                        .frame(width: geometry.frame(in: .global).size.width - 48)
                        .frame(height: geometry.frame(in: .global).size.width - 48)
                        .foregroundColor(.yellow)
                    
                    Text("가격 : 20,000")
                }
                .padding(.horizontal, 24)
            }
        } //: NormalView
    }
}

실제 사용할 때는 중복되는 뷰 코드를 작성할 필요가 없어 재사용성을 높이고 복잡한 뷰 코드를 간결

하게 만들 수 있다. 

 

출처 및 참고 사이트

ViewBuilder | Apple Developer Documentation