23-06-05

앱 만들며 뒤적거렸던 내용들을 SwiftUI로 기록하려 한다.

📚 참고도서
[SwiftUI 기반의 iOS 프로그래밍]

---

SwiftUI View

1. View 개요

SwiftUI에서 View는 프로토콜을 따르는 구조체로 선언된다. View 프로토콜을 따르게 하기 위해서는 구조체가 body 프로퍼티를 가지고 있어야 하며, 이 body 안에 view가 선언되어야 한다.

프로토콜: 데이터의 표현법, 규약 등으로 생각하면 됨

하나의 body 안에서는 하나의 view만 반환할 수 있음. 그래서 여러 요소를 추가하려면 HStack, VStack등을 이용해야 함.

다음과 같이 연결할 수도 있음.

struct ContentView: View{
    var body: some View {
        Text("Hello,") + Text("how") + Text("are you?")
    }
}

위 예제에서 보다시피, body 프로퍼티의 클로저는 반환구분(return)이 없다. 단일 표현식으로 되어있기 때문에 생략이 가능.

클로저-1 << 링크를 참조

다음과 같이 별도의 표현식이 추가되면 return 구문을 추가해야 한다.

struct ContentView: View{
    var body: some View {

        var myString: String = "Welcome to SwiftUI"
        return Vstack{
            Text("Hello, World!")
            Text("Goodbye World")
        }
    }
}

2. 하위 View

하나의 View 안에 VStack, HStack이 한없이 쌓이면 가독성이 매우 떨어지고 관리하기 힘듦.

애플에서는 뷰를 최대한 작고 가볍게 하라고 권장한다. 만든 View중 따로 나눌 수 있는 부분이 있으면 하위View를 따로 작성하기.

struct ContentView: View{
    var body: some View {
        VStack{
            Text("1번 텍스트")
            Text("2번 텍스트")
        }
            
        myVStackView() //이게 하위뷰
            
        }
    }

struct MyVStackView: View{
    var body: some View{
        VStack{
            Text("3번 텍스트")
            Text("4번 텍스트")
        }
    }
} //하위뷰 선언

3. 프로퍼티로서의 뷰
   프로퍼티를 따로 지정해 뷰에 할당할 수도 있다.

struct ContentView: View{

    let carStack = HStack{
        Text("Car Image")
        Image(systemName: "car,fill")
    }

    var body: some View {
        VStack{
            Text("Main Title")
            .font(.largeTitle)
            carStack
        }
    }
}