[iOS - swift] 3. @resultBuilder 이해하기 - 선언형 UI 만들기 (Declarative UI, SwiftUI 같은 선언형 뷰 구현 방법)

1. @resultBuilder 이해하기 - 만들어진 이유

2. @resultBuilder 이해하기 - 응용하여 깔끔한 코드 만들기

3. @resultBuilder 이해하기 - 선언형 UI 만들기 (Declarative UI, SwiftUI 같은 선언형 뷰 구현 방법)

@resultBuiler 개념 복습

• 이름이 result builder인 이유?
  • 결과를 만들어주는 역할을 담당
  • 결과를 만들어준다는 의미는 lazy var로 선언것처럼 코드 블록 내에서 여러 개의 값을 취합하여 return 키워드 없이 하나의 결과로 반환하는 것을 도와주는 기능
• 목적: 빌딩을 간소화하는 것

선언형 UI란?

• *선언적: 어떻게에 관한 내용을 감추고 무엇을 하는것에 초첨을 두는 것
  • 높은 가독성
  • 뷰를 구현할 때 빠른 속도
• SwiftUI를 보면 Text()처럼 초기화 해놓고 .font, .foregroundColor와 같이 dot으로 세로로 나열하는 형태로 구현

struct ContentView: View {
    var body: some View {
        Text("iOS 앱 개발 알아가기")
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}

extension으로 SwiftUI처럼 만들기

• extension으로 특정 프로퍼티를 설정하는 setter를 만들고, 자기 자신을 return해주면 완성

import UIKit

extension UIImageView {
    func backgroundColor(_ backgroundColor: UIColor) -> UIImageView {
        self.backgroundColor = backgroundColor
        return self
    }

    func clipsToBounds(_ value: Bool) -> UIImageView {
        self.clipsToBounds = clipsToBounds
        return self
    }
}

• 사용하는쪽에서는 SwiftUI처럼 사용이 가능

private let imageView2 = UIImageView()
    .backgroundColor(.brown)
    .clipsToBounds(true)

• extension으로 구현을 하면 선언형 UI와 같은 형태지만, 아래처럼 if-else와 같은 분기문을 넣을 수 없으므로 다른 방법이 필요
  • @resultBuilder로 완성이 가능

private let imageView2 = UIImageView()
    .backgroundColor(.brown)
    .clipsToBounds(true)
    // 중간에 if-else 넣기가 불가능
    if someCondition {
    	.backgroundColor(.write)
    } else {
    	.backgroundColor(.black)
    }

@resultBuilder로 선언형 UI 빌더 만들기

• 아래처럼 if-else문이 들어가도 되도록 구현

private let imageView3 = UIImageView.build { view in
    setBackgroundColor(view, .black)
    setClipsToBounds(view, true)
    if (1...10).randomElement()! % 2 == 0 {
        setBorderWidth(view, 1)
    } else {
        setBorderWidth(view, 2)
    }
}

 

• @resultBuilder를 따르는 ImageViewbuilder 정의

@resultBuilder
struct ImageViewBuilder {
    static func buildBlock(_ components: UIImageView...) -> UIImageView {
        handle(components)
    }
    
    static func buildEither(first component: UIImageView...) -> UIImageView {
        handle(component)
    }
    static func buildEither(second component: UIImageView...) -> UIImageView {
        handle(component)
    }
    
    private static func handle(_ component: [UIImageView]) -> UIImageView {
        let imageView = UIImageView()
        component
            .forEach {
                imageView.backgroundColor = $0.backgroundColor
                imageView.clipsToBounds = $0.clipsToBounds
                imageView.layer.borderWidth = $0.layer.borderWidth
            }
        return imageView
    }
}

• name space 상 UIImageView.build로 접근하게끔 extension UIImageView안에 static 함수 정의
  • 최초에 한 번 UIImageView() 값을 전달해줘야 하므로 closure에 빈 값으로 넘기기

extension UIImageView {
    static func build(
        @ImageViewBuilder _ closure: (UIImageView) -> UIImageView
    ) -> UIImageView {
        closure(UIImageView())
    }
}

• builder 패턴에 사용할 함수 정의

func setBackgroundColor(_ view: UIImageView, _ value: UIColor) -> UIImageView {
    view.backgroundColor = value
    return view
}

func setClipsToBounds(_ view: UIImageView, _ value: Bool) -> UIImageView {
    view.clipsToBounds = value
    return view
}

func setBorderWidth(_ view: UIImageView, _ value: Double) -> UIImageView {
    view.layer.borderWidth = value
    return view
}

(완성)

• 사용하는쪽

private let imageView3 = UIImageView.build { view in
    setBackgroundColor(view, .black)
    setClipsToBounds(view, true)
    if (1...10).randomElement()! % 2 == 0 {
        setBorderWidth(view, 1)
    } else {
        setBorderWidth(view, 2)
    }
}

* 전체 코드: https://github.com/JK0369/ExResultBuilder3