SwiftUI: @ViewBuilder

📌 @ViewBuilder란?

@ViewBuilder는 SwiftUI에서 여러 개의 뷰를 하나의 반환 값으로 묶어주는 속성 래퍼(Attribute Wrapper)입니다. Swift의 함수는 기본적으로 단일 반환 값을 요구하지만, @ViewBuilder를 사용하면 여러 개의 뷰를 조합하여 반환할 수 있습니다.

 

✅ @ViewBuilder 기본 사용법

import SwiftUI

struct MyView: View {
  var body: some View {
    customView()
  }

  @ViewBuilder
  func customView() -> some View {
    Text("Hello, SwiftUI!")
    Text("This is using @ViewBuilder.")
  }
}

 

• @ViewBuilder 덕분에 customView()에서 여러 개의 Text를 반환할 수 있습니다.
• 일반적인 Swift 함수는 하나의 값만 반환해야 하지만, @ViewBuilder를 사용하면 여러 개의 뷰를 하나의 View처럼 처리할 수 있습니다.

🔄 조건문과 함께 사용

 

• if-else를 활용하여 동적으로 다른 뷰를 반환할 수 있습니다.
• @ViewBuilder가 없으면 if와 else에서 같은 타입의 뷰를 반환해야 하지만, @ViewBuilder 덕분에 서로 다른 구조를 가질 수 있습니다.

🔄 Switch문과 함께 사용

enum Status {
  case loading, success, error
}

@ViewBuilder
func statusMessageView(status: Status) -> some View {
  switch status {
  case .loading:
    ProgressView()
    Text("Loading...")
  case .success:
    Text("✅ Load Successful!")
  case .error:
    Text("❌ Load Failed. Try again.")
  }
}

•  switch문을 활용하여 다양한 상태에 따라 다른 뷰를 반환할 수 있습니다.

⚠️ @ViewBuilder 사용 시 주의할 점

1. 뷰 개수가 많을 경우 Group 사용

• @ViewBuilder는 내부적으로 최대 10개의 뷰만 허용합니다.
• 이를 해결하려면 Group {}을 사용해야 합니다.

 2. ForEach에서 일반 for루프 사용 불가
- @ViewBuilder 내부에서는 일반적인 for 루프를 사용할 수 없습니다.
- 대신 ForEach를 사용해야 합니다.

❌ 
@ViewBuilder
func wrongLoopView() -> some View {
  for i in 1...5 {
    Text("Item \(i)") // 컴파일 에러 발생!
  }
}

✅ 
@ViewBuilder
func correctLoopView() -> some View {
  ForEach(1...5, id: \ .self) { i in
    Text("Item \(i)")
  }
}

3. some View 반환 타입 필수

• @ViewBuilder를 적용한 함수는 반드시 some View를 반환해야 합니다.
• some View를 생략하면 컴파일 에러가 발생할 수 있습니다.