[SwiftUI] @State와 @ObservableObject 알아보기

 

@State와 @ObservableObject

SwiftUI Tutorial를 통해 SwiftUI를 공부하는데 이런 뜬금없는 친구들이 등장했다. 일단 쓰이는 곳에서 view가 새로 렌더된다는 느낌만 받고 넘어갔지만,, 결국 정리를 해야 다음 단계로 넘어갈 수 있을 것 같아 자세히 정리해보려 한다.

 

@State

@State는 SwiftUI의 뷰에서 사용되는 속성으로, @State가 붙어있는 속성이 변경 되는 경우 view가 자동으로 새로 그려지도록 하는데 사용된다. 

 

다시 설명하자면 기존의 View에서 사용되는 변수들은 변경되어도 view가 다시 그려지지 않는 반면, @State가 붙은 변수( showDetail, showStar, 등)를 통해 view의 변화가 필요한 경우 사용할 수 있다. 

@State var showDetail: Bool

 단, @State는 value 타입( String, Int, Double, Bool 등)만 저장할 수 있지만 클래스나 구조체는 저장할 수 없다.

 

예시

import SwiftUI

struct Count: View {
    @State var score: Int = 0
    
    var body: some View {
        VStack {
            Text("\(score)")
               
            Button {
                self.score += 1
            } label: {
                Text("+")
            }
        }
    }
}

 

 

@ObservedObject

@ObjservedObject는 @State와 다르게 객체의 상태 변화를 추적해서 view를 다시 그리도록 한다.

SwifUI 어플리케이션에서는 ViewModel 패턴을 사용하여 뷰와 모델을 분리하고 뷰 모델에서 어플리케이션의 비지니스 로직을 처리한다. 뷰 모델이란 뷰에서 모든 비지니스 로직, 상태 등을 저장했을 때 코드 재사용성이 떨어지고 뷰가 너무 커지는 것을 막기 위해 사용한다. 뷰의 비지니스 로직과 상태를 따로 저장함으로 view의 재사용성과 테스트 용이성을 높이기 위해 사용한다.

 

@ObservedObject는 위에서 설명한 뷰모델을 가져와서 뷰 모델에 상태를 저장하고 비지니스 로직을 처리하는데 사용되어진다. 뷰모델은 @ObservedObject로 가져오기 위해 먼저 ObservableObject Protocol을 준수해야 하고 해당 객체의 @Published 속성의 래퍼가 붙은 속성이 업데이트 되었을 때 자동으로 연결된 View에 업데이트를 요청한다. 

 

위에 @State 예제를 Counter 객체를 만들어서 score를 가져와서 업데이트를 할 수 있게 변경할 수 있다.

class Counter: ObservableObject {
    @Published var score: Int = 0
}

struct Count: View {
//    @State var score: Int = 0
    @ObservedObject var counter = Counter()
    
    var body: some View {
        VStack {
            Text("\(counter.score)")
               
            Button {
                counter.score += 1
            } label: {
                Text("+")
            }
        }
    }
}

위와 같이 @ObservedObject를 사용할 경우 연결된 객체의 상태에 의존해서 자동으로 뷰가 업데이트되서 코드가 간결해지고 UI와 비지니스 로직을 분리하여 테스트를 하기 쉬워진다.