[iOS - SwiftUI] 앱의 구조 (App, Scene, WindowGroup, ContentView)

App이란?

• Star라는 앱을 만들면 자동으로 StarApp.swift파일과 ContentView.swift파일이 자동으로 생성

자동으로 생성된 파일

• App을 상속받고 있는 StarApp을 확인

import SwiftUI

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

• App이란?
  • 앱의 구조와 동작을 나타내는 타입
  • App 위에는 @main이라는 어노테이션을 사용하여 앱의 entry point를 명시하여 같이 사용
    cf) SwiftUI를 공부하면서 사용할 유용한 단축키 (document 오픈 + 검색): control + cmd + option + /

• body라는 computed property를 이용하여 앱의 content를 표시
• App의 body 부분에는 Scene 이라는 프로토콜을 준수하는 형태

@main
struct StarApp: App {
  var body: some Scene { // <-
    WindowGroup {
      ContentView()
    }
  }
}

• Scene은 뷰 계층에서 가장 root에 해당되며, 시스템에 의해 라이프 사이클을 가지고 있는 형태
  • Scene타입에서만 WindowGroup, Settings 등을 사용

@main
struct Mail: App {
    var body: some Scene {
        WindowGroup { // <-
            MailViewer()
        }
        Settings { // <-
            SettingsView()
        }
    }
}

• WindowGroup 개념
  • Window라는 개념은 뷰들의 컨테이너 역할을 하면서 동시에 터치 이벤트와 같은 이벤트를 가장 먼저 수신하여 subview들에게 이벤트를 전달하는(responder chain) 기능
  • macOS와 iPadOS와 같이 그룹으로부터 여러개의 window를 띄울 수 있는 형태일때 WindowGroup을 여러개 정의하여 사용
• 자동으로 생성된 ContentView를 선언하여 사용
  • ContentView는 단순히 뷰들이 위치할 공간 (=컨테이너)를 나타내고, ContentView안에 뷰들을 구현

@main
struct StarApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView() // <-
    }
  }
}

ContentView

• ContentView는 단순히 뷰들이 위치할 공간 (=컨테이너)를 나타내고, ContentView안에 뷰들을 구현

https://developer.apple.com/tutorials/swiftui-concepts/exploring-the-structure-of-a-swiftui-app

• ContentView에 본격적으로 뷰를 선언

struct ContentView: View {
  var body: some View {
    VStack {
      Image(systemName: "globe")
        .imageScale(.large)
        .foregroundColor(.accentColor)
      Text("Hello, world!")
    }
  }
}

• padding을 선언하면 플랫폼별로(iOS, macOS, watchOS) 자동으로 디폴트 패딩이 설정
  • 아래에서는 VStack에 padding()을 설정했으므로 VStack의 edges에 패딩이 존재

struct ContentView: View {
  var body: some View {
    VStack {
      Image(systemName: "globe")
        .imageScale(.large)
        .foregroundColor(.accentColor)
      Text("Hello, world!")
    }
    .padding() // <-
  }
}

• padding은 배열로 특정 구간 설정도 가능

오른쪽과 아래쪽에 패딩 넣기

.padding([.bottom, .trailing], 20)

 

* 참고

https://developer.apple.com/documentation/swiftui

https://developer.apple.com/tutorials/swiftui-concepts/exploring-the-structure-of-a-swiftui-app