인프런 커뮤니티 질문&답변

IOS17로 업데이트 됨에 따라,

@Observable 매크로를 활용하여 ViewModel을 활용하면,

상태 변화를 감지하여 'View에서 자동적으로 업데이트 된다.'라고 알고 있습니다.

@Observable 매크로를 사용해서 코드를 업데이트하던 중 궁금증이 생겨 질문을 남겨봅니다.

1. ContentView, VideoView에서 AnimalViewModel의 인스턴스를 갖고 있을 때, var로 정의했을 때와 let으로 정의를 했을 때의 차이점이 있을까요?

struct ContentView: View {

    // let이나 var이나 상관없는가?
    let vm: AnimalViewModel
    var body: some View {

        NavigationStack{

            List{
            // 1. Cover Image - hero Image
                CoverImageView(vm: vm)

관련내용을 공부하다보니, 해당 링크에서

https://www.donnywals.com/comparing-observable-to-observableobjects/

"Defining an @Observable as a let property" 부분에

HomeView에서 ViewModel에 @State 프로퍼티 래퍼를 사용한 후 let을 사용한다? 라는 내용을 본적이 있습니다.

2. GalleryView에서 @State 프로퍼티 래퍼와 @Bindable 프로퍼티 래퍼를 사용했을 때의 차이점이 뭘까요 ㅠㅠ .

    

    

   우선, @State로 했을 때는 변화의 감지를 HomeView에서도 GalleryView에서도 잘 작동하여, 슬라이더를 변화시켰을 때 Grid의 개수가 바뀝니다.

    

    

   하지만 @Bindable 프로퍼티 래퍼를 사용했을 때에는 GalleryView에서만 슬라이더 변화를 감지 하고, HomeView에서는 변화를 감지하지 못하는 상황이 벌어집니다.

    

    

   @State var vm: AnimalViewModel

   @Bindable var vm: AnimalViewModel

struct GallaryView: View {
    
    @State var vm: AnimalViewModel
    
    var body: some View {
        NavigationStack{
            ScrollView(.vertical, showsIndicators: false){
                VStack(spacing: 30){
                    
                    // 1. Image
                    Image(vm.selectedAnimal)
                        .resizable()
                        .scaledToFill()
                        .frame(width: 250, height: 250)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.accentColor, lineWidth: 5))
                    
                    // 2. Slider
                    Slider(value: $vm.gridColumn, in: 2...4, step: 1)
                        .padding(0)
                        .onChange(of: vm.gridColumn) {
                            withAnimation(Animation.easeInOut(duration: 1.0)){
                                vm.gridSwitch()
                            }
                        }
                    
                    // 3. Grid
                    LazyVGrid(columns: vm.gridLayout, spacing: 20){
                        ForEach(vm.animals){ animal in
                            Image(animal.image)
                                .resizable()
                                .scaledToFill()
                                .frame(width: 80, height: 80)
                                .clipShape(Circle())
                                .overlay(Circle().stroke(Color.white, lineWidth: 1))
                                .onTapGesture {
                                    withAnimation(Animation.spring()){
                                        vm.selectedAnimal = animal.image
                                    }
                                }
                        }
                    }
                    
                }  //:VSTACK
                .padding()
            } //:SCROLL
            .navigationTitle("갤러리")
            .navigationBarTitleDisplayMode(.inline)
        }  //:NAVIGATION
    }
}

    추가로,

@Observable 매크로를 이용한 예시가 잘 정리되어 있는 문서들이 있을까요?? 제가 잘 이해를 못한 건지, 이 부분이 너무 어렵네요.

감사합니다 😀