Exploring the structure of a SwiftUI app

SwiftUI Concept Tutorials

이 문서는 https://developer.apple.com/tutorials/swiftui-concepts/exploring-the-structure-of-a-swiftui-app 을 한글화한 문서로 SwiftUI를 처음 접할 때 가장 먼저 읽어봐야 하는 내용입니다. 

SwiftUI 앱의 구조 속으로 

SwiftUI는 앱의 사용자 인터페이스(UI) 즉 화면을 구성하는 데 도움을 주는 선언적(declarative) 프레임워크입니다. SwiftUI의 구조를 형성하는 가장 기본이 되는 요소는 App, Scene 및 View 프로토콜입니다. 이 샘플은 코드 라인을 살펴보고 발생한 일과 그 이유를 설명함으로써 이러한 프로토콜을 소개합니다.

 

Section1 

앱 구조체는 앱의 내용과 동작을 설명합니다. SwiftUI 앱은 하나의 메인 앱 구조체만으로 이루어 집니다. 이 샘플은 MyApp.swift 파일에서 앱 구조체를 정의합니다. 그 파일의 내용을 살펴보도록 하겠습니다.

 

step 1

SwiftUI의 심볼 및 기능에 액세스하기 위해서 import 선언 문을 사용해 SwiftUI의 프레임워크를 가져옵니다.

import SwiftUI

@main

step 2

 @main 속성을 이용해 앱의 진입점(시작위치)을 지정합니다.. 

진입졈은 앱의 시작을 담당합니다.

important  SwiftUI 앱은 오직 하나의 @main 진입점을 가지고 있어야 합니다. 하나 이상의 @main 속성이 있을 경우 컴파일 에러가 발생합니다.

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {

step 3

MyApp 구조체는  App 프로토콜을 따르며 앱의 컨텐츠와 동작 방식을 제공합니다.

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {

step 4

App 프로토콜의 요구 사항인 body를 구현합니다.

이 속성은 Scene으로 표현되는 앱의 내용을 반환합니다.씬(scene)에는 앱의 사용자 인터페이스를 정의하는 뷰 계층이 포함됩니다. SwiftUI는 WindowGroup, Window, DocumentGroup, Settings 등 다양한 유형의 씬(scene)을 제공합니다.

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

step 5

이 샘플은 SwiftUI에서 제공하는 WindowGroup Scene을 사용하여 앱이 표시하는 기본 창을 표시합니다.

SwiftUI는 플랫폼 별로(iOS, iPadOS, macOS) WindowGroup에 대한 다른동작 방식을 제공합니다. 예를 들어, macOS와 iPadOS에서는 한 사람이 그룹에서 두 개 이상의 창을 열 수 있습니다. 그리고 macOS에서는 한 사람이 창 그룹의 여러 인스턴스를 탭 집합으로 결합할 수 있습니다.

 

Tip 워드 프로세서나 텍스트 편집기와 같은 문서 기반 앱을 만드는 경우 DocumentGroup Scene을 사용하여 문서를 열고 저장하고 편집할 수 있습니다. 자세한 내용은 Building a Document-Based App with SwiftUI를 참조하세요.

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

step 6

씬(scene)에는 이미지와 텍스트로 구성된 뷰 계층을 만드는 사용자 정의 뷰인 ContentView가 포함되어 있습니다.

ContentView가 뷰 계층을 구성하는 방법에 대해 계속 알아보겠습니다. 

여기까지 정리하면 하나의 App 구조체는 App 프로토콜의 요청 사항인 body를 구현하는 데 body는 Scene을 반환하는 데 SwiftUI는 다양한 Scene을 제공합니다. Scence 중에 한 종류인 WindowGroup은 ContentView를 포함하는 데 뷰의 시작점이 됩니다.

 

Section 2

ContentView

SwiftUI에서 scene은 UI에서 표시될 뷰 계층이 포함되어 있습니다. 뷰 계층은 다른 뷰와 관련된 뷰의 레이아웃을 정의합니다. 이 예제에서 WindowGroup Scene은 다른 뷰를 구성하는 ContentView가 포함되어 있습니다.

Step 1

소스 코드는 SwiftUI 프레임워크를 import 하면서 시작됩니다. 

import 선언 없이, ContentView는 SwiftUI에 대한 심볼에 접근할 수 없습니다. 

import SwiftUI

struct ContentView: View {

Step 2

ContentView는 View 프로토콜을 따르는 구조체입니다.

뷰는 화면에 표시될 하나 이상의 시각적 요소를 정의합니다. 뷰는 일반적으로 다른 뷰로 구성되는데 계층적 구조를 이룹니다.

import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {

Step 3

이전 섹션의 'MyApp' 구조와 마찬가지로 ContentView는  body 프로퍼티를 구현합니다.

Note body를 구현하는 것은 스위프트UI 코드에서 App, Scene, View 프로토콜을 준수하는 구조체를 구현할 때, 계속 볼 수 있는 일반적인 패턴이다

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")

 

Step 4

ContentView는 스위프트UI에서 제공하는 VStack을 포함하는 데, 이는 서브뷰들을 세로로 정렬합니다.

VStack은 화면에 보이지 않는 뷰까지  서브뷰를 동시에 렌더링합니다. 서브뷰의 수가 적은 경우 VStack을 사용하는 것이 이상적입니다. 그러나 앱에서 더 많은 뷰를 표시해야 하는 경우 Lazy(지연) 스택 사용할 수 있다는 사실을 알고 있어야 합니다. - Lazy가 이름에 붙는 뷰들은 앱에서 뷰를 화면에 표시해야 할 때만 화면에 표시될 서브뷰를  렌더링합니다.

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)

Step 5

VStack의 첫번째 서브뷰는 Image로 그림을 화면에 표시하는 뷰이다.

샘플은 초기화 메서드 init(systemName:)을 사용하여 지구본의 이미지를 표시합니다. 이 메서드는 시스템 기호 이미지를 표시하는 이미지 뷰를 만듭니다. 지구본과 같은 기호 이미지는 앱에서 사용할 수 있는 아이콘 라이브러리인 SF 심볼에서 가져옵니다.

    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)

Step 6

ContentView는 뷰 한정자(view modifier로 뷰에 대해 뭔가를 변경한다는 의미) imageScale(_:)을 이미지 뷰에 적용하여 뷰 내의 이미지를 Image.Scale.large  상대적인 크기를 조정합니다.

   VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")

Step 7

forgroundColor(_:) 한정자는 이미지 뷰에 색상을 추가합니다.

이 샘플에서 ContentView는 시스템 또는 앱의 액센트 색상을 적용합니다. 색 표현에 대한 자세한 내용은 Color를 참조하십시오.

 Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }

Step 8

VStack의 두 번째 하위 뷰는 읽기 전용 텍스트를 표시하는 뷰인 Text입니다.

 .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()

Step 9

ContentView는 padding(_:_:) 한정자를 VStack에 적용하여 플랫폼별 기본 패딩 값을 VStack 뷰의 가장자리에 추가합니다.

  Text("Hello, world!")
        }
        .padding()
    }
}

Step 10

샘플 앱을 실행하면 ContentView에 기술된 뷰 계층이 포함된 Scene이 화면에 표시됩니다.