[SwiftUI] - App, Scene, View, WindowGroup 이해

 

 

SwiftUI에서 App, Scene, View, WindowGroup등 다양한 키워드가 많은데 이거에 대해 제대로 이해하고 넘어가자

앱을 만들 때 기본적으로 알고 있어야 하는 개념들이기 때문에 확실히 공부하는게 좋을 것 같다!

 

---

 

 

Example이라는 프로젝트를 만들면 자동으로 ExampleApp.swift파일과 ContentView.swift파일이 자동으로 생성된다.

 

 

 

ExampleApp.swift를 확인해보면 App을 상속받고 있는 ExampleApp을 확인할 수 있다.

 

• ExampleApp.swift

import SwiftUI

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

 

 

🟡 App

 

: 앱의 구조와 동작을 나타내는 타입, body 연산 프로퍼티를 구현해 앱 콘텐츠를 정의

 

App 위에는 @main이라는 어노테이션을 사용해 ExampleApp이 앱의 시작점이 된다는 것을 가리킨다.

App 프로토콜은 기본적으로 앱을 실행할 수 있는 main()메소드 구현을 제공하지만, 전체 앱 파일 중에서 딱 1개만 entry point가 있어야 한다.

 

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

 

App의 body는 Scene 프로토콜을 따르는 객체들로 구성할 수 있고, 각 Scene은 뷰 계층 구조의 루트 뷰가 포함되어 있으며 시스템에 의해 관리되는 생명주기를 가진다.

 

Scene 타입에서만 WindowGroup, Settings등을 사용한다고 한다.

//ExampleApp.swift

import SwiftUI

@main
struct ExampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        Settings{
            SettingsView()
        }
    }
}

 

※ body: 앱의 콘텐츠 및 동작

 

 

 

🟡 Scene 

 

: 시스템에 의해 관리되는 앱의 생명주기와 앱이 UI 부분을 구성하는 한 부분

 

• 사용자에게 보여주고 싶은 View hierarchy의 컨테이너 역할을 한다. 
• 앱의 여러 화면 중 하나를 의미하며 주로 View를 포함하고 있다.

 

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

 

 

Scene의 some Scene을 반환하는 body 연산 프로퍼티에 하나 혹은 그 이상의 Scene 프로토콜을 따르는 Scene을 넣어 조합해 커스텀 Scene에 들어갈 콘텐츠를 지정할 수 있다고 한다.

 

예를 들어서 아래와 같이 커스텀 Scene을 만들 수 있다.

VStack을 포함하는 사용자 정의 Scene인 CustomScene을 만들고 앱의 진입점인 MyApp에서 CustomScene을 사용할 수 있다.

 

import SwiftUI

struct CustomScene: Scene {
    var body: some Scene {
        WindowGroup {
            VStack {
                Text("Hello,")
                Text("World!")
            }
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        CustomScene()
    }
}

 

 

 

🟡 WindowGroup

 

 

: 앱의 기본 창을 나타내는 컨테이너 View, 내부에 앱의 주요 화면을 구성하는 다른 View들을 포함한다.

 

• iOS에서는 기본적으로 앱의 메인 창을 나타내며, 주로 하나의 WindowGroup을 사용한다.
• masOS와 같이 그룹으로 부터 여러 개의 window를 띄울 수 있는 형태일 때 WindowGroup을 여러개 정의할 수 있다.

 

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

 

 

WindowGroup의 각 Scene은 UI는 공유하지만, 모두 자신만의 독립적인 State를 가진다.

 

만약 한 Window에서 상태를 변경해도 다른 Window에는 영향을 주지 않는다.

 

https://developer.apple.com/videos/play/wwdc2020/10037

 

 

 

🟡 View

 

 

: 앱의 UI를 나타내는데 사용되는 기본 프로토콜

 

• 뷰의 내용을 반환하는 body 프로퍼티를 구현해 커스텀 뷰에 들어갈 콘텐츠를 지정할 수 있다.
• View를 설정하는 데 쓰이는 modifiers들을 제공한다.
• Scene에 들어가는 View hierarchy의 기초가 된다.

 

//ContentView.swift

import SwiftUI

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

#Preview {
    ContentView()
}

 

 

정리하자면 여러 개의 View가 하나의 Scene을 구성하고, 여러 개의 Scene이 하나의 앱을 만든다는 것!

 

https://developer.apple.com/videos/play/wwdc2020/10037

 

---

 

 

이제 개념들은 다 이해한 것 같은데 여기서 더 알아야 할 사실이 있다.

App - body, Scene - body, View - body에서 body 프로퍼티는 다 같은 의미로 사용될까???

 

=> 결론은 다르다!!!

 

왜 그런지 알아보자.

 

 

1️⃣ App - body

 

 

: 앱의 콘텐츠와 행위를 나타내는 기본 화면을 지정

 

• 앱의 scene들을 정의하는 body 연산 프로퍼티가 필요하다.
• App의 body 프로퍼티 안에 들어있는 것들은 Scene 프로토콜을 따르는 객체들

 

import SwiftUI

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

 

 

2️⃣ Scene - body 

 

 

: Scene의 콘텐츠와 행위를 나타냄

 

• body 프로퍼티는 앱의 창(Window)에 표시되는 내용을 정의하며, 주로 하나 이상의 View를 포함한다.

 

import SwiftUI

struct ContentView: Scene {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

 

 

3️⃣ View - body

 

 

: 해당 View에 표시될 컨텐츠를 나타냄

 

 

• 커스텀 뷰를 구현할 때, 반드시 구현해야 하는 프로퍼티로 뷰의 컨텐츠를 정의한다. 

 

import SwiftUI

struct MyButton: View {
    var body: some View {
        Button(action: {
            // 버튼을 클릭했을 때 수행할 동작
        }) {
            Text("Tap me!")
        }
    }
}

 

 

정리하자면, "App - body"는 앱의 진입접을 정의하고 "Scene - body"는 창에 표시될 내용을 정의하며 "View - body"는 해당 뷰에 표시될 내용을 정의한다.

 

 

---

참고

 

https://developer.apple.com/videos/play/wwdc2020/10037

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

https://dev-dain.tistory.com/165