SwiftUI - @State와 @StateObject 비교

안녕하세요! Diana 입니다.

오늘은 SwiftUI에서 @State와 @StateObject 를 비교해보려고 합니다.

바로 시작해볼께요~

 

---

 

✅ @State

SwiftUI를 처음 공부할 때 제일 처음 접하는 Property Wrapper 중 하나가 바로 @State 죠.

@State에 대한 공식문서의 설명은 아래와 같습니다.

A property wrapper type that can read and write a value managed by SwiftUI
- Apple Docs: https://developer.apple.com/documentation/swiftui/state

 

SwiftUI에서 관리되고 있는 값을 읽거나 쓰기 위한 Property Wrapper 타입이라고 하네요.

또한 WWDC 에서는 State는 해당 뷰에서 "소유" 하고 있고 Single Source of Truth가 보장되는 경우 사용 가능하다고 합니다.

 

예를 들어보죠.

 

struct FirstView: View {
	@State private var number = 0
    
    var body: some View {
    	VStack {
        	Text("number = \(number)")
            Button("Hit!") {
            	number += 1
            }
        }
    }
}

 

위의 예시에서 number 의 값이 변경이 되는 경우 Text의 라벨 값은 자동으로 변경됩니다.

 

@State의 경우는 SSOT를 만족시키기 때문에 기본 Private로 선언됩니다.

따라서 주로 해당 뷰 내부에서의 변경에 사용되며 다른 뷰와의 소통을 위해서는 @Binding과 같은 다른 Property Wrapper의 도움이 필요합니다.

 

✅ @StateObject

@StateObject에 대한 공식문서의 설명은 아래와 같습니다.

A property wrapper type that instantiates an observable object
- Apple Docs: https://developer.apple.com/documentation/swiftui/stateobject

 

관찰가능한 객체를 인스턴스화 시키는 Property Wrapper 이라고 합니다.

String, Int, Bool 등의 값에 사용되는 @State와는 차이가 있죠.

 

또한 @StateObject는 ObjectType이 ObservableObject를 만족시켜야 하며 이 부분에서는 오히려 @ObservedObject 어노테이션과의 유사성을 가지고 있습니다.

(따라서 비교를 하게 된다면 @State와 @StateObject가 아닌 @StateObject와 @ObservedObject를 비교하는게 맞았겠네요 ㅎㅎ;)

 

예를 들면 아래와 같습니다.

 

struct FirstView: View {
	@StateObject var sample = SampleObject()
    
    var body: some View {
    	VStack {
        	Text(number > 10 ? "10 +" : "10 -")
            Button("Hit") {
            	sample.changeNumber()
            }
        }
    }
}

class SampleObject: ObservableObject {
	@Published var number = 0
    
    func changeNumber() {
    	self.number += 1
    }
}

 

유사성을 가지고 있다고 한 @StateObject 와 @ObservedObject 는 물논 분명한 차이점을 가지고 있습니다.

@ObservedObject의 경우 해당 View가 그려질 때 같이 초기화 된다는 것이죠.

 

아마 말로만 들어서는 무슨소리인지 이해가 안될 것이라 생각합니다.

저도 실제로 WWDC를 계속 돌려보고 사용해본 뒤 이해가 가더라구요!

 

이 부분에 대해서는 다음 글에서 정리해보도록 하겠습니다.