SwiftUI - Observable 여러 뷰에서 데이터 업데이트 안됨

Observable를 사용하면 여러 뷰에서 데이터를 서로 교환할 수 있습니다

 

데이터를 교환하기 위해서 Observable 메크로를 사용할 수 있습니다. 하지만 메크로를 사용하면서 여러 뷰에서 데이터의 값을 바꿀 때 어떤 뷰에서는 값이 바뀌지만 원하는 동작을 수행하지 않는 상황이 있을 수 있으며 예시와 함께 설명하겠습니다.

 

 

아래 코드를 사용하여 topTabBarExist 의 값의 여부에 따라서 TabBar를 투명하게 만들지 불투명하게 만들지를 결정할 수 있게 만들었습니다.

@Observable
class ViewState {
    var stack = NavigationPath()
    var topTabBarExist = true
}

 

        @Bindable var bindableViewState = viewState
        TopTabBar(content: {
            Text("First View")
            NavigationStack(path: $bindableViewState.stack) {
                IncomeExpenceView()
            }
            Text("Second View")
        }, text: textComponent, underline: underline, visible: $bindableViewState.topTabBarExist)

 

하지만 PhotosPicker에서 사진을 선택했을 때 원하는 뷰로 Navigate 하는 방법을 채택하여 해당 뷰로 넘어가면 상단 TabBar가 보이지 않게 만들려고 하였습니다. 하지만 Environment를 사용하여 topTabBarExist가 false 로 바뀌었음에도 불구하고 상단에 TabBar는 사라지지 않았습니다.

 

해결방법

NavigationStack을 통해서 뷰간 데이터를 공유할 때 Environment 를 사용하는 것은 방법이 아닐 수 있습니다.

이런 상황에서는 Environemnt 대신 해당 데이터를 @State 와 @Binding 으로 직접적으로 뷰에 바인딩하여 데이터를 업데이트하는 방법으로 해결할 수도 있습니다.

@Bindable var bindableGPT = gpt

.navigationDestination(item: $bindableGPT.selectedImage, destination: { _ in
    AnalyzingPhotoView(selectedImage: $bindableGPT.selectedImage, topTabBarExist: $bindableViewState.topTabBarExist)
})

 

또 다른 해결방법으로는 위와 거의 비슷한데 이전 뷰의 Observable Macro 클래스를 이동할 뷰와 바인딩하는 방법 입니다.

@Bindable var bindableGPT: AnalyzingGPT

.navigationDestination(item: $bindableGPT.selectedImage, destination: { _ in
    AnalyzingPhotoView(bindableGPT: gpt, selectedImage: $bindableGPT.selectedImage, topTabBarExist: $bindableViewState.topTabBarExist)
})