SwiftUI) @ViewBuilder와 @resultBuilder

🌈 @ViewBuilder 란 ?

: SwiftUI에서 여러 View를 그룹화해서 반환할 수 있도록 도와주는 특별한 빌더 문법. 

보통 Swift 함수는 return에 하나의 값을 반환하지만, ViewBuilder를 사용하면 다수의 View를 선언식으로 나열할 수 있게 해줌.

 

 

- 간단한 예시 

struct MyView: View {
    var body: some View {
        VStack {
            Text("Hello")
            Text("World")
        }
    }
}

-> VStack 의 trailing closure는 ViewBuilder로 정의된 클로저 이기 때문에 Text를 여러 개 나열 할 수 있음

 

 

✅ ViewBuilder가 없으면?

func makeView() -> some View {
    // 이렇게는 안됨 (컴파일 에러)
    Text("Hello")
    Text("World")
}

 

Swift는 기본적으로 하나의 View만 반환할 수 있는데,

ViewBuilder를 쓰면 여러 View를 마치 하나인 것처럼 묶어줄 수 있음

 

✅ ViewBuilder를 직접 사용한 예시

@ViewBuilder
func greetingView() -> some View {
    Text("Hello")
    Text("World")
}

• @ViewBuilder를 붙이면 여러 View를 반환하는 함수가 가능해져.
• Swift가 자동으로 묶어서 처리해줌.

 

✅ ViewBuilder의 장점

 

• SwiftUI의 선언적 UI 문법을 깔끔하게 사용할 수 있음
• 뷰 조합 시 가독성이 높아짐
• 조건문과 반복문을 유연하게 적용 가능

VStack {
    if isLoggedIn {
        Text("Welcome!")
    } else {
        Text("Please log in.")
    }
}

-> 이런 조건 분기도 자연스럽게 쓸 수 있음.

 

 

사실 @ViewBuilder는 Swift의 @resultBuilder 문법을 활용해서 만든 '커스텀 빌더' 중 하나
SwiftUI를 제대로 이해하려면 @resultBuilder의 구조를 아는게 좋음.

 

 

✅ @resultBuilder란?

- 다양한 표현식들을 하나의 최종 결과로 합쳐주는 기능을 가진 Swift의 특별한 어트리뷰트

 

• "여러 줄의 코드를 한 덩어리로 합쳐주는 규칙"을 정의할 수 있게 해줌.
• SwiftUI의 ViewBuilder, SwiftRegexBuilder, StringBuilder 등에 사용됨

 

✅ 기본 구조

@resultBuilder는 컴파일러가 어떤 함수를 어떻게 해석할지 알려주는 "컴파일러 가이드" 같은 역할을 해.

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

@ArrayBuilder
func makeArray() -> [Int] {
    1
    2
    3
}

// 결과: [1, 2, 3]

- buildBlock 메서드: 여러 표현식을 묶어주는 역할

 

✅ 필수 메서드

메서드	역할
buildBlock	여러 표현식을 하나로 묶음
buildOptional	if 문에서 사용, nil일 수도 있음
buildEither(first:) / buildEither(second:)	if-else에서 분기 선택
buildArray	ForEach 같은 반복문 지원
buildLimitedAvailability	@available 같은 조건 처리

 

🔍 자세히 보기

1. buildBlock 

static func buildBlock(_ components: View...) -> View { }

- VStack { Text("a") ; Text("b") } 처럼 여러 View를 하나로 묶을 때 사용

 

 

2. buildEither

static func buildEither(first: View) -> View { }
static func buildEither(second: View) -> View { }

- if, else 문을 사용할 때 컴파일러가 자동으로 이 메서드를 호출

 

 

3. buildOptional

static func buildOptional(_ component: View?) -> View { }

- if 단독문에서 optional 값을 처리 할 때 호출

 

 

4. buildArray

static func buildArray(_ components: [View]) -> View { }

