View를 사용해서 랜드마크 앱의 기본적인 화면을 구성해봅니다.

1. 프로젝트 생성 시

• SwiftUI 앱을 생성하고 나면 2개의 스위프트 파일이 생성됩니다.

  • 앱이름App.swift : 구조체의 body 프로퍼티는 화면을 반환해줍니다.

  // LandmarksApp.swift
  import SwiftUI
  
  @main
  struct LandmarksApp: App {
      var body: some Scene {
          WindowGroup {
              ContentView()
          }
      }
  }
  

  • ContentView.swift

  // ContentView.swift
  import SwiftUI
  
  // View 프로토콜을 상속받으며 뷰의 콘텐츠와 레이아웃을 보여준다.
  struct ContentView: View {
      var body: some View {
          VStack {
              Image(systemName: "globe")
                  .imageScale(.large)
                  .foregroundColor(.accentColor)
              Text("Hello, world!")
          }
          .padding()
      }
  }
  // 뷰에 대한 미리보기를 선언한다.
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
          ContentView()
      }
  }
  

2. 텍스트 뷰 커스터마이징 하기

• ContentView 에서 미리보기 캔버스를 바로 확인 가능하며, 인스펙터 or 코드로 뷰 수정이 가능하다.
• 각 요소에 .imageScale(), .foregroundColor() 와 같은 modifier를 적용해주면서 스타일을 넣어줄 수 있다.

3. 스택을 사용하여 뷰 합치기

• SwiftUI 뷰를 생성할 때, 뷰의 body 프로퍼티에 뷰의 콘텐츠, 레이아웃 등에 대한 내용을 추가해줄 수 있다. 하지만 body 프로퍼티는 1개의 뷰만 리턴하기 때문에 이 뷰에 여러 요소를 넣고 싶을 때는 **스택(Stack)**을 사용해서 여러 뷰를 담아줄 수 있다.
• 원하는 요소에 Command 키와 함께 마우스 커서를 갖다 대면 스택에 포함시켜줄 수 있다.

// View 프로토콜을 상속받으며 뷰의 콘텐츠와 레이아웃을 보여준다.
struct ContentView: View {
    var body: some View {
        **VStack(alignment: .leading) { // 스택의 이니셜라이저에 정렬 설정을 해줄 수 있다.
            Text("Turtle Rock")
                .font(.title)
                .foregroundColor(.black)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer() // 디바이스의 전체 너비를 사용하도록 벌려준다.
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding() // 패딩 넣어주기**
    }
}

4. 커스텀 이미지 뷰 만들기

• 커스텀 뷰를 만들어 이미지에 마스크, 보더, 그림자를 적용해봅니다.