@StateObject @ObserverdObject 그래서 뭐시 다른디

@Stateobject 와 @ObservedObject 도대체 뭐가 다르고 어떻게 사용해야할까?   

 

SwiftUI로 개발을 하면서 가장 많이 쓰이고, 나를 가장 많이 괴롭혔던 ,,

도대체 이 둘은 뭐가 다른것이며, 또 어떻게 잘! 사용해야할까 ? 알잘딱 정리해보겠다..!! 😤

 

 

먼저 Apple 의 공식문서를 살펴보면,

@ObservedObject 는

observable object 를 subscribe(구독)하는 Property wrapper 이고, observable object 가 변화하면 뷰를 무효화 시킨다고 한다.

⇒ 즉, 뷰에서 observable object를 구독하고 지켜보면서 이 객체의 변경이 감지되면 뷰를 다시 그려서 새로 업데이트한다.

 

 

@Stateobject 는?

observable object 를 인스턴스화 한 Property wrapper 라고 한다.

 

 

음 @ObservedObject 와는 어떤 차이일지, 좀더 읽어보면

SwiftUI creates a new instance of the model object only once during the lifetime of the container that declares the state object. For example, SwiftUI doesn’t create a new instance if a view’s inputs change, but does create a new instance if the identity of a view changes.

⇒ observable object를 구독하는 인스턴스를 “딱 한번” 만 만들고

⇒ 뷰의 상태가 변해도, 딱 한 번 만들어진 인스턴스는 @StateObject의 생명주기동안 다시 만들어지지 않는다.

⇒ observable object에 있는 @published 프로퍼티의 상태 변화가 생기면, 뷰를 새로 다시 그리는것이 아니라 해당 프로퍼티가 사용되는 부분만 업데이트한다.

 

 

 

백문이 불여일타! 차이들을 실제 코드에 적용시켜서 이해해보자.

 

먼저 CounterStore라는 observable object 를 하나 만들어준다.

final class CounterStore: ObservableObject {
    @Published var count = 0
    
    func reset() {
        count = 0
    }
    
    func plusOne() {
        count += 1
    }
}

 

StateCounterView , ObservedCounterView 라는 각각의 하위뷰(SubView)들을 만들어 넣어준다.

여기서 StateCounterView는 StateObject 를 가지고 있고, ObservedCounterView 는 ObservedObject를 가지고 있다.

struct StateCounterView: View {
    @StateObject var counterStore: CounterStore = CounterStore()
    
    var body: some View {
        VStack {
            Text("\(counterStore.count)")
                .font(.largeTitle)
            
            HStack {
                Spacer()
                
                Button {
                    counterStore.reset()
                } label: {
                    Text("reset")
                        .font(.largeTitle)
                }
                
                Spacer()
                
                Button {
                    counterStore.plusOne()
                } label: {
                    Text("plus 1")
                        .font(.largeTitle)
                }
                
                Spacer()
            }
        }
    }
}

struct ObservedCounterView: View {
    @ObservedObject var counterStore: CounterStore = CounterStore()
    
    var body: some View {
        VStack {
            Text("\(counterStore.count)")
                .font(.largeTitle)
            
            HStack {
                Spacer()
                
                Button {
                    counterStore.reset()
                } label: {
                    Text("reset")
                        .font(.largeTitle)
                }
                
                Spacer()
                
                Button {
                    counterStore.plusOne()
                } label: {
                    Text("plus 1")
                        .font(.largeTitle)
                }
                
                Spacer()
            }
        }
    }
}

 

 

상위뷰(SuperView) 를 만들고, @State 변수 isClicked 를 하나 선언하여 이 변수의 상태가 변경하면서 뷰를 새로 그리도록 해보자.

이를 통해 알고싶은것은 상위뷰에서 뷰가 새로 그려질때, 이 두개의 하위뷰는 어떤 차이점 을 보일지이다.

struct ContentView: View {
    @State private var isClicked: Bool = false
    
    var body: some View {
        VStack {
            Group {                
                Button {
                    isClicked.toggle()
                } label: {
                    Text(isClicked ? "ON" : "OFF")
                        .font(.title)
                        .background(.yellow)
                }
            }
            Spacer()
            Group {
                Text("subview StateObject")
                    .bold()
                StateCounterView()
            }
            Spacer()
            Group {
                Text("subview ObservedObject")
                    .bold()
                ObservedCounterView()
            }
            Spacer()
        }
        .padding()
    }
}

 

결과

 

ON/OFF 버튼을 누르면 isClicked라는 @State 변수의 상태가 Update 된다.

 

그러면 이와 같이 StateCounterView(하위뷰)는 상위뷰가 다시 그려지는 것과는 별개로 뷰가 다시 그려지지 않고, 하위뷰안에 계속 살아남아서 활용된다.

따라서 StateCounterView의 CounterStore()의 초기화는 딱 한번만 실행된다.

 

반면 , ObservedCounterView(하위뷰)는 ObservedObject는 상위뷰의 상태가 변경되어 다시 그려져야 할 때마다, subView안에서 다시 만들어진다.

즉 , ObservedCounterView의 CounterStore() 초기화는 상위뷰가 다시 그려질때마다 실행되는것이다.

 

이를 보고 느낀 차이점은 StateObject는 뷰와는 별개로 존재한는 인스턴스 같은 느낌이고,

ObservedObject 는 뷰와 동시에 존재하는 느낌?

 

ObservedObject는 뷰에 종속된 느낌이고, StateObject는 뷰와 독립된 느낌이다.

 

 

---

 

또  SwiftUI로 앱을 만들다 보면 StateObject와 ObservedObject 를 필수적으로 많이 사용하게 되는데,

개발을 하면서 StateObject 와 ObservedObject 를 같이 사용하다보니,

이 두가지를 어떻게 사용해야 올바르게 사용하는 것일까 라는 고민을 하게 되었다. 🤔

 

특히 상위뷰에서 @StateObject를 선언해서 instance를 만들어주고,

하위뷰에서 이 인스턴스를 전달받아서 사용할때 @StateObject로 받아주다가, 앱이 터져버리는 경우도 있었다. 🤯

 

생각해보면 @StateObject 는 위에서 알아본 내용 처럼 ObservableObject 의 인스턴스 딱 한번 생성을 한다.

그래서 상위뷰에 StateObject를 선언했을때, 하위뷰에서도 @StateObject 로 받아주게 되면 이 인스턴스가 하위뷰에서도 같이 관리가 되기 때문에 위험할 수 있다.

 

 

따라서 개발을 할때! 

상위뷰와 하위뷰간의 인스턴스를 전달을 하는 상황에서는,

@StateObject 를 사용하려면 최상단뷰에서 한번 인스턴스를 초기화 시켜주고, 그 인스턴스를 넘겨받는 하위뷰들에서는 @ObservedObject로 넘겨받아서 만들어진 @StateObject 인스턴스를 단지 관찰하는 역할만으로 사용해주는것이 좋을 듯 하다! 

추천 !!!

 

 

이것은 ContentView(최상단뷰) → MagazineMainView(하위뷰) 에 인스턴스를 전달하는 예시이다.

1. 처음 ContentView(상위뷰)에 @StateObject 를 선언해서 인스턴스를 생성한 후에

 

2. MagazineMainView(하위뷰) 에 다음과 같이 인스턴스를 전달한다. 

 

3. 전달된 인스턴스를 MagazineMainView(하위뷰) 에서는 ObservedObject로 받아준다.

 

 

 

결론!! 

@Stateobject 는 최상단뷰에서 딱 한번만 생성! 하위뷰에는 ObservedObject 사용! 으로 알잘딱 마무리 하겠다.