- ForEach 같은 반복문 처리할 때 호출

 

✅ SwiftUI의 ViewBuilder 내부

@resultBuilder
public struct ViewBuilder {
    public static func buildBlock(_ components: some View...) -> some View { ... }
    public static func buildOptional(_ component: some View?) -> some View { ... }
    public static func buildEither(first component: some View) -> some View { ... }
    public static func buildEither(second component: some View) -> some View { ... }
    public static func buildArray(_ components: [some View]) -> some View { ... }
}

 

👉 즉, SwiftUI에서

VStack {
    if isOn { Text("ON") }
    else { Text("OFF") }
}

이렇게 작성하면 실제로는 ViewBuilder.buildEither가 호출 되고, 컴파일러가 다 조립해주는 것 !

 

 

다시 ViewBuilder로 돌아와서, 
그럼 ViewBuilder를 직접 사용하면 좋은 경우는 언제일까 ?

 

 

✅ ViewBuilder를 직접 사용하면 좋은 경우

1. 여러 View를 반환하는 커스텀 함수나 컴포넌트를 만들 때 

@ViewBuilder
func CustomSection(title: String) -> some View {
    Text(title)
        .font(.headline)
    Divider()
}

👉 @ViewBuilder 덕분에 Text와 Divider를 함수에서 여러 줄로 바로 리턴 가능.

 

2. 재사용 가능한 컴포턴트를 만들 때 

- 특히 SwiftUI에서는 Slot API 같은 디자인을 구현할 때 ViewBuilder가 정말 유용해.

* Slot API는 "내가 만든 컴포넌트 안에, 다른 사람이 '원하는 View'를 꽂아 넣을 수 있게 만든 구조"

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

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

    var body: some View {
        VStack {
            content()
        }
        .padding()
        .background(Color.gray.opacity(0.2))
        .cornerRadius(12)
    }
}

 

👉 이렇게 만들면 내부에 원하는 View를 마음대로 넘겨줄 수 있음.

CustomCard {
    Text("Hello")
    Image(systemName: "star")
}

이게 VStack { }처럼 동작하는 원리.
(사실 VStack도 이런 식으로 ViewBuilder를 파라미터로 받음)

 

✅ 재사용 가능한 컴포넌트 만들기 추가 예시

 

1) 그냥 일반 컴포넌트

struct BasicCard: View {
    var body: some View {
        VStack {
            Text("Title")
            Text("Content")
        }
    }
}

👉 이건 고정된 뷰야. 항상 "Title" + "Content"만 보여줘.
다른 화면에서 재활용하기엔 딱 이거밖에 못 보여줌.

 

2) Slot API를 적용한 컴포넌트 - 위의 첫번째 코드블럭 

 

• content: () -> Content → 💡 내가 View를 "슬롯처럼" 넘겨줄 수 있음
• @ViewBuilder → 여러 View를 나열할 수 있음

CustomCard {
    Text("이건 내 카드 제목")
        .font(.headline)
    Text("이건 내 카드 내용")
        .font(.subheadline)
    Image(systemName: "star.fill")
        .foregroundColor(.yellow)
}

 

👉 결과:

• CustomCard라는 "틀"은 재사용하고
• 안에 들어가는 내용은 내가 원하는 대로 바꿀 수 있음
• 즉, 내가 만든 컴포넌트의 뼈대는 유지하고, 내부는 유연하게 커스터마이징 가능해짐 !

 

 

 

3. 조건문과 반복문이 들어가는 복잡한 View 조립 함수 만들 때 

@ViewBuilder
func StatusView(isActive: Bool) -> some View {
    if isActive {
        Text("Active")
            .foregroundColor(.green)
    } else {
        Text("Inactive")
            .foregroundColor(.red)
    }
}

👉 if-else가 자연스럽게 작동하는 이유는 ViewBuilder가 내부적으로 buildEither를 호출하기 때문.

 

