[SwiftUI] ObservableObject, ObservedObject, Published

 

 

 

 

회사에서 SwiftUI로 작업을 하고 있지만, 회사 프로젝트 기반인 UIKit의 그늘에서 벗어나지 못 해서 언제나 반쪽짜리 SwiftUI로 작업하는 기분이 들었다. Property Wrapper를 작업 초기에 회사 컨플루언스에 정리하고, 그 글을 다시 이 블로그에 적기도 했는데 그땐 회사에서 검색해도 뭐가 뭔지 몰라서 정의보다도 뜻을 찾아본 느낌이 강했다. 실제로 회사 프로젝트에서 해당 wrapper들을 다 활용하지 못 하기도 했고.

 

그래서 다시 차근차근 하나씩 간단히 예제 코드를 짜보며 공부해보고 정리하고자 한다.

 

참고로, wrapper 정리했던 게시글을 아래 링크의 글이다. 거창한 총정리란 타이틀과 달리 정말 정의 의주로 정리된 글이다.

 

https://calliek.tistory.com/54#%C2%A0-8

[SwiftUI] Property Wrapper 총정리

 

 

 

---

 

 

이 포스트의 주제인 ObservableObject, ObservaedObject, Published는 모두 Combine에 속해있다.

Combine은 rxSwift처럼 비동기 이벤트 처리를 관리하는 애플이 만든 프레임워크다.

 

그런데 갑자기 컴바인을 왜 여기서 쓰는지에 대해 의문이 들 수도 있는데, state - binding은 상위-하위뷰가 명확할 때 사용하기 때문에 다수의 뷰에서 사용하기엔 적합하지 않다. 외부에 선언 된 값을 관찰하는 것과 같은 상황에선 이벤트 변화를 관찰하는 observableObject와 observedObject 쓰는 게 적합하다.

 

 

 

 

 

 

ObservableObject

- ObservableObject는 객체가 변경 되기 전에 방출하는 퍼블리셔를 가진 객체다.

- 변화를 감지할 수 있는 객체로, ObservableObject를 사용한 객체의 프로퍼티를 관찰하고 있다가 프로퍼티의 변화를 감지하면 뷰를 다시 그리며 업데이트 해주는 역할을 한다.

- "얘 값 바뀌었네, 업데이트 진행 시켜!" 하는 역할을 수행한다.

 

 

Published

- Published는 클래스 내부 객체의 변화를 감지했을 때 자동으로 뷰를 업데이트 할 수 있도록 알리는 역할을 한다.

- ObservableObject 클래스 내부에 선언 되어 있을 때, willSet 역할을 하는 objectWillChange 퍼블리셔를 자동으로 호출해서 published로 선언 된 속성의 변화를 감지 후 업데이트하도록 한다. 그렇기 때문에 주로 ObservableObject와 함께 쓰인다.

- "나 값 바뀌었어, 업데이트 해야해!"하는 역할을 수행한다.

 

 

사용 예시

class UserSettings: ObservableObject {
  @Published var username = "Anonymous"
  @Published var count = 0
  @Published var isOn = false
}

 

 

1. 공식문서에도 따로 강조되어 있는 부분인데, ObservableObject와 Published는 class 내에서만 사용해야한다.

2. 유저와 관련된 값을 관찰할 것이기 때문에 UserSettings라는 ObservableObject 클래스를 선언하고, 그 안에 관찰하고 싶은 값들을 username, count, isOn 프로퍼티로 Published 선언했다.

3. Published로 선언한 username, count, isOn의 값에 변화가 생기는지 관찰한다.

 

 

ObservedObject

- ObservedObject는 뷰 외부에서 생성된 객체 상태를 구독하고, 상태가 변했을 때마다 UI를 업데이트한다.

- "관찰 중이던 바뀐 애 업데이트 함!" 하는 역할을 한다.

 

 

사용 예시

struct PracticeObservableObject: View {
  
  @ObservedObject var settings = UserSettings()
  
    var body: some View {
      
      VStack {
        
        // MARK: - Change Name
        Text("Hello, \(settings.username)")
        Button(action: {
          settings.username = "New guy"
        }, label: {
          Text("Change Username")
            .labelStyle(.titleOnly)
        })
        
        // MARK: - Change Count
        Text("count: \(settings.count)")
        Button("Add Count") {
          settings.count += 1
        }
        
        // MARK: - Change Value
        Toggle("On", isOn: $settings.isOn)
          .padding(.horizontal, 150)
        Button("Make it On") {
          settings.isOn.toggle()
        }
      }
      
    }
}

 

4. PracticeObservableObject 뷰에 뷰 외부에서 전달 받는 UserSettings 객체를 ObservedObject로 생성해서, 해당 값을 구독 및 변화 관찰 한다.

5. 버튼 액션에 따라 값이 변화하면, 뷰를 업데이트 한다.

 

 

 

시뮬레이터

 

 

 

 

 

 

 

 

---

 

References

https://developer.apple.com/documentation/Combine/ObservableObject

ObservableObject | Apple Developer Documentation

 

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

ObservedObject | Apple Developer Documentation

 

https://developer.apple.com/documentation/combine/published

Published | Apple Developer Documentation

 

https://www.kodeco.com/books/swiftui-cookbook/v1.0/chapters/2-understanding-observableobject-observedobject

SwiftUI Cookbook, Chapter 2: Understanding ObservableObject & ObservedObject