[iOS - SwiftUI] class 타입 바인딩 방법 (@State와 @Bindable의 차이, Observable macro 사용 방법)

@State, @Bindable 이란?

• @State 개념
  • 양방향 바인딩 (프로퍼티 <-> 뷰)
  • @State는 Property wrapper로 구현되었으며 뷰의 상태를 표시해줄 목적으로 있는 키워드
  • 이 키워드로 프로퍼티를 선언하고 이 키워드를 뷰에 입력해주면, 이 프로퍼티가 변경되면 자동으로 뷰도 변경됨

ex) string이라는 프로퍼티를 @State로 선언하고, 이 프로퍼티를 Text(string)으로 Text 뷰에 넣어준 후, string 프로퍼티 값을 변경해주면 자동으로 Text뷰에 반영됨

import SwiftUI

struct ContentView: View {
    @State var string = "..."
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text(string)
        }
        .padding()
        .onAppear(perform: {
            string = "appeared!"
        })
    }
}

#Preview {
    ContentView()
}

• @Bindable이란?
  • swift의 primary type들에 대해서는 @State로 선언하여 위 예제처럼 사용하면 되지만, class타입으로 새롭게 모델을 정의하여 이 모델에도 자동으로 @State 처럼 뷰에 바인딩되게끔 하고싶은 경우 사용하는 키워드

ex) class타입을 @State로 하면 바인딩이 안됨

import SwiftUI

struct ContentView: View {
    @State var personClass = PersonClass()
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text(personClass.name)
        }
        .padding()
        .onAppear(perform: {
            personClass.name = "appeared!"
        })
    }
}

#Preview {
    ContentView()
}

class PersonClass {
    var name: String = "jake"
}

결과) 값이 "appeared!"로 변경되지 않음 (= 바인딩되지 않음)

@bindable을 사용하여 class 타입 바인딩 방법

• class타입 모델에 @Observable 선언

@Observable
class PersonClass {
    var name: String = "jake"
}

• 이 @Observable의 정체는?
  • iOS 17+부터 사용 가능
  • 바인딩의 대상이 가능하게끔하는 swift macro로 구현된 키워드
  • 원래는 모델에 @Observable을 사용하면 프로퍼티에도 모두 @Published를 붙여주어야 했는데 macro기능으로 인하여 모두 생략이 가능

https://developer.apple.com/documentation/swiftui/migrating-from-the-observable-object-protocol-to-the-observable-macro

• 이렇게 @Observable 키워드를 붙인 모델을 사용하는쪽에는 @Bindable을 사용하여 바인딩

import SwiftUI

struct ContentView: View {
    @Bindable var personClass = PersonClass()
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text(personClass.name)
        }
        .padding()
        .onAppear(perform: {
            personClass.name = "appeared!"
        })
    }
}

#Preview {
    ContentView()
}

@Observable
class PersonClass {
    var name: String = "jake"
}

• 주의)
  • @Observable을 사용한 모델을 바인딩할때는 @State가 아닌 @Bindable을 사용했지만, @State를 사용해도 바인딩이 잘 동작함
  • 그렇다면 @State가 아닌 @Bindable을 사용하는 이유?
    • @Bindable은 @State와 기능은 같지만 @Bindable을 사용하면 개발자 입장에서 "class타입인 @Bindable 모델을 바인딩 하고 있구나"라는 것을 인식할 수 있기 때문

* 참고

- https://developer.apple.com/documentation/swiftui/migrating-from-the-observable-object-protocol-to-the-observable-macro

- https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app