SwiftUI - 맛보기

안녕하세요. 밀쿄입니다.
오늘은 두 번째 시간입니다.
오늘은 SwiftUI로 프로젝트를 생성해보고 간단히 살펴보겠습니다.

생성된 파일을 보면 ContentView.swift가 있는데 기존에 StoryBoard로 프로젝트를 생성하면 있던 ViewController.swift에 해당합니다.

ContentView부터 보면 재미있을 것 같지만 SceneDelegate.swift에 가면 특이한 부분이 있어서 그것부터 보겠습니다. UIHostingController라는 처음보는 녀석이 있을겁니다.
UIHostingController의 선언부를 보면 다음과 같이 되어있습니다.

open class UIHostingController<Content> : UIViewController where Content : View

일단 눈에 띄는건 UIViewController를 상속 받는 다는 점과 View를 채택하고 있는 Content를 재네릭 변수로 받고 있습니다.

 open var rootViewController: UIViewController?

그 이유는 rootViewController의 타입이 UIViewController 이기 때문입니다.
그리고 또한 UIHostingController가 UIViewController 타입이기 때문에 UIViewController에서 push하거나 present하거나 등 UIViewController에서 SwiftUI뷰로 연결해줘야할 때 이 클래스를 사용하기도 합니다.

그럼 저기에 있는 View는 무엇인지 한 번 살펴보도록 하겠습니다.

public protocol View {
    associatedtype Body : View
    var body: Self.Body { get }
}

기존의 UIView가 class였지만 View는 프로토콜 입니다.
근데 위 선언을 보면 조금 특이하게 생겼습니다.
body에서 리턴한 것이 다시 View를 채택하는 View를 리턴합니다.
이런 구조라면 무한 재귀호출이 되겠지만 View를 채택하는 걸 찾아보면 아래처럼 재귀호출을 막고있습니다.

extension Text : View {
    public typealias Body = Never
}

이렇듯 SwiftUI에서는 기본 뷰들이나 컨테이너 뷰에는 Body에 Never타입을 사용합니다.
자 여기까지 살펴봤으니 ContentView.swift를 보겠습니다.

struct ContentView: View {    
    var body: some View {
        Text("Hello World")
    }

}

여기서 CanvasView를 보면 Hello World가 출력되는 것을 확인할 수 있습니다.
Text안에 있는 문자열을 바꿔보시면 CanvasView도 실시간으로 변한다는 것을 확인 할 수 있습니다.
저는 여기서 "폰크 크기가 30인 Bold인 문자열을 출력하고 싶다"라고 주문을 넣어보겠습니다.

Text("Milkyo Blog")
    .font(.system(size: 30))
    .fontWeight(.bold)

주문한 대로 잘 나오는것을 확인 할 수 있습니다.

이것이 작동되는 구조를 살펴보면 문자열이 표현되는 Text에 font라는 Modifier가 적용되고 새로운 뷰가 만들어 집니다.

그 후 fontWeight라는 Modifier가 적용되어 새로운 뷰가 만들어 집니다.

이렇듯 Modifier는 SwiftUI에서 새로운 동작이나 시각적 요소가 더해져 새로운 뷰를 만들게 됩니다..

또한 Modifier는 그 자신의 타입이나 뷰 프로토콜 반환하게 설계되어 있습니다. 

따라서 호출하는 순서가 매우 중요하게 됩니다. 이 부분에 대해선 다음 시간에 알아보겠습니다.

 

이렇듯 오늘은 SwiftUI가 어떻게 돌아가는지 간단하게 맛을 보았습니다.

살짝 맛만 봐도 기존에 UIKIt가 돌아가는 방식이 많이 다르다는 것을 보셨을겁니다.

앞으로 차근차근 시간나는대로 포스팅해나가겠습니다.

긴 글 읽어주셔서 감사합니다.