SwiftUI Navigation View To Root - 네비게이션 뷰 관리하기

뷰를 만들다 보면 뷰 1에서 뷰 2로 이동하고, 뷰 2에서 뷰 3으로 이동하는 등 그 깊이와 복잡도가 올라갈 수밖에 없다. 이번에는 swiftUI에서 1->2->3->4 뷰로 이동했다고 가정할 때, 다시 뷰 1(root view)로 돌아오는 방법에 대해 알아보자.

실행 화면

기본적으로 다음과 같이 NavigationView와 NavigationLink를 활용해 뷰를 이동하게 된다.

struct View1: View {
    @State var gotoView2 = false
    
    var body: some View {
        NavigationView {
            Button("Goto View 2") {
                gotoView2 = true
            }
            .navigationTitle("View 1")
            .background(
                NavigationLink(
                    destination: View2View(gotoView1: $gotoView2),
                    isActive: $gotoView2,
                    label: {EmptyView()}
                )
                .isDetailLink(false)
            )
        }
    }
}

Goto View2 버튼을 누르면 두번째 뷰로 이동하는데, 이때 주의할 점은 navigationLink를 직접 누르는 것이 아니라 gotoView2를 true로 바꾸어 줌으로써 NavigationLink(isActive: ) 내에 인자 값이 true로 바뀌어 두 번째로 뷰로 이동한다는 것에 주목하자. 이 특성을 활용해 다시 View1으로 돌아올 것이다.

struct View1: View {
    @State var gotoView2 = false
    
    var body: some View {
        NavigationView {
            Button("Goto View 2") {
                gotoView2 = true
            }
            .navigationTitle("View 1")
            .background(
                NavigationLink(
                    destination: View2View(gotoView1: $gotoView2),
                    isActive: $gotoView2,
                    label: {EmptyView()}
                )
                .isDetailLink(false)
            )
        }
    }
}

struct View2View: View {
    @State var gotoView3 = false
    @Binding var gotoView1: Bool
    
    var body: some View {
        Button("Goto View 3") {
            gotoView3 = true
        }
        .navigationTitle("View 2")
        .background(
            NavigationLink(
                destination: View3View(
                    gotoView1: $gotoView1
                ),
                isActive: $gotoView3,
                label: {EmptyView()}
            )
            .isDetailLink(false)
        )
    }
}

struct View3View: View {
    @State var gotoView4 = false
    @Binding var gotoView1: Bool
    
    var body: some View {
        Button("Goto View 4") {
            gotoView4 = true
        }
        .navigationTitle("View 3")
        .background(
            NavigationLink(
                destination: View4View(
                    gotoView1: $gotoView1
                ),
                isActive: $gotoView4,
                label: {EmptyView()}
            )
            .isDetailLink(false)
        )
    }
}

struct View4View: View {
    @Binding var gotoView1: Bool
    
    var body: some View {
        Button("Go Back to View 1") {
            gotoView1 = false
        }
        .navigationTitle("View 4")
    }
}

마찬가지로 다음 여러 뷰들도 위와 같이 작성을 해준다.

View4를 보게되면 gotoView1 변수를 false로 바꾸어준다. 해당 값은 view1에 @State로 선언된 gotoView2를 바인딩한 변수이기 때문에, 해당 값을 바꾸게 되면 View4 -> View3 -> View2 -> View1 순으로 전파된다. 이 같은 특성으로 인해 View2의 active 상태를 관리하는 변수(gotoView2)가 변경되었으므로, View2 이후에 모든 뷰는 dismiss 되어 View1만 남게 된다.