SwiftUI - ViewBuilder란?

안녕하세요.

오늘은 SwiftUI의 ViewBuilder에 대해 정리해보려고 합니다.

시작해볼까요?

 

---

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

✅ 1. ViewBuilder 란?

 

공식문서에 따르면 ViewBuilder은 클로저의 파라미터로써 뷰를 구성한다고 합니다.

우리는 주로 ViewBuilder를 Child 뷰를 생성하는 클로저의 파라미터로 사용하며 해당 클로저는 여러 개의 자식 뷰를 생성할 수 있게 된다고 하네요.

 

✅ 2. SwiftUI에서의 ViewBuilder 사용

그럼 SwiftUI에서 ViewBuilder는 언제 사용되고 있을까요?

우선 아래의 코드를 확인해봅시다.

 

위의 코드는 SwiftUI에서 View가 어떻게 구현되어있는지에 관련된 코드입니다.

흔히들 보는 struct ContentView: View 에서의 View 죠.

ContentView에서는 파라미터로 body를 가지고 있는데 위의 코드를 보면 바로 이 body가 @ViewBuilder로 생성된 자식 View임을 알 수 있습니다.

 

이 외에도 우리가 자주 사용하는 VStack, HStack에서도 @ViewBuilder은 사용되며 대표적으로 VStack의 코드는 아래와 같습니다.

파라미터로 @ViewBuilder를 받아주고 있죠.

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

 

✅ ViewBuilder로 커스텀 View 생성

그러면 이제 ViewBuilder를 이용하여 직접 커스텀 뷰를 생성해보도록 하겠습니다.

func customView<Content: View>(@ViewBuilder content: () -> Content) -> some View {
    VStack {
        content()
    }
}

struct ContentView: View {
    var body: some View {
        customView {
            Text("Hello World!")
        }
    }
}

 

위의 코드의 결과물은 그럼 어떻게 될까요?

 

위의 코드의 경우 CustomView에서는 파라미터로 @ViewBuilder인 content를 받아주고 있기 때문에 customView 내부에 Text()를 여럿 넣게 되면 해당 Text()는 VStack에 순차적으로 쌓에 계층 구조가 형성될 것입니다.

 

이렇게 우리는 원하는 뷰를 커스텀하여 사용할 수 있게 되며 이는 if, for, switch 문과 같은 제어문에서 굉장히 유용하게 사용됩니다.

 

오늘은 이렇게 @ViewBuilder와 그를 통한 커스텀 뷰 생성에 대해 알아보았습니다.

감사합니다~