[iOS] WWDC23: Discover Observation in SwiftUI / iOS17+

Discover Observation in SwiftUI - WWDC23

https://developer.apple.com/videos/play/wwdc2023/10149/
https://developer.apple.com/documentation/observation

Observation 을 사용하면 표준 Swift 구문을 사용해서 모델을 정의하고, UI 가 모델의 변경사항에 응답하도록 할 수 있다.
SwiftUI 를 사용해서 원활하고 직관적으로 개발할 수 있다!

목차

1:03 - What is Observation?
4:23 - SwiftUI property wrappers
7:34 - Advanced uses
10:27 - ObservableObject

What is Observation?

Observation 은 property 의 변경 사항을 추적하기 위한 Swift 의 새로운 기능이다.

• Swift 5.9 의 새로운 매크로 시스템을 사용한다. (magic of macros!)

기존에 존재하던 데이터 모델 클래스에 @Observable 프로퍼티 래퍼를 추가하면 UI 가 모델의 변경 사항에 응답하도록 만들 수 있다.

• @Observable 은 Swift 컴파일러에게 작성한 코드를 type 을 관찰 할 수 있는 확장된 형식으로 변환하도록 지시한다.

Observable type 으로 작동하는데 다른 종류의 프로퍼티 래퍼는 필요하지 않다 !

• 기존에는 SwiftUI View 에서 변경되는걸 감지하기 위해서는 각 모델의 속성에도 @Published 를 붙여야 했고,
• 데이터 모델에도 StateObject, EnvironmentObject 등의 프로퍼티 래퍼를 붙였어야 했다.

SwiftUI 는 body 코드를 수행할 때 모델이 특정 속성에 액세스 한다는 것을 알고 있고, 위의 코드만으로 donuts 속성에 액세스한것을 감지할 수 있다.

• body 의 코드가 수행될 때, SwiftUI 는 Observable 타입에서 사용되는 속성에 대한 모든 액세스를 추적한다.
• 그 이후 추적한 정보를 통해서 인스턴스의 속성에 대한 변경사항이 반영될 시기를 결정하는데 사용한다.

위 코드에서는 Add new donut 버튼을 클릭해서 donuts 배열을 변경하면 DonutMenu 뷰가 무효화되고 UI 가 업데이트되게 된다.

• 해당 뷰에서는 orders 속성에 대한 접근이 없기 때문에, 해당 값이 바뀌게 되어도 뷰는 업데이트 되지 않는다.

Computed property 를 추가하면 이전과 동일한 규칙을 따라서 사용되는 속성이 변경되면 UI 가 업데이트된다.

• orders 가 변경되면 orderCount 도 변경되고, Text 도 업데이트된다.

세줄 요약

• Macro
  • @Observable 매크로를 사용하면 관찰이 가능한 유형이 된다.
• Track access
  • SwiftUI 는 속성에 대한 접근을 추적하고, Observation 에서 변경되는 시기를 관찰할 수 있다.
• Property changes cause UI updates
  • 추적 정보를 통해 접근이 있는 속성이 변경될 때만 View 를 다시 그리게 된다.

Swift Macro 에 대해서 더 알아보기 세션
https://developer.apple.com/videos/play/wwdc2023/10166
https://developer.apple.com/videos/play/wwdc2023/10167

SwiftUI property wrappers

Observable 을 사용하면 SwiftUI 에서 사용한 property wrapper 사용이 쉬워진다.

• 기존에 사용하던 state, environment, bindable 은 언제 어떻게 사용될까 🧐

@State

@State 속성은 뷰가 모델에 저장된 자체 상태를 가져야 하는 경우에 사용된다.

• donutToAdd state 변수는 sheet 메소드를 통해 바인딩되어 모달 뷰를 띄우고, 닫을 때 사용한다.
• 이렇게 특정 뷰의 생명주기에 따라 관리될 경우에는 @State property wrapper 를 사용한다.

@Environment

@Environment 속성을 통해서 전역적으로 접근 가능한 값으로 전파할 수 있다.

• Observable type 은 접근을 추적해서 업데이트를 하기 때문에, userName 이 변경될 때 FoodTruckMenuView 가 변경된다.

@Bindable

https://developer.apple.com/documentation/swiftui/bindable

Binding 보다 좀 더 가볍게 등장한 Bindable 프로퍼티 래퍼

• Observable type 에 대해서 바인딩을 가능하도록 해준다.
• $ 구문을 사용해서 해당 속성에 대한 바인딩을 가져온다.

위의 예제에서 이름을 텍스트필드를 통해 변경하고 싶다면

• Text 를 TextField 로 변경하고 $ 구문을 사용해서 name 에 대한 바인딩을 전달한다.
• 도넛에 바인딩하려면 @Bindable var donut 으로 변경하면 된다.

Observable type 을 State, Environment, Bindable 로 설정할지에 대한 기준

Advanced uses

위의 예제들에서 Observable type 은 저장된 상태의 모델에서만 사용되었지만, 더 많은 일들을 할 수 있다.

• SwiftUI 는 인스턴스의 필드에 대한 액세스를 추적하기에, 배열, 옵션, observable model 을 포함한 모든 타입을 사용할 수 있다.
• 아래 예제에서 Observable type 인 Donut 을 배열 형태로 선언해도, 필요한 경우에 UI 가 자동업데이트된다.

computed property 에 포함된 속성이 Observable type 이 아닌 경우 Observation 과 함께 작동하려면 두가지 단계를 추가로 수행해야 한다.

• 속성에 액세스 할 때, 속성이 변경될 때 Observation 에 알리기만 하면된다.

ObservableObject

이전의 방식인 ObservableObject 를 Observable 매크로를 사용하도록 변경하는 방법

• ObservableObject 채택을 제거한다.
• 각 속성에 설정된 @Published 를 제거한다.
• Observable 매크로를 표시한다.

View 에서 속성에 설정했던 @ObservedObject, @EnvironmentObject` 등의 프로퍼티 래퍼

• @ObservedObject 는 제거되고, 필요한 경우 @Bindable 을 활용한다.
• @EnvironmentObject 래퍼는 @Environment 로 변경되었다.

불필요한 주석이 사라지고, 세가지 @State, @Environment @Bindable property wrapper 만 남아서 더 작성하기 쉬워졌다.

• 기존의 ObservableObject 에 비해 Observable 매크로는 모델 단순화, 성능 향상 가능하다 !
• 아직은 헷갈려요 😇