[SwiftUI] @ViewBuilder

• 우리가 보통 함수나 객체를 사용할때는 다음과 같다.

  함수명 혹은 객체명([인자])

• 그러나 SwiftUI를 사용하며 뷰에서 다음과 같은 구문은 도대체 무엇인지 의아했다.

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            Text("Hello")
            Text("How are you?")
        }
        ...

• SwiftUI에서 커스텀 컨테이너 뷰를 만들때 ViewBuilder 클로저 속성을 이용해 유연성을 갖는 뷰를 만들 수 있다.

struct MyVStack<Content: View>: View {
    let content: () -> Content    // 클로저 표현식을 담는 변수
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    } // 클로저 표현식({})를 인자로 받음으로서 다수의 하위뷰들을 받아 content변수에 넣음.
    
    var body: some View {
        VStack(spacing: 10) {
            content()
        }
        .font(.largeTitle)
    }
}

• 위 선언은 View 프로토콜을 따르며 정적 뷰를 포함하는 대신 하위 뷰들을 초기화 메서드에 전달되고 ViewBuilder에 의해 처리되어 하위 뷰에 포함되게 된다. 다음과 같이 사용될 수 있다.

MyVStack {
    Text("Text 1")
    Text("Text 2")
    HStack{
        Image(systemName: "star.fill")
        ...
    }
    ...
}

• ViewBuilder는 여러개의 자식 뷰를 만드는 것을 허용하면서 자식 뷰를 만드는 클로저의 인자를 위한 파라미터(인자) 속성으로 사용한다. 참고로 10개까지만 받을 수 있고 그 이상은 오류, Group뷰로 묶어서 해결할 수 있다.

참고: 핵심만 골라 배우는 SwiftUI 기반의 iOS 프로그래밍, 닐 스미스