[iOS/SwiftUI] @Published, ObservableObject, ObservedObject

• 하나의 뷰에서 데이터를 관리하기 위한 @State, Child View 혹은 다른 View와의 양방향 데이터 전달에서 사용하는 @Binding과 달리 데이터 모델과 뷰 간의 데이터 바인딩을 위해 사용됨
• 앱의 데이터 모델과 뷰 사이의 연결 생성
• view (x), viewModel과 같은 model 데이터를 관리하는 클래스에서 사용되는 프로토콜과 propertyWrapper

 

OverView

• 데이터 모델은 UI와 다른 로직들과 분리되어 있음 (모듈화, testable) -> 앱 작동 추론이 더 쉬워짐
• UIViewController을 사용할 때에는 모델의 값을 ViewController로 가지고 와서 개발자가 직접 화면에 업데이트 하는 로직을 필요로 했으나 SwiftUI에서 시스템이 데이터 변경을 감지하고 이를 UI에 바로 반영함
• 데이터 변경시 view를 업데이트 하려면 model 클래스를 ObservableObejct로 생성,  model 클래스의 properties를 publish 한 다음 @ObservedObject 를 사용해서 해당 model 클래스의 인스턴스를 생성하여 사용

ObservableObject Protocol

• 모델의 데이터 변경 내용을 SwiftUI에 표시하기 위해 ObservableObject 프로토콜을 모델 클래스에 채택해 줌
  • 말그대로 Observable 옵저빙 가능한 클래스를 생성하는 것. 이 프로토콜을 준수하면 해당 인스턴스를 subscriber가 구독하여 사용 가능한 이벤트 방출 가능 인스턴스가 됨

class BooK: ObservableObject {
    @Published var title = "동물농장"
}

 

Published

• Observing 하기 위한 property를 게시하기 위해 @Published Property Wrapper을 사용하여 정의해 줌
• 내부적으로는 didSet에서 이벤트를 방출함
• 주의사항
  • 필요하지 않은 속성을 Published로 정의해서 사용하지 않아야 함
  • 값이 변경될 수 있는지, 사용자 인터페이스에 사용되는지 확인하고 정의하도록 함

class Library: ObservableObject {
    let idx = UUID()
    let name: String
    @Published var books: [Book]
    
    init(name: String, books: [Book]) {
        self.name = name
        self.books = books
    }
}

• Library 인스턴스가 생성되면 시스템은 idx와 name의 값이 변경되지 않을 것이라는 것을 확신하고, books는 published 되었기 때문에 해당 값의 변경사항을 감시할 필요가 있다는 것을 알게 됨. 따라서 @Published로 정의된 프로퍼티는 var로 선언

ObservedObject

• ObservableObject는 protocol, ObservedObject는 propertyWrapper
• 변경 사항을 모니터링 함
• SwiftUI에게 Observable object를 감시하라고 전달하기 위해 ObservedObject 속성으로 프로퍼티를 정의함

struct BookView: View {
    @ObservedObject var book: Book
    
    var body: some View {
        BookEditView(book: book)
    }
}

struct BookEditView: View {
    @ObservedObject var book: Book

    // ...
}

• 데이터가 변경되면 SwiftUI 시스템은 관련된 모든 뷰에게 업데이트를 요청함
• 위 예제를 확인하면 BookEditView라는 자식 뷰에게 데이터를 전달하는데, Observable Object 전체를 자식 뷰에게 전달 가능함 (뷰 계층 구조를 가로질러 모델 객체를 공유가능)
• ObservedObject를 주입하는 경우 ObservableObject를 사용하는 것
• ObservableObject가 외부가 아닌 내부에서 전달하여 사용하는 것이라면 화면을 다시 그릴 때 초기화 될 가능성이 있으므로 이 때에는 StateObject 를 사용하도록 함

Binding을 사용해서 양방향 데이터 Passing

• UI에서 사용자의 이벤트를 받고 이 값에 따라 데이터를 변경하려면 이에 상응하는 프로퍼티를 바인딩 해줘야 함
• 변경된 데이터를 다시 viewModel에 업데이트 할 수 있음
• ObservedObject, StateObject, EnvironmentObject 프로퍼티는 그 객체 앞에 달러사인을 붙여서 바인딩 해줄 수 있음
• 사용자가 직접 데이터의 값을 변경하도록 허용하게 됨

struct BookEditView: View {
    @ObservedObject var book: Book
    
    var body: some View {
        TextField("Title", text: $book.title)
    }
}