iOS/SwiftUI

SwiftUI App 구조를 알아보자! (SwiftUI App Structure)

DevBabamba 2022. 10. 7. 01:29
반응형

이 포스팅은 기초적인 Swift 문법을 알아야 수월하게 읽을 수 있습니다.

1.SwiftUI란?

  • SwiftUI는 모든 애플 플랫폼(iOS, IPadOS, watchOS 등) 앱의 사용자 인터페이스와 동작을 선언할 수 있는 새로운 방법(도구)입니다.
  • 기존 UIKit, AppKit, WatchKit과 통합하여 사용할 수 있습니다.

2.SwiftUI에서의 App 구조

  • 기초 적인 앱 구조를 설명하기 앞서 새로운 프로젝트를 생성해 보겠습니다.
    • 앱 이름은 SwiftUIAppStructureApp 로 생성하였습니다.
  • 최초 생성시 다음과 같은 앱이 생성됩니다.
  • 구조를 알기 위해선 SwiftUIAppStructureApp.swift 파일을 먼저 보는것이 좋습니다.
  • @main 부터 보겠습니다.

2.1. @main

  • swiftUI 앱의 진입점을 표시하기 위해 사용됩니다.
  • 좀 더 자세히 설명하자면,
  • SwiftUI는 앱의 진입점이 하나 입니다.
    • 따라서 @main을 둘 이상의 structure에 적용한 경우 컴파일러 오류가 발생합니다

2.2. App

  • 두번째로 발견할 수 있는것은 App 이라는 프로토콜입니다.
  • SwiftUIAppStructureApp 이라는 structure가 App 프로토콜을 따르고 있습니다.
  • App 프로토콜은 앱의 구조와 동작이 정의되어있습니다.
  • 위의 사진은 App 프로토콜을 캡쳐한 것입니다.
  • 먼저 다음 세가지를 보도록 하죠!
    • associatedtype Body : Scene
    • @SceneBuilder @MainActor var body: Self.Body { get }
    • extension에서 @MainActor public static func main()

2.2.1. associatedtype Body : Scene

  • associatedtype은 프로토콜 정의할 때 유용하게 사용됩니다
    • 바로 타입을 정의할 때 사용합니다.
    • 자세한 내용은 이후 포스팅에서 다뤄보겠습니다.
  • App 프로토콜에서 Body 타입은 associatedtype으로 정의되었습니다.
  • associatedtype으로 정의 되어 있기 때문에 var body: Self.Body { get } 에서는 Body 타입을 필요로 합니다.
  • Body 타입은 어떠한 것이라도 적용일 가능할 것입니다. 예를들면, String, Int 등등 타입도 적용이 됩니다.
  • 하지만, associatedtype Body : Scene에서 Scene 프로토콜을 따르도록 제약이 걸려 있습니다.

2.2.2. @SceneBuilder @MainActor var body: Self.Body { get }

  • 먼저 봐야할것은 var body: Self.Body 입니다.
    • 앞의 @SceneBuilder와 @MainActor는 이후의 포스팅에서 정리하겠습니다.
  • body는 Scene 프로토콜을 따라야하는 제약이 걸린 Body 타입이 필요합니다.
  • 그래서 만약 바로 View 프로토콜을 따르는 ContentView를 넣으면 에러가 발생합니다.
  • 그래서 WindowGroup 녀석이 필요합니다.

2.2.3. extension에서 @MainActor public static func main()

  • 이녀석은 무엇일까요?
  • 한번 에러를 발생시켜보겠습니다.
  • @main을 사용할때는 main static function of type () -> Void, () throws -> Void, () async -> Void, 또는 () async throws -> Void 가 무조건 있어야 한다고 합니다.
  • 강제사항이고 이 main 함수 안에는 Top-level code를 정의할 수 있습니다.
  • 자세한 사항은 이후 Top-Level Code 포스팅에서 정리하겠습니다.

2.3. Scene

  • Scene 프로토콜은 시스템에서 관리하는 life cycle이 있는 앱 사용자 인터페이스(User Interface)의 일부입니다.
  • ??? 짧은 정의만 들으면 무슨 소린가 싶습니다...
  • 이 Scene은 View 계층 구조의 컨테이너 역할을 합니다
    • SwiftUI에서는 WindowGroup, Window, DocumentGroup, Settings 등 여러 다양한 Scene 유형을 제공합니다.
    • 위의 예제에서는 WindowGroup을 Scene으로 사용합니다.
  • 그리고 앱의 상태(State)에 맞게 UI에 View 계층을 표시할 시기와 방법을 결정합니다.
  • App에서 Scene은 여러개가 될수있습니다. 아래 캡쳐처럼 말이죠.

  • Scene의 경우 따로 더 자세한 포스팅을 진행하겠습니다.

2.3.1 WindowGroup

  • 동일한 구조의 Windows 그룹 을 표시하는 Scene
  • View 계층구조를 담은 컨테이너 역할을 합니다.

2.4. View

  • View 프로토콜은 앱 UI 일부를 나타내고 view를 구성하는데 사용하는 수정자(modifier)를 제공하는 type입니다.
  • View 프로토콜 내용을 보겠습니다.(extension에 정의된것 제외)
  • App 프로토콜과 기초 구성은 비슷해 보입니다.
  • 하지만, associatedtype Body에서 View 프로토콜을 따르도록 제한하고 있는것을 제외하곤 말이죠.
  • View계층 구조를 가집니다. 예제를 보겠습니다.
  • 위의 코드(상기 SwiftUIAppStructureApp.swift에 포함된 코드 포함)를 기준으로 View 계층 구조를 보면 아래의 그림과 같습니다.
    • Text, Image 등은 각각 View입니다.

    3. App 구조 결론

    • App은 Scene들을 가지고, 각 Scene은 View들을 담습니다.
    • 그림으로 보면 다음과 같습니다.

  • 간만에 글을 올리게 됐습니다 ㅎㅎ
  • 요즘 여러 일을 하느라 정신이 없네요 😵‍💫😵‍💫
  • 글에 빈부분과 틀린 부분이 있을 수 있습니다.
  • 전체 흐름을 보시고 후에 공식문서를 확인하시는면 더 좋을것 같습니다!

참고

반응형