[SwiftUI] 1. SwiftUI 시작하기 (Stanford CS193P) - some View

이번 넥스터즈 22기에선 SwiftUI를 사용해서 프로젝트를 진행하기로 결정했다. 

이전부터 SwiftUI 공부해봐야지... 마음만 먹었었는데 실제 프로젝트를 하게 되니 확실히 공부를 시작했다. 

 

이전에 초반만 들었던 스탠포드 강의를 들어보면서 SwiftUI를 한 번 훑어보려고 한다. 

https://www.youtube.com/watch?v=bqu6BquVi2M&list=PLpGHT1n4-mAsxuRxVPv7kj4-dQYoC3VVu&index=1

---

처음에는 이 강의에 대한 개요에 대해 설명해주시고 Xcode의 기본적인 사용법에 대해 설명을 해주시는데 이 부분은 일단 넘기고... 

본격적인 SwiftUI 설명부터 듣기 시작했다. 

 

import SwiftUI

@main
struct StanfordSwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

일단 SwiftUI로 프로젝트를 생성하게 되면 기본적으로 ContentView와 해당 App의 이름을 그대로 딴 파일이 자동 생성되게 된다. 

 

여기서 @main의 경우 UIKit은 AppDelegate에 붙어있었는데 여기선 App 프로토콜을 채택한 이 구조체에 붙어있는 것을 볼 수 있다. UIKit과 동일하게 앱의 진입점을 표시해주는 것이다. 

 

여기서 ContentView를 띄워주게 된다. 

 

import SwiftUI

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

// 대부분 다루게 되지 않는 코드
struct ContentView_Previews: PreviewProvider { // 프리뷰에 ContentView를 붙이게 됨
    static var previews: some View {
        ContentView()
    }
}

아래 PreviewProvider의 경우 프리뷰에 코드에 구현한 뷰가 동기화되어 표시될 수 있도록 보여주는 역할을 한다. 

스탠포드 강의에선 이는 글루코드라고 표현하며 거의 다루게 되지 않는 코드라고 설명했다. 

위키백과에서 말했던 것처럼 단순히 View를 PreView에 붙일 때 사용하는 코드이다. 

 

 

View를 그리는데 중요한 부분은 View 프로토콜을 채택한 ContentView이다. 

물론 구조체의 이름은 원하는 대로 변경이 가능하다. 

 

여기서 View 프로토콜을 채택하게 되면 ContentView 구조체가 View처럼 동작할 것이라는 것을 알려주게 된다. 

그리고 View 프로토콜을 채택할 경우 반드시 body 프로퍼티를 선언해야 한다. 

 

여기서 body의 타입이 좀 특이하다. 

이번 포스팅에서 가장 중요한 부분이라 생각한다. 

 

some View

body의 타입은 some View라고 되어 있다. 

some View가 그 자체로 타입이라기 보단 컴파일러에게 View 타입의 변수가 된다는 것을 알려주는 것이다. 

 

그리고 body 프로퍼티는 연산프로퍼티로 함수와 동일하게 사용이 되고 있다. 

(return은 기본적으로 생략이 된 형태인데 물론 return을 써줘도 전혀 문제가 없다)

 

struct ContentView: View {
	var body: Text {
    		Text("안녕")
	} 
}

그런데 이렇게는 작성이 가능하다. 

 

body에서 반환하는 값 자체가 Text밖에 없기 때문이다. 

struct ContentView: View {
    var body: ZStack {
        ZStack {
            Text("아아아")
        }
    }
}

그런데 이렇게는 불가능하다. 

물론 View 프로토콜에서 정의한 body의 타입이 some View인데 이를 준수하지 않아서 문제이기도 하지만 여기서 중요한 것은 단순히 보기에 ZStack을 반환하고 있는데 body의 타입을 ZStack으로 적을 수 없다. 

 

ZStack이긴 한데 내부 Content에 다른 View가 담겨 있기 때문이다. 

이때 body의 타입을 some View로 바꾸게 되면 정상적으로 컴파일이 될 것이다. 

 

따라서 내가 이해한 some View의 역할은 다양한 View가 결합되어 있는 것을 표현하는 것이다.

이런 some이 붙은 타입을 opaque type이라고 부른다. 

(UIKit에선 아직 한 번도 사용해보지 못한 개념이라 이 부분은 나중에 따로 정리해보고자 한다)

 

이 강의에서 ZStack과 VStack도 나오는데 이는 이름에서도 어떻게 뷰를 쌓는지 충분히 알 수 있다. 

ZStack의 경우 zposition을 조정하면 다른 뷰의 위에 뷰가 뜰 수 있도록 하는 것처럼 뷰를 위로 쌓게 되는 것이다.

요런 식으로 RoundedRectangle 위에 Text가 나오도록 구현을 할 수 있는 것이 바로 ZStack이다. 

 

HStack은 가로로 쭉 뷰를 쌓는 것이고 VStack은 세로로 뷰를 쭉 쌓게 될 것이다. 

---

 

UIKit이랑 뷰를 그리는 방식이나 이런 것들이 완전 달라서 재밌기도 하면서 생소하다. 

그리고 UIKit은 왼쪽 상단을 (0, 0)으로 두고 뷰를 그리고 레이아웃을 전부 잡아줘야 하는데 SwiftUI의 경우 알아서 중앙에 View를 위치시켜주는 것이 차이로 느껴졌다. 

 

쭉 강의를 훑어보면서 기본적으로 SwiftUI의 작동 방식을 준비해야 겠다. 

 

To be continue~~