다시 시작하는 SwiftUI

안녕하세요. 밀쿄입니다.

오늘부터 조금씩 SwiftUI에 대해서 알아봅시다.

 

우선 이 프레임워크의 탄생 배경부터 살펴봅시다.

현재 iOS의 앱구현에는 UIKit이 macOS 앱 구현에는 AppKit, watchOS에는 WatchKit이 사용되고 있습니다.

물론 밑바탕에 있는 Foundation이나 그래픽 영역을 공유하지만 유저 인터페이스 영역에는 앞에서 말한 것 처럼 각자 다른 프레임워크를 사용합니다. 물론 앞에서 언급한 프레임워크들은 모두다 Objective-C 기반의 UI프레임워크 입니다.

 

그렇기에 Swift 언어로 개발하면서 Objective-C와 상호작용을 위해서 여러가지 작업을 해주고있습니다.

우리가 흔하게 붙이는 함수 앞에 붙이는 @objc가 그 대표적인 예로 들수있습니다.

그리고 Swift가 세상에 나온지 약 6년만에 Swift기반의 UI프레임워크인 SwiftUI가 나오게 되었습니다.

SwfitUI는 기존처럼 플랫폼에 따라 프레임워크가 나뉘는게 아니라

애플 생태계에서 쓰이는 모든 플랫폼에서 사용 가능한 프레임워크 입니다.

 

SwiftUI에는 몇 가지 특징이 있습니다.

아래 두 가지 코드를 보겠습니다.

let greenView = UIView()
greenView.backgroundColor = .systemBlue
self.view.addSubview(greenView)
greenView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    greenView.centerXAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerXAnchor),
    greenView.centerYAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerYAnchor),
    greenView.widthAnchor.constraint(equalToConstant: 100),
    greenView.heightAnchor.constraint(equalTo: greenView.widthAnchor)
])

struct ContentView: View {
    var body: some View {
        Color(.systemBlue)
        .frame(width: 100, height: 100)
    }
}

먼저 위에 있는 코드부터 살펴보겠습니다.

위에 있는 코드들을 보면 한 줄 한 줄 어떻게 표시할 지에 집중하고 있다는 것을 알 수 있습니다.

쉽게 말하면 파란색 뷰를 화면의 한 가운데에 표시해줘 라고 말이죠.

 

밑의 코드는 SwiftUI 측을 코드입니다.

일단 위에 코드에 비해 정말로 간결합니다. 그리고 최종적으로 어떤 화면이 나오면 되는지만 표현하고 있네요.

"100 * 100 크기의 파란색 뷰가 필요해" 

이렇듯 SwiftUI는 내가 필요한 것을 주문하는 느낌으로 작성하시면 됩니다.

그리고 이것이 첫번째 특징이 선언형이라는 것입니다.

그리고 위 코드에서 알 수 있듯이 오토레이아웃이 필요없습니다. 알아서 자동으로 배치해줍니다.

이것말고도 SwitUI에서 자동으로 지원되는게 많습니다. 대표적으로 로컬라이징이 있겠네요.

 

그리고 기존에 UIKit으로 개발하다가 오면 익숙하지 않고 이상하게 느껴질 수 있습니다.

UIKit에서 구체적으로 어디에 무얼두고 어디에 어느크기만큼 두고 이런 디테일한 작업을 해오다가

난 파란색 크기가 필요해!, 아 난 여기가 빈공간이면 좋겠어! 이렇게 짠다는게 쉽지 않습니다.

하지만 SwiftUI는 분명히 강력한 언어임에 틀림 없다고 생각합니다.

 

 

이 포스팅은 아래 책을 참조하면서 작성되고 있습니다.

book.naver.com/bookdb/book_detail.nhn?bid=16324763

스윗한 SwiftUI