VStack 안에서 여러 개의 View를 쉼표로 구분하지 않는 이유

궁금증이 생겼다

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.spacing = 10

        let imageView = UIImageView(image: UIImage(systemName: "globe"))
        imageView.contentMode = .scaleAspectFit
        stackView.addArrangedSubview(imageView)

        let label = UILabel()
        label.text = "Hello, world!"
        stackView.addArrangedSubview(label)

        stackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackView)

        NSLayoutConstraint.activate([
            stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

 

UIKit을 위주로 개발을 하다가, 처음 SwiftUI를 접했을 때 굉장히 신기한 점 두 가지가 있었다.

첫 번째는 VStack 안에 여러 개의 View를 넣는데, 그 View들을 쉼표로 구분하지 않는다는 점이었다. 그리고 두번째는 VStack에 UIKit 처럼 ParentView에 ChildView를 추가하는 방식도 아니고, 그냥 Vstack 클로저 안에 View를 넣기만 하면 View가 뚝딱하고 만들어진다는 점이었다.

VStack 안에서 어떤 일이 일어나고 있길래, 이토록 쉽게 View가 만들어지는 것일까?

VStack

@frozen public struct VStack<Content> : View where Content : View {

    /// 주어진 간격과 수평 정렬을 사용하여 인스턴스를 생성합니다.
    ///
    /// - 매개변수:
    ///   - alignment: 이 스택의 하위 뷰를 정렬하기 위한 가이드입니다.
    ///     이 가이드는 모든 하위 뷰에 대해 동일한 수직 화면 좌표를 가집니다.
    ///   - spacing: 인접한 하위 뷰 간의 거리입니다. 각 쌍의 하위 뷰에 대해
    ///     스택이 기본 거리를 선택하도록 하려면 `nil`을 지정합니다.
    ///   - content: 이 스택의 내용을 생성하는 뷰 빌더입니다.
    @inlinable public init(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, @ViewBuilder content: () -> Content)

    /// 이 뷰의 본문을 나타내는 뷰의 타입입니다.
    ///
    /// 사용자 정의 뷰를 생성할 때, Swift는 필수 속성인 ``View/body-swift.property``의
    /// 구현에서 이 타입을 추론합니다.
    public typealias Body = Never
}

 

궁금증을 해결하기 위해서, VStack 이 어떻게 이뤄져 있는 건지 알아보기로 했다.

 

VStack은 제네릭 구조체로, Content 라는 제네릭 타입을 사용하며, 이 타입은 View Protocol를 준수해야 한다. 그리고 VStack 자체도 View Protocol 을 준수한다.

 

VStack의 초기화 메서드는 세 가지 매개변수를 가진다. 첫 번째, alignment는 스택 내 하위 뷰를 수평으로 정렬하는 방식으로, 기본값은 .center 이다. 두 번째, spacing 은 인접한 하위 뷰 간의 거리로, 기본값은 nil이며, 이는 스택이 기본 거리를 선택하도록 한다. 세 번째는 content 로 @ViewBuilder 속성을 사용하여 이 스택의 내용을 생성하는 클로저이다.

 

여기서 내가 가진 궁금증에 대한 해답이 될 부분은 @ViewBuilder 속성이라는 판단이 내려졌다. @ViewBuilder 속성에 의해서, VStack 내의 View들이 조합이 되는 것 같은데, 그러면 @ViewBuilder 속성은 무엇일까?

@ViewBuilder

@ViewBuilder 속성은 어떻게 이루어져 있는 것일까?

@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
@resultBuilder public struct ViewBuilder {

    public static func buildExpression<Content>(_ content: Content) -> Content where Content : View

    public static func buildBlock() -> EmptyView
    
    public static func buildBlock<Content>(_ content: Content) -> Content where Content : View

    public static func buildBlock<each Content>(_ content: repeat each Content) -> TupleView<(repeat each Content)> where repeat each Content : View
}

• iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0 이상에서 사용할 수 있음
• @resultBuilder 어트리뷰트를 사용하고 있음

@resultBuilder

Swift 5.4에 새로 생긴 기능으로 데이터 구조체를 단계별로 빌드하는 타입. 자연스럽고 선언적인 방법으로 중첩된 데이터 구조체를 생성하기 위해 도메인 - 특정 언어(DSL)를 구현하기 위해 Result Builder를 사용함.

💡 DSL이란?

“도메인” 이라는 특정 영역에서 작동하는 프로그램을 위해 설계된 일종의 소형 프로그래밍 언어. DSL은 특정 종류의 작업을 염두해 두고 설계되었기 때문에 그러한 종류의 작업을 더 쉽게 수행할 수 있는 특별한 기능을 가질 수 있음.

 

resultBuilder의 static method

static func buildBlock(_ components: Component...) -> Component

부분 결과의 배열을 단일 부분 결과로 결합함

@resultBuilder
struct ArrayBuilder {
    
    static func buildBlock(_ components: [String]...) -> [String] {
        return Array(components.joined())
    }
    
}

@ArrayBuilder var array: [String] {
    ["Apple", "Developer", "Academy"]
    ["TeaPot"]
}

print(array) // ["Apple", "Developer", "Academy", "TeaPot"]

 

static func buildExpression(_ expression: Expression) -> Component

표현식을 내부 타입으로 변환을 수행하거나 사용하는 곳에서 타입 추론을 위한 추가 정보를 제공하기 위해 구현할 수 있습니다.

@resultBuilder
struct ArrayBuilder {
    
    static func buildBlock(_ components: [String]...) -> [String] {
        return Array(components.joined())
    }
    
    static func buildExpression(_ expression: String) -> [String] {
        return [expression]
    }
    
    static func buildExpression(_ expression: [String]) -> [String] {
        return expression
    }
    
}

@ArrayBuilder var array: [String] {
    ["Apple", "Developer", "Academy"]
    ["TeaPot"]
    "Tea"
}

print(array) // ["Apple", "Developer", "Academy", "TeaPot", "Tea"]

static func buildPartialBlock(first: Component) -> Component

buildPartialBlock(accumulated:next:)

 

Result Builder에서 사용되는 메서드 중 하나로, 복잡한 빌더 블록을 단계적으로 처리하기 위해 도입된 것

Swift 컴파일러는 이 메서드를 사용하여 빌더 블록을 부분적으로 평가하고 결합할 수 있음

@resultBuilder
struct SimpleBuilder {
		// 빌더 블록의 첫 번째 표현식을 처리함 
    static func buildPartialBlock(first: String) -> String {
        return first
    }
		
		// 이전 단계에서 누적된 결과와 현재 표현식을 결합함 
    static func buildPartialBlock(accumulated: String, next: String) -> String {
        return accumulated + " " + next
    }
}

@SimpleBuilder var example: String {
    "Hello"
    "World"
}

 

그러면 다시 ViewBuilder

@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
@resultBuilder public struct ViewBuilder {

    /// 빌더 내에서 표현식을 생성합니다.
    public static func buildExpression<Content>(_ content: Content) -> Content where Content : View

    /// 아무런 뷰가 없는 블록에서 빈 뷰를 생성합니다.
    public static func buildBlock() -> EmptyView

    /// 단일 자식 뷰를 수정하지 않고 그대로 전달합니다.
    /// 자식 뷰로 작성된 단일 뷰의 예는 `{ Text("Hello") }`입니다.
    public static func buildBlock<Content>(_ content: Content) -> Content where Content : View

    /// 여러 개의 뷰를 튜플 뷰로 결합하여 생성합니다.
    public static func buildBlock<each Content>(_ content: repeat each Content) -> TupleView<(repeat each Content)> where repeat each Content : View
}

 

VStack 에서의 동작 원리

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

// VStack 이 어떻게 이루어져 있는지 
VStack {
	Text("Title").font(.title)
	Text("Contents")
}

// #1
Vstack.init(content: {
	Text("Title").font(.title)
	Text("Contents")
	return // TODO: build results using 'ViewBuilder'
})

// #2 
Vstack.init(content: {
	// 1. 결과를 생성하는 모든 명령문에 대한 변수 생성 
	let v0 = Text("Title").font(.title) 

	// result builder가 보기 전에 값이 변경됨 
	// 수정자를 구성하는 능력 + result builder 가 보기 전에 값을 수정한다 = Swift DSL 이 수정자를 자주 사용하는 이유
	let v1 = Text("Contents")
	// 2. buildBlock의 작업은 모든 매개변수를 단일값으로 처리하거나 결합하여 반환하는 것 
	return ViewBuilder.buildBlock(v0, v1)
	// 3. Vstack 이 콘텐츠로 사용할 단일 값으로 어셈블 할 수 있도록 함
})

// #2 
Vstack.init(content: {
	let v0 = Text("Title").font(.title) 
	let v1 = Text("Contents")
	return ViewBuilder.buildBlock(v0, v1)
})

 

결론

resultBuilder로 구성된 ViewBuilder 속성 덕분데, VStack 안에서 쉼표 없이 뷰들을 구분할 수 있었다.