SwiftUI와 UIKit 뷰 구성하는 법 비교하기 ( 선언형, 절차형 패러다임 비교)

 

SwiftUI - 선언형 프로그래밍

• 선언형 프로그래밍에서는 "무엇"을 원하는지를 코드로 작성합니다.
• 개발자는 원하는 결과를 설명하고, 시스템이 그 결과를 어떻게 달성할지 결정합니다.

SwiftUI 예제

다음 코드에서 개발자는 어떠한 컴포넌트들이 어떤 형태가 되어야하는지 결과 상태를 코드로 명시합니다.
각 컴포넌트들이 어떻게 그 상태에 도달할지에 대한 설명은 하지 않습니다.

VStack(spacing: 20) {
    Text("Hello, World!")
    Image(systemName: "star.fill")
    Spacer()
    Button("Tap me") {
        print("Button tapped")
    }
}
.padding()

• 수직으로 요소들을 쌓고 싶다 (VStack)
• 요소들 사이에 20포인트의 간격을 원한다 (spacing: 20)
• 텍스트, 이미지, 그리고 버튼을 원한다
• 이미지 아래에 가능한 많은 공간을 원한다 (Spacer())
• 전체 스택 주위에 기본 패딩을 원한다 (.padding())

개발자가 원하는 상태를 선언하면 SwiftUI는 이러한 선언을 바탕으로 레이아웃을 계산하고 렌더링합니다.

UIKit - 절차형 프로그래밍

• 절차형 프로그래밍에서는 "어떻게" 원하는 결과를 얻을지 단계별로 설명합니다.
• 개발자는 명시적으로 각 단계가 어떻게 구성되어야하는지를 정의해야 합니다.

UIKit 예제

class MyViewController: UIViewController {
    private let titleLabel = UILabel()
    private let starImageView = UIImageView()
    private let actionButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()

        setupViews()
        setupConstraints()
    }

    private func setupViews() {
        titleLabel.text = "Hello, World!"
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(titleLabel)

        starImageView.image = UIImage(systemName: "star.fill")
        starImageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(starImageView)

        actionButton.setTitle("Tap me", for: .normal)
        actionButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        actionButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(actionButton)
    }

    private func setupConstraints() {
        NSLayoutConstraint.activate([
            titleLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            starImageView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20),
            starImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            actionButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
            actionButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
    }

    @objc private func buttonTapped() {
        print("Button tapped")
    }
}

• 각 UI 요소를 명시적으로 생성하고 설정합니다.
• Auto Layout 제약 조건을 통해 각 요소의 위치와 크기를 명시적으로 정의합니다.
• 버튼의 동작을 명시적으로 설정합니다.
• SwiftUI에서는 원하는 컴포넌트의 최종 상태만 명시해주면 되었다면 UIKit에서는 원하는 컴포넌트를 어떻게 생성(초기화) 할지?, 생성한 컴포넌트의 속성은 어떻게 정의할것인지? 컴포넌트를 어떤 계층에 올릴건지? 위치한 계층에서 어디에 위치시킬건지? 해당 컴포넌트가 사용자와의 상호작용시 동작을 어떤 방식으로 할지? 모두를 개발자가 각 단계에 맞춰 구현해주어야합니다.