UIKit vs SwiftUI 차이점

UIkit과 SwiftUI의 차이점에 대해 알아보도록 하자.

2019 wwdc에서 SwiftUI가 처음 나온 이후, 많은 사람들의 관심과 사랑을 받고 있다고 한다.

그리하여 기존에 사용하던 UIkit과 SwiftUI의 차이점을 알아보고 그 이유를 찾아보았다.

명령형 vs 선언형

UIKit는 명령형이다.

상태를 변경하기 위해서는 명령에 의해 바꿀 수 있다.
예를 들어, 버튼을 눌러서 배경화면을 바꾸는 앱이 존재한다.

버튼을 눌렀을 시 backgroundColor가 바뀌도록 명령한다는 것을 코드로 확인할 수 있다.

뷰는 실제로 어떤 것을 할지 미리 알수가 없다.

import UIKit

class ViewController: UIViewController {
    let changeButton = UIButton()
    let mainView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white

        mainView.translatesAutoresizingMaskIntoConstraints = false
        changeButton.translatesAutoresizingMaskIntoConstraints = false
        mainView.backgroundColor = .red
        changeButton.addTarget(self, action: #selector(changeColor), for: .touchUpInside)
        self.view.addSubview(mainView)
        self.view.addSubview(changeButton)
        changeButton.setTitle("바꾸기", for: .normal)
        changeButton.setTitleColor(.gray, for: .normal)
        
        NSLayoutConstraint.activate([
            mainView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
            mainView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
            mainView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            mainView.bottomAnchor.constraint(equalTo: changeButton.topAnchor),
            
            changeButton.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            changeButton.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            changeButton.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
            
        ])
    }
    
    @objc func changeColor(_ sender: UIButton) {
        mainView.backgroundColor = .green
    }
}

실행화면은 아래와 같다.

SwiftUI는 선언형이다.

명령에 의해서 상태를 변경하는 것이 아니라 사용하는 곳에서 바뀔 행동과 상태를 선언해둠으로써 사용한다.

import SwiftUI

struct ContentView: View {
    
    @State var isButtonTapped: Bool = true
    
    var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(isButtonTapped == true ? .green: .red)
            Button {
                isButtonTapped.toggle()
            } label: {
                Text("색 변환")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

실행 화면은 아래와 같다

여기에서 존재하는 Rectangle에서 내부의 상태는 명령에 의해서 바뀌지 않고 있다.

상태에 의해 변하게 되면 어떤 식으로 변하게 될지를 선언해두고 있다.

@State를 통해서 immutable한 Struct에서 프로퍼티만 mutable하게 만들 수 있다.

UIkit에서 mutating 느낌인듯 싶다!

VStack를 통해 레이아웃을 잡을 수 있다.

내부에서 만약 다른 방식의 레이아웃을 만들고 싶다면
HStack, VStack 등을 활용해서 추가하면 더 다양한 레이아웃 설정이 가능해진다.

실제 UIKit과 다르게 레이아웃을 일일이 지정해줄 필요가 없는 장점이 있어보인다!

코드가 줄어든게 확보인다

클래스기반 vs 구조체,프로토콜 기반

또 다른 차이점으로는 UIKit 는 클래스 기반이다.

UIkit는 UIView를 상속받고 있기 떄문에 상속이 필요하다.
그러므로 Class기반으로 구축이 될수밖에 없다.

SwiftUI는 Struct 와 Protocol 기반이다.

SwiftUI는 View protocol만 채택하기 때문에 상속이 필요하지 않으므로 구조체 기반으로 구축되어 있다.

이벤트중심 vs 데이터중심

마지막 차이점으로는 UIkIt는 이벤트중심이며 SwiftUI는 Data 중심이다.

그 의미로는 아래와 같다

UIkit는 이벤트가 발생했을 시 UI를 새로 그려주는 방식으로 되어있다.

SwiftUI는 Data중심이므로 상태 값이 변하는 것에 따라 UI를 바꾸어 주는 방식으로 되어있다.