4. SwifUI Container를 커스텀으로 만들 때 

- SwiftUI의 VStack, HStack 같은 컨테이너를 직접 만들고 싶을 때.

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

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

    var body: some View {
        VStack(alignment: .leading) {
            content()
        }
    }
}

👉 이러면 CustomStack { ... } 형태로 내가 만든 Stack을 사용할 수 있어.

 

 

 

✅ 언제 안 써도 되는가?

• 일반적인 View 파일에서 body를 작성할 때 (자동 적용됨)
• 단일 View만 반환하는 간단한 함수

 

그럼 ViewBuilder를 사용할 때 주의해야할 점이 있을까 ?

✅ ViewBuilder 사용할 때 주의할 점

1. 반환 View는 항상 동일한 타입으로 묶여야 한다

- ViewBuilder는 여러 View를 반환하는 것 같지만, Swift 는 결국 body에서 하나의 View 타입만 필요함.

✔️ 어떻게 해결하냐면 → SwiftUI가 내부에서 TupleView나 Group으로 묶어줌.

VStack {
    if condition {
        Text("True")
    } else {
        Image(systemName: "star") // 가능, but 주의 필요
    }
}

✔️ 주의:
SwiftUI가 알아서 묶어주긴 하지만, 복잡한 경우 Swift가 타입 추론을 못 할 수도 있어.

👉 이럴 땐 Group {}로 명시적으로 묶어주면 오류를 피할 수 있어.

 

🔥 Group은 뭐냐면:

Group은 SwiftUI가 제공하는 타입 중립 컨테이너야.
내부에 어떤 View가 들어오든 항상 같은 타입: Group<_Content>

VStack {
    if condition {
        Group { Text("True") }
    } else {
        Group { Image(systemName: "star") }
    }
}

👉 타입 관점에서 보면:

• Group { Text("True") } → 타입: Group<Text>
• Group { Image(systemName: "star") } → 타입: Group<Image>

 

 

2. 복잡한 조건문 중첩 시 타입 추론이 깨질 수 있음

- if, else if, else 같은 복잡한 분기문이 많아지면, 컴파일러가 타입을 제대로 추론 못하는 경우가 있음

✔️ 이럴 때도 Group을 잘 써주거나, View를 따로 빼주는 게 좋아.

 

3. ViewBuilder는 View에서만 쓸 수 있음

- ViewBuilder는 SwiftUI View 컨텍스트에서만 유효.

로직 코드, 일반함수에서는 사용 불가, 항상 View를 반환해야 함

 

4. 파라미터로 넘길 때 escaping 주의 

let content: () -> Content

- 보통 이렇게 선언하지만, ViewBuilder를 사용할 경우 -> @escaping을 붙이는 걸 잊으면 에러 발생할 수 있음

✔️ SwiftUI의 대부분의 API는 이 부분을 이미 처리해주지만, 내가 직접 컴포넌트를 만들 땐 꼭 확인해야 해.

 

 

5. ViewBuilder 내부는 최대 10개까지만 View를 직접 나열 가능 (Swift 제한)

이건 Swift 컴파일러의 제약인데:

VStack {
    Text("1")
    Text("2")
    ...
    Text("11") // 여기서부터 에러날 수도 있음
}

✔️ Swift의 Tuple이 10개까지만 지원돼서, 11개 이상 View를 나열하면 Swift가 타입을 추론하지 못해.

 

👉 이럴 땐 ForEach로 바꿔서 해결 가능:

VStack {
    ForEach(0..<11) { index in
        Text("\(index)")
    }
}

 

 

6. ViewBuilder는 일반적인 리턴값 함수와 다르다

- 함수에서 여러 값을 나열해도 return을 쓰지 않고 마지막 줄을 리턴하게 작성해야됨 !! 

- SwiftUI의 선언적 문법 스타일 

 

✔️ 만약 return을 쓴다면 → 컴파일 오류 날 수도 있어. !!