[SwiftUI] @StateObject와 @ObservedObject의 차이점

 

요즘 SwiftUI로 기존 앱을 리팩토링하고 있는데 

이런 @ 골뱅이들이 너무 많아 한번은 싹 훑고 가야겠다는 생각이 들어 오랜만에 블로깅을 해봅니다 :)

 

오늘은 가장 헷갈렸던 @StateObject, @ObeservedObject에 대해 알아보려고 합니다~! 

 

참고로 @골뱅이는 

'어트리뷰트'

또는

'어노테이션' 

이라고 읽습니다.

 

---

결론

 

아래 영상을 먼저보시죠

 

@ObersevedObject	@StateObject

 

추후 @State에 대해서도 블로깅 하겠지만, 상위뷰의 값이 바뀌어 View가 다시 그려지는 경우 (리렌더링) 

@ObservedObject의 값이 초기화 되며,

@StateObject의 경우는 값을 유지합니다. 

즉, @StateObject를 사용하는 뷰는 상위뷰의 리렌더링에도 뷰를 유지하는거죠.

 

---

 

@StateObject와 @ObservedObject 둘 다 ObservableObject를 준수합니다.

 

@ObservableObject는 Object의 값이 변경되면 @Published 속성에서 모든 관찰자가 변경된 신호를 수신하도록 합니다.

즉, 값 변경을 알려주는 역할을 해요.

 

아래 코드로 한번 보시죠.

테스트 해본 전체 코드는 맨 하단 또는 여기 에 있습니다.

final class ViewModel: ObservableObject { // <- ObservableObject 채택
    @Published var count = 0
    
    func incrementCounter() {
        count += 1
    }
}


struct ContentView: View {
    @State var initialNumber = 0
    
    var body: some View {
        VStack {
            Text("ContentView")
            Text("숫자: \(initialNumber)")
            Button("숫자 증가") {
                initialNumber += 1
            }
            .padding(.bottom)
            
            Divider()
            
            InitialView()
        }
    }
}

struct InitialView: View {
//    @ObservedObject var viewModel = ViewModel() // 상위뷰의 값이 바뀌면 현재뷰도 리렌더링 됨
    @StateObject var viewModel = ViewModel()  // 상위뷰의 값이 바뀌어 뷰가 리렌더링 되더라도 현재뷰는 유지됨
    var body: some View {
        
        VStack {
            Text("InitialView (StateObject)")
                .padding(.bottom)
            Text("Count: \(viewModel.count)")
            Button("Count 증가") {
                viewModel.incrementCounter()
            }
        }
        .padding(.top)
    }
}

 

 

 

정리하자면,

@ObservedObject

View에 종속되어 있고, ObservableObject 또는 상위뷰에서 데이터 변화가 있을경우 View를 처음부터 그린다.

View와 생명주기를 같이 한다.

 

@StateObject

View에 종속되지 않는다. (View의 생명주기와 따로 관리됨)

데이터 변화가 있을경우 데이터를 사용하는 부분만 다시 그린다.

 

뷰가 리렌더링 돼도 객체가 다시 초기화 되지않는다.

---

이외에도 

@State

@Binding

 

@EnvironmentObject

@Environment

등이 있는데 하나씩 정리를 해봐야겠습니다 ~!

 

참고

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

2.  https://developer.apple.com/documentation/swiftui/stateobject

3. https://www.avanderlee.com/swiftui/stateobject-observedobject-differences/

4. https://velog.io/@syong_e/SwiftUI-ObservedObject-%EC%99%80-StateObject-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

 

 

 

GitHub

https://github.com/Bhoon-coding/StateObserveObjectTest/tree/main/StateObserveObjectTest

GitHub - Bhoon-coding/StateObserveObjectTest: @StateObject, @ObservedObject의 차이점 테스트