XCode에서 Swift UI를 생성하면 다음과 같은 초기 코드가 존재한다.
App, Scene, View가 어떤 역할을 하는지 살펴보도록 한다.

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

 

1. @main
앱을 시작하였을때 진입점을 명시해준다. 이 프로토콜은 앱을 시작하면 main()함수를 호출하게 해준다.
이 main은 모든 앱의 파일중에서 단 하나만 존재해야한다.

2. App
어플리케이션의 구조와 동작을 나타내는 프로토콜. 
App의 작동을 정의하는 body 변수를 필수로 가져야한다. body는 하나 이상의 Scene에 의해서 구성되는 인스턴스이다. app은 런타임동안 body에 가지고 있는 Scene들을 표현한다.

 - App의 life cycle 관리 : iOS 앱에 있어서 life cycle(생명주기)이란 어플리케이션의 활성/비활성 및 Foreground(화면에 띄워짐)/Background(화면에 띄워지지않은 상태에서 실행되고있음), 시스템이 발생시키는 이벤트에 의해 App의 상태가 전환되는 과정을 말한다.
 iOS14 이전의 버전에서는 App Delegate와 SceneDelegate를 통해 life cycle을 관리하였다.
 (과거 버전에서는 App의 생명주기만 존재했지만, 이후 Scene개념이 도입되면서 Scene만의 생명주기도 추가되었다)
  Delegate 클래스는 생명주기 관리외에도 코드 Clean-up, 상태 변경, 이벤트에 필수적인 작업들을 진행하였다.
 하지만 iOS 14부터의 Swift UI버전에서는 이런 요소들이 App인스턴스가 자동적으로 관리하며, 작업자는 진입점(@main)만 정의하면 된다.

※ App Delegate와 SceneDelegate 최신버전에서는 필수적이지 않기에, 프로젝트를 생성해도 기본적으로 내장되어 있지 않다. 다만 아직도 일부 SDK기능등을 이용하기 위해선 필요하여 수동적으로 도입한다.

 

3. Scene
Scene은 어플리케이션에 그려지는 화면을 표현하는 역할을 담당하는 인스턴스. 각각의 UI요소를 담당하는 View들의 계층구조에서 뿌리 역할을 담당한다.
- 계층구조



- Scene Phase: Scene을 활성·비활성·백그라운드 실행 상태를 나타내는 값이다. 이 값이 변경될 때 작업들을 정의하여 Scene의 life cycle을 관리할 수 있다.

@main
struct MyApp: App {
	// 백슬래쉬(\)는 변수가 아닌, property값을 나타낸다는 의미이다. keypath라고도 한다.
	@Environment(\.scenePhase) private var scenePhase
    var body: some Scene {
        WindowGroup {
            Text("Hello, world!")
        }
    }
	.onChange(of: scenePhase) {(newScenePhase) in
		switch newScenePhase {
        	case .active:
         		// 활성 상태가 되었을때 작동 정의
		 	case .inactive:
         		// 비활성 상태가 되었을때 작동 정의
			case .background:
            	// 백그라운드 실행 상태가 되었을때 작동 정의
        }
	}
}

 

  • active: Scene이 foreground 상태이며, 유저 이벤트를 받을 수 있는 상태
  • inactive: Scene이 foreground 상태이지만, 이벤트를 받지 못하는 비활성 상태
  • background: Scene이 현재 존재하고있지만, UI에서는 보여지지 않는 상태

여기서 Swift UI가 기본적으로 제공하는 여러타입의 Scene이 존재한다. 표현하고자 하는 Scene에 알맞은 타입을 적용하거나, 혹은 사용자가 직접 Scene을 커스텀하여 정의할 수 있다.

  • WindowGroup: 동일한 계층구조를 가지는 그룹들을 여러개의 독립된 윈도우들로 구성하여 관리하는 Scene
  • Window: 단 하나의 유일한 윈도우만 보여주는 Scene
  • DocumentGroup: 파일 등의 document들을 Read/Write할 수 있도록 지원하는 Scene
  • Settings: App의 설정값들을 보여주고 수정할 수 있게하는 Scene
  • WKNotificationScene: 원격 혹은 로컬에서 알림을 받았을 때 나타나는 Scene

 

4. View
 view는 앱의 UI를 표현하는 프로토콜이다. view 프로토콜은 커스텀한 view의 내용물을 담는 body를 정의해야한다.
body는 swift ui에서 제공하는 하나 이상의 built-in view를 조합해서 작성할 수 있다. 이렇게 view 안에 하위 view들이 구성되는 형태, 즉 view끼리의 계층구조가 구성된다.
  - modifier: view는 modifier을 정의하여 크기, 색상, 폰트 등 여러가지 요소들을 수정할 수 있다.

import SwiftUI

struct ContentView: View {
    var body: some View {
		Vstack{
            Text("Hello SwiftUI!")
                .font(.title)
            Spacer()
            Button(action: {
            	 print("Clicked")
        	}) {
            HStack {
                Image(systemName: "heart")
                Text("Start")
                .font(.title)
            }
            .foregroundColor(.blue)
        }
    }
}

// 정의한 View를 UI에 그려진 화면으로 미리볼 수 있도록 제공한다
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

위의 예시 코드에서 .font, .foreground 등의 설정값이 각 view들의 modifier가 된다.

UI를 구성하는 
built-in view는고정 텍스트(Text), 수정가능한 텍스트 영역(TextEditor), 버튼(Button), 이미지(Image) 등 다양한 종류를 지원하고 있고, 이들의 스타일을 편집하는 modifier도 굉장히 다양한 옵션들이 존재한다.

+ Recent posts