[iOS/SwiftUI] @ViewBuilder, @resultBuilder 가 무엇일까?

ViewBuilder

A custom parameter attribute that constructs views from closures.

@resultBuilder struct ViewBuilder

SwiftUI 에서 ViewBuilder 는 클로져를 통해 뷰 계층을 전달할 수 있는 속성이다.

• ViewBuilder 를 이용하면 함수나 클로저는 여러개의 뷰를 반환할 수 있다.
• 여러개의 뷰를 전달해야하는 상황에서 코드를 깔끔하게 작성할 수 있다.

😯 resultBuilder ?

• ViewBuilder 는 @resultBuilder 프로퍼리 래퍼가 붙어 있는데 해당 속성은 Swift5.4 에 도입되었고 기존 명칭은 @_functionBuilder 이다.
  • SE-0289의 ResultBuilder
  • resultBuilder 는 뷰에 한정되지 않고 함수, 프로퍼티, 타입에 활용될 수 있는 형태로 커스텀한 문법을 가진 빌더를 작성할 수 있다.
  • ViewBuilder, resultBuilder 는 DLS(Declarative Language Structures, 선언적 언어 구조) 의 일종으로 볼 수 있다.
• 아래 예시를 보면 @NumberListBuilder 를 사용한 메소드에 줄바꿈으로 작성된 1, 2, 3 을 배열로 변환할 수 있다.

@resultBuilder
struct NumberListBuilder {
    static func buildBlock(_ numbers: Int...) -> [Int] {
        numbers
    }
}

@NumberListBuilder
func makeNumberList() -> [Int] {
    1
    2
    3
}

let numbers = makeNumberList()
print(numbers) // 출력: [1, 2, 3]

• HTMLBuilder 를 만들어 html 구조를 작성할 수 있는 예제

@resultBuilder
struct HTMLBuilder {
    static func buildBlock(_ components: HTMLComponent...) -> String {
        components.map { $0.htmlString }.joined()
    }
}

protocol HTMLComponent {
    var htmlString: String { get }
}

struct TextComponent: HTMLComponent {
    let text: String
    
    var htmlString: String {
        "<p>\(text)</p>"
    }
}

struct LinkComponent: HTMLComponent {
    let text: String
    let url: String
    
    var htmlString: String {
        "<a href=\"\(url)\">\(text)</a>"
    }
}

func createHTML(@HTMLBuilder content: () -> String) {
    let html = content()
    print(html)
}

createHTML {
    TextComponent(text: "Hello, World!")
    LinkComponent(text: "OpenAI", url: "https://openai.com")
    TextComponent(text: "Welcome to Swift programming!")
}

• Regex builder DSL 도 예시로 볼 수 있다.
  • https://github.com/apple/swift-evolution/blob/main/proposals/0351-regex-builder.md#introduction

import RegexBuilder

let emailPattern = Regex {
  let word = OneOrMore(.word)
  Capture {
    ZeroOrMore {
      word
      "."
    }
    word
  }
  "@"
  Capture {
    word
    OneOrMore {
      "."
      word
    }
  }
} // => Regex<(Substring, Substring, Substring)>

let email = "My email is my.name@mail.swift.org."
if let match = try emailPattern.firstMatch(in: email) {
  let (wholeMatch, name, domain) = match.output
  // wholeMatch: "my.name@mail.swift.org"
  //       name: "my.name"
  //     domain: "mail.swift.org"
}

ViewBuilder 활용 - 자식뷰 전달

메소드의 클로져 파라미터에 @ViewBuilder 를 붙여 자식뷰를 전달할 때 사용할 수 있다.

• contextMenu 라는 메소드를 통해 여러개의 자식뷰를 전달할 수 있다.
  

  

  
  

  

• 특정한 View 를 만들고 여러개의 자식뷰를 속성으로 갖도록 initializer 에서 전달할 수 있다.

struct Stack<Content: View>: View {
    let content: () -> Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    var body: some View {
        VStack {
            content()
        }
    }
}

Stack {
    Text("Cut")
    Text("Copy")
    Text("Paste")
}

ViewBuilder 활용 - computed property, method

View 구조체 코드 내에서만 사용되는 간단한 뷰에 대해 computed property 혹은 method 로 뺄 경우에 활용할 수 있다.

• 단일 뷰를 반환하는 경우에서는 @ViewBuilder 를 붙이지 않아도 되지만,
• 여러개의 뷰를 반환하는 경우 @ViewBuilder 를 붙이지 않으면 컴파일 에러를 발생시킨다.

---

• computed property 에서 여러개의 뷰를 반환하는 코드
  • 해당 코드에서 ViewBuilder 를 붙이지 않으면 컴파일 에러가 발생된다.

struct ContentView: View {
    @ViewBuilder
    var greeting: some View {
        if shouldShowGreeting {
            Text("Hello, SwiftUI!")
            Text("Welcome to the world of SwiftUI!")
        } else {
            EmptyView()
        }
    }
    
    var shouldShowGreeting: Bool = true
    
    var body: some View {
        VStack {
            greeting
        }
    }
}

• computed property 에서 단일 뷰를 반환하는 코드
  • 해당 코드에서는 ViewBuilder 가 없어도 된다

struct ContentView: View {
    var shouldShowGreeting: Bool = true
    
    var greeting: some View {
        if shouldShowGreeting {
            return Text("Hello, SwiftUI!")
        } else {
            return Text("Goodbye, SwiftUI!")
        }
    }
    
    var body: some View {
        VStack {
            greeting
        }
    }
}

• method 에서 여러개의 뷰를 반환하는 코드

struct ContentView: View {
    var shouldShowGreeting: Bool = true

    var body: some View {
        VStack {
            greeting(shouldShowGreeting)
        }
    }

    @ViewBuilder
    func greeting(_ shouldShowGreeting: Bool) -> some View {
        if shouldShowGreeting {
            Text("Hello, SwiftUI!")
            Text("Welcome to the world of SwiftUI!")
        } else {
            EmptyView()
        }
    }
}

참고 문서

• @ViewBuilder
  • https://developer.apple.com/documentation/swiftui/viewbuilder
  • https://zeddios.tistory.com/1324
• @resultBuilder
  • https://github.com/apple/swift-evolution/blob/main/proposals/0289-result-builders.md
  • https://minsone.github.io/swift-resultbuilder
  • https://medium.com/hcleedev/swift-resultbuilder는-무엇일까-a97ab7a47be6