🤓 학습배경

SwiftUI로 뷰를 만들다보면 ViewBuilder라는 프로퍼티 래퍼를 만나게 된다. 이 친구의 역할은 뭐고 어떻게 다양한 뷰들을 하나로 묶어주는 걸까라는 의문이 생겼다. 그래서 해당 내용에 대해 좀 더 공부해보게 되었다.

😎 학습내용

resultBuilder

ViewBuilder에 대해 찾아보다보니 resultBuilder에 대한 내용을 찾아볼 수 있었다. @resuiltBuilder는 무엇일까? 먼저 예시 코드를 보자

@resultBuilder
struct AddEvenNumbers {
    static func buildBlock(_ components: Int...) -> Int {
        var final: Int = 0
        
        for part in components {
            final += part % 2 == 0 ? part : 0
        }
        
        return final
    }
}

@AddEvenNumbers
var result: Int {
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
}

print(result)//30

다음 코드는 짝수만 골라서 그 합을 더해주는 @resuiltBuilder이다. 먼저 @resuiltBuilder를 적용한 구조체를 생성해서 프로퍼티 래퍼를 만들어주고 내부에서 상세 로직을 구현한다. 그러면 생성한 프로퍼티 래퍼를 적용하면 result 변수처럼 활용할 수 있다. 요소들을 나열하고 해당 요소들을 정해진 규칙에 따라 결합, 처리해주는 것이 바로 @resuiltBuilder이다. @resuiltBuilder를 구현해보면 buildBlock와 같은 필수 메서드부터 시작해서 if문, Optional일 경우 값들을 처리하는 메서드들이 구현되어 있다. 해당 메서드들을 활용해서 요소들을 다양하게 처리할 수 있다.

result 변수의 형태를 보면 비슷한 어떤게 떠오르지 않나…? 맞다 바로 SwiftUI의 View 선언 방식이다. 두 방식이 비슷해 보이는 이유는 SwiftUI의 ViewBuilder도 @resuiltBuilder를 채택해서 만들어진 것이기 때문이다.

ViewBuilder

ViewBuilder는 일반적으로 자식 뷰를 생성하는 클로저 매개변수에 대한 매개변수 속성으로 사용되며, 이러한 클로저가 여러 개의 자식 뷰를 제공할 수 있도록 합니다.

ViewBuilder는 하나의 클로저로 여러 개의 자식 뷰를 다룰 수 있도록 한다. 우리가 VStack과 같은 스택 내부에 여러 자식 뷰들을 추가하고 쉽게 다룰 수 있는 것도 VStack 내부를 보면 클로저 매개변수에 ViewBuilder 속성이 적용되어 있기 때문이다. 이렇듯 우리는 ViewBuilder를 활용해서 여러 자식 뷰들을 한 번에 정의하고 관리할 수 있다. 또한 ViewBuilder 형식으로 뷰를 관리하면 가독성도 좋다!

ViewBuilder는 다음과 같은 상황에서 유용하게 사용될 수 있다.

private func ImageCellView(model: ImageDTO) -> some View {
    if let image = imageDict[model.id] {
        thumbnailImageView(image: image)
            .onAppear{
                debugPrint("original appeared \\(model.id)")
            }
    } else {
        waitingFetchingView(model: model)
    }
}

다음 코드는 딕셔너리에 이미지가 없다면 PlaceHolder(waitingFetchingView)를 보여주고, 있다면 thumbnailImageVIew를 보여주는 메서드이다. 가만 보면 로직상 문제가 없어보이지만 해당 메서드는 컴파일 오류가 난다. 왜냐하면 리턴 타입이 some View이기 때문에 컴파일 과정에서 하나의 타입으로 추론이 가능해야 하는데 해당 메서드는 두 가지 타입의 뷰가 동시에 존재하기 때문에 컴파일 에러가 발생한다. 그럴 때 저기에 ViewBuilder 속성을 더해주면 해당 문제를 해결해줄 수 있다.

@ViewBuilder
private func ImageCellView(model: ImageDTO) -> some View { ... }