SwiftUI 재사용가능한 뷰를 만들기 위해 필요한 @ViewBuilder

# 🥨  @ViewBuilder란? 

정의 : 클로저로 받은 뷰를 구성하는 custom parameter attribute

즉, 클로저로 받은 (child)view에 대한 어트리뷰트 키워드이며, 우리가 활용할 때 중요한건 closure 내부에 (child)view 를 전달한다는 것이다. 

* swift에서 말하는 @어트리뷰트 키워드란, 컴파일러에게 추가적인 정보를 알려주는 역할을 한다.

 

# 🥨  SwiftUI에서 정의한 Button에서도 볼 수 있는  @ViewBuilder  

https://developer.apple.com/documentation/swiftui/button

Button | Apple Developer Documentation

SwiftUI에서 정의한 Button 생성자는 아래와같다.

init(action: @escaping () -> Void, @ViewBuilder label: () -> Label)

우리가 위의 정의에서 확인한 처럼 label 클로저에 View를 전달하고 있다. 우리가 이처럼 뷰로 구성된 label을 클로저로 전달받을 수 있는 것도 SwiftUI에서 정의한 Button에서 label 매개변수에 @ViewBuilder 키워드가 붙어있기 때문이다. 

Button{
	print("취소버튼")
} label : {
	Text("취소")
}

 

# 🥨  @ViewBuilder 언제 사용하면 좋을까?

공통적인 부모 Container를 만드는데 유용하다.

나같은 경우에는 주로 비슷한 레이아웃을 갖는 뷰에서 상황마다 내부 내용이 바뀌는 경우에 사용해주었다.예를들어, 앱에서 사용자에게 어떤 정보를 안내하거나 의사를 확인해야할 때 모달을 띄우곤한다. 모달의 내부 뷰의 레이아웃이나 구조는 크게 차이나지 않고 상황별로 버튼이나 내용의 문단 개수 등이 바뀐다. 이러한 경우에 세부적으로 다른 뷰들을  클로저로 받으면 재사용가능한 모달로 모듈화할 수 있는 것이다.

 

# 🥨  공식문서

ViewBuilder 관련한 애플 공식문서

https://developer.apple.com/documentation/swiftui/viewbuilder

ViewBuilder | Apple Developer Documentation

공식문서에 나온 예제를 사용해서 뷰를 그려주었다.

import SwiftUI

struct MyStruct1 {
    func contextMenu<MenuItems: View>(
        @ViewBuilder menuItems: () -> MenuItems
    ) -> some View {
        VStack{
            Text("@ViewBuilder로 받은 뷰 보여주기")
                .foregroundColor(.red)

            menuItems()
        }  
    }
}


struct ViewBuilderPracticeView: View {
    let myStruct1 : MyStruct1 = MyStruct1()

    var body: some View {
        myStruct1.contextMenu { // 클로저로 뷰를 전달한다

            Text("Cut")

            Text("Copy")

            Text("Paste")
        }
    }
}

 

 

# 🥨  실제 앱에 활용

실제로 앱에서 모달을 만들 때 활용했던 코드 예시는 아래와 같다.

//클로저로 받는 뷰들을 제네릭으로 정의해준다

struct CustomModal<H, C, F>: View where H: View, C : View, F: View {
    @Binding var showingModal: Bool
    var header : () -> H
    var content : () -> C
    var footer : () -> F
 
    //초기화 코드에서 @ViewBuilder 키워드를 사용하여 구조체 초기화 시 클로저로 뷰를 받을 수 있도록한다
    //@escaping 키워드가 사용된 이유는 뷰 초기화 중에 바로 사용되지 않는다는 의미이다
    
    init(
        showingModal : Binding<Bool>,
        @ViewBuilder header : @escaping () -> H,
        @ViewBuilder content : @escaping () -> C,
        @ViewBuilder footer : @escaping () -> F
    ) {
        self._showingModal = showingModal
        self.header = header
        self.content = content
        self.footer = footer
    }
    
    
    var body: some View {
        VStack {
            HStack{
                Spacer()
                Button{
                    showingModal = false
                }label:{
                    Text("x")
                        .foregroundColor(.black)
                }
                
            }
            header()
                .padding(.vertical)
            
            content()
                .padding(.bottom)
            
            footer()
                .padding(.bottom)
        }
        .padding()
        .background(Color.gray)
        .frame(width: UIScreen.main.bounds.width*0.8)
        .cornerRadius(12)
    }
}

위에서 정의한 모달 뷰를 아래처럼 활용해줄 수 있다.

struct ViewBuilderPracticeView: View {
    @State var isShown : Bool = false
    
    var body: some View {
        
        ZStack{
            
            Button{
                self.isShown = true
            } label : {
                Text("탈퇴하시겠습니까?")
                    .asGreenToggleButton(isGreen : true)
                    .frame(width : 200)
                    .padding()
            }
            
            if isShown {
                CustomModal(
                    showingModal : $isShown,
                    header : {
                        Text("정말 탈퇴하시겠습니까?")
                    },
                    content : {
                        Text("지금 탈퇴하시면 사용했던 기록들이 삭제됩니다 그래도 탈퇴를 진행하시겠습니까?")
                    },
                    footer : {
                        HStack{

                            Button{
                                print("취소버튼")
                                self.isShown = false
                            } label : {
                                Text("취소")
                                    .asGreenToggleButton(isGreen : true)
                            }

                            Button{
                                print("확인버튼")
                                self.isShown = false
                            } label : {
                                Text("확인")
                                    .asGreenToggleButton(isGreen : false)
                            }
                        }

                    }

                )
            }
        }
        
    }
}

 

아래와 같은 뷰를 만들 수 있다.