[SwiftUI] 1. 앱 원칙: SwiftUI 앱의 구조 탐색

Sean·2023년 5월 2일

iOS swift swiftui 공식문서 튜토리얼

SwiftUI_튜토리얼

목록 보기

1/11

참고 자료: SwiftUI 튜토리얼 공식문서

이제 막 SwiftUI를 배워보는 한 사람으로서, 코드 작성하고 내가 이해 한 대로 작성할것이다.

이 글의 내용은 위에 있는 참고자료의 공식문서를 번역하여 조금 더 내가 느끼기에 자연스럽게 만들어서 작성하는것이다.

누군가에게 알려주기보다 자신이 정리를 하면서 다시 문서를 보고 어버버거리지 않게 다시 참고하기 위함이기에 해당 문서를 읽는 사람은 swift에 대해서 어느 정도 안다는 가정하에 글을 작성할것이다

시작

Xcode 상에서 iOS -> App -> Interface를 SwiftUI로 변경하고 이름 설정(SwiftUITest) 후 Next

SwiftUITestApp.swift

import SwiftUI

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

ContentView.swift

import SwiftUI

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()
    }
}

그럼 이렇게 두개의 파일이 생성되어 있는 프로젝트가 하나 생성이 된다.

일단 Previews는 동작하는데도 꽤 시간이 걸리기도 하고 지금 당장은 쓸모 없어서 주석처리 한다.

분석

1. 파일 이름 + App.swift

처음 프로젝트를 보고 나서 든 생각은 응? 이었다.
뭔가 익숙한 냄새가 나는것을 느꼈다.
[파일 이름 명+App].Swift 는 ObjC의 main 과 같은 역할인건가? 라는 의문이 들었으나 문서를 읽어보기로 했다.

SwiftUI는 앱의 진입점을 나타내기 위해 @main을 적용한다.
@main 은 단 하나에만 지정할 수 있으며 2개 이상의 구조체에 적용을 하면 오류가 발생한다.

@main 이 적용된 해당 구조체는 App프로토콜을 준수하며 앱의 콘텐츠와 동작을 제공한다.
Protocol: App

변수body는 App 프로토콜의 요구사항 속성이다.
body는 앱의 콘텐츠를 반환하며 Scene에는 앱의 사용자 인터페이스를 정의하는 뷰 게층 구조가 포함되어있다.
다음의 다양한 유형의 장면을 제공한다.
Struct: WindowGroup
Struct: Window
Struct: DocumentGroup
Struct: Setting

WindowGroup{}는 Scene를 사용하여 앱에 표시될 기본 창을 나타낸다.

WindowGroup{} 안에는 이미지와 텍스트로 구성된 뷰 계층 구조를 생성하는 뷰가 포함되어있다 : ContentView()

결론 : 조금 더 코드를 건들여보고 알아보면서 알게된 건 기존의 UIKit을 사용한 작업에서는 AppDelegate에서 초기화를 진행했지만 SwiftUI에서는 해당 .swift 파일에서 진행하는것으로 이해했다.

2. ContentView.swift

Scene에는 앱이 사용자 인터페이스로 표시하는 뷰 계층 구조가 포함되어 있다.
뷰 계층구조는 다른 view와 관련된 view의 레이아웃을 정의한다.

ContentView는 View 프로토콜을 준수하는 구조체이다.
view는 화면에 나타나는 하나 이상의 요소를 정의한다.
view는 일반적으로 다른 view로 구성되어 view의 계층 구조를 만든다.
Protocol: View

ContentView는 View 프로토콜을 준수하므로 요구사항인 body를 구현한다.

해당 샘플에서는 VStack 을 사용했는데 UIkit에서 vertical로 지정된 StackView 로 보면 된다.
UIKit에서는 lazy로 사용하기 위해서 lazy var xxx 형태로 썼다면 여기서는 LazyVStack으로 작성을 해도 된다. (HStack 도 있으며 이미 사용하던거다.)

내부에 Image가 있는데 해당 문서를 참고 (당연히 사용법은 유사)
Struct: Image

내부에 Text가 있는데 print() 인줄 알았으나 UILabel처럼 쓰이는 것 같다
Struct: Text

.padding()을 사용하여 플랫폼 별 기본 패딩공간 가장자리에 추가한다. (뭔소리인지 모르겠는데 그냥 정중앙에 배치한다는 소리 같음)
(.padding([.bottom,.trailing], 20) 이런식으로도 쓴다는데 그림이 어떻게 그려지는지 아직 감이 안옴)
Method: padding(_: _:)