[iOS] iOS 13 SwiftUI Features

Introduce

---

본 포스트에서는 iOS13 SwiftUI의 주요 개념들을 간단한 예시 코드와 함께 소개합니다.

 

SwiftUI 1.0(iOS 13.0)

---

Apple Developer Documentation

What is SwiftUI

---

Apple은 2019년 WWDC에서 SwiftUI를 발표했습니다.

 

SwiftUI는 Swift의 성능을 바탕으로 모든 Apple 플랫폼에서 사용자 인터페이스를 구축할 수 있는 혁신적이고 간소화 된 방법입니다.

 

Declarative Syntax

---

SwiftUI의 가장 큰 특징 중 하나는 인터페이스를 구축하는 방식이 선언형으로 진행된다는 점이죠!

 

그덕에 더욱 직관적으로 코드를 작성하거나 유지보수 할 수 있다는 장점이 있습니다.

 

struct ContentView: View {
    var body: some View {
        VStack {
            Text("SwiftUI")
            Text("is")
            Text("great")
        }
    }
}

 

Cross Platform... Sort Of

---

SwiftUI는 애플의 모든 플랫폼에서 동작합니다.

 

따라서 개발자는 한 번 작성한 유저 인터페이스를 모든 앱에서 사용할 수 있습니다.

 

아래 예시는 하나의 앱에서 아이폰과 워치를 대상으로 분기하여 UI를 그리는 코드입니다.

 

var body: some View {
    #if os(iOS)
        return SettingsView()
            .navigationBarTitle(Text("Title"), displayMode: .large)
            .listStyle(GroupedListStyle())
    #endif

    #if os(watchOS)
        return SettingsView()
    #endif
}

전처리 구문을 통해 컴파일러에게 컴파일 대상에 기반한 각 블록만 수행하도록 제어할 수 있습니다.

 

Observed Objects and State

---

SwiftUI는 상태 변화에 대한 Property Wrapper를 제공하며 이를 통해 데이터 모델과 유저 인터페이스를 동기화 상태로 유지하도록 관련 기능들을 제공합니다.

 

@ObservedObject. @EnvironmentObject, @State 와 같은 Property Wrapper 통해 다양한 기능을 구현할 수 있습니다.

 

@State : String, Int, Bool과 같은 간단한 값을 저장하고 View의 현재 상태를 표시하기 위해 사용됩니다.

• @State 로 선언된 변수의 값이 변할 때 View를 다시 계산하여 그립니다.

@State private var userId: Int = 0

@Binding : @State 변수에 $ 를 붙이면 Binding 타입의 변수가 나타납니다.

• @Binding 은 이름 그대로 다른 어딘가에 값을 연결해주며 해당 값이 변경되면 연결된 모든 값들에 영향이 갑니다.
• 같은 데이터를 가지고 있다면 한 쪽에서 수정했을때 다른 쪽에서도 수정이 일어나도록 합니다.

struct ContentView: View {
    @State var isToggleOn: Bool = false

    var body: some View {
        VStack {
            // State 변수에 $를 붙여 Binding 합니다.
            Toggle(isOn: $isToggleOn) {
                Text("토글 텍스트")
            }
            .padding()

            if isToggleOn {
                Text("Dummy Text")
            }
        }
    }
}

 

@ObservedObject : ObservableObject 의 상태를 관찰하는 객체를 생성하고자 할 때 사용합니다.

• ViewModel과 같이 View를 그리는데 필요한 데이터들을 가지고 있는 모델에 대한 참조를 생성할때 많이 사용합니다.
• String, Int와 같은 간단한 타입 대신 외부 참조 타입을 사용한다는 점을 제외하면 @State 와 유사합니다.

@EnvironmentObject : 이름에서부터 뭔가 Global Scope느낌이 나죠..?, EnvironmentObject는 모든 View가 읽을 수 있는 Share Data를 의미합니다.

@EnvironmentObject var userData: UserData

 

Example Code

// Custom Data Model
struct CoordinateData: **ObservableObject** {
    // Observed가 가능하도록 ObservableObject 프로토콜을 준수합니다.
    @Published var x: Double
    @Published var y: Double

    init(x: Double, y: Double) {
        self.x = x
        self.y = y
    }
}

// ContentView
struct ContentView: View {
    **@ObservedObject** var coordinates: CoordinateData
    // ObservableObject 프로토콜을 준수하는 객체를 Observe합니다.
    **@EnvironmentObject** var user: LoggedInUser
    // 모든 View가 읽을 수 있는 공용 데이터 객체를 가져옵니다.
    **@State** var location: String
    // 현재 상태에 대한 값을 저장하기 위해 State 객체를 사용합니다.

    var body: some View {
        VStack {
            Text("X Coordinate is \\(coordinates.x)")
            Text("Y Coordinate is \\(coordinates.y)")

            Text("Location is \\(location)")

            Text("LoggedInUser name: \\(user.name)")
        }
    }
}