NavigationStack과 path를 함께 사용하기

iOS 16부터 사용할 수 있게 된 SwiftUI의 NavigationStack!

기존의 NavigationView가 deprecated가 되었기 때문에 이번에는 NavigationStack를 적용하며 알게 된 것들을 정리해보려 한다.

NavigationStack 선언

NavigationStack {
	Text("이곳은 루트뷰 입니다.")
}

루트뷰가 되어야 하는 화면을 NavigationStack으로 감싸면 사용 완료!

그러나 Navigation이니만큼 다른 화면으로 이동하는 코드가 추가로 필요할텐데, 이동하는 방법은 세 종류가 있다.

1. NavigationLink로 이동하는 방법

2. navigationDestination을 사용해 이동시키는 방법

3. path로 화면 이동 경로들을 관리하는 방법

하나씩 적용해보자.

 

1. NavigationLink

        NavigationStack {
            Text("이곳은 루트뷰 입니다.")
            NavigationLink {
                Text("들어왔어요!")
            } label: {
                Text("NavigationLink")
            }
        }

Stack 내부에 원하는 NavigationLink를 추가 하면 된다.

앞에가 NavigationLink를 통해 이동할 뷰의 내용이고 뒤에 label이 NavigationLink가 보이는 부분에 대한 처리.

 

2. navigationDestination

navigation으로 이동해야 하는 화면이 많아지는데, 이동하는 화면은 하나라서 한 번에 관리하고 싶을 때 navigationDestination을 사용해 주었다.

단, NavigationLink에서 사용하는 value와 navigationDestination의 data 타입이 같을 경우에만 이동한다. 

이동할 화면 data 타입이 여러 개인 경우에는 아래처럼 navigationDestination도 여러개 달아주면 된다.

   기억할 것: navigationDestination은 NavigationStack의 내부에 존재해야 한다!   

3.  Path

이 글을 쓰게 된 이유가 바로 NavigationStack의 path를 사용할 일이 생겼기 때문인데....

이번에 navigationstack으로 화면을 쌓아가다가 특정 화면에서 플로우의 가장 첫 부분으로 돌아가야 하는 부분이 있어서 path를 알아보게 됐다.

import SwiftUI


struct NavigationPathTest: View {
    @State private var navigationPath = NavigationPath()

    var body: some View {
        NavigationStack(path: $navigationPath) {
            VStack {
                Text("Home View")
                    .font(.largeTitle)
                Button("Go to Screen 1") {
                    navigationPath.append("Screen1")
                }
                .padding()
            }
            .navigationTitle("Home")
            .navigationDestination(for: String.self) { value in
                switch value {
                case "Screen1":
                    Screen1View(navigationPath: $navigationPath)
                case "Screen2":
                    Screen2View(navigationPath: $navigationPath)
                default:
                    Text("Unknown destination")
                }
            }
        }
    }
}

struct Screen1View: View {
    @Binding var navigationPath: NavigationPath		// 🌟 root의 path를 바인딩

    var body: some View {
        VStack {
            Text("Screen 1")
                .font(.largeTitle)
            Button("Go to Screen 2") {
                navigationPath.append("Screen2")	// 🌟 path에 append
            }
            .padding()
            Button("Go back to Home") {
                navigationPath = .init()			// 🌟 root로 이동
            }
            .padding()
        }
        .navigationTitle("Screen 1")
    }
}

struct Screen2View: View {
    @Binding var navigationPath: NavigationPath

    var body: some View {
        VStack {
            Text("Screen 2")
                .font(.largeTitle)
            Button("Go back to Screen 1") {
                navigationPath.removeLast()
            }
            .padding()
            Button("Go back to Home") {
                navigationPath = .init()
            }
            .padding()
        }
        .navigationTitle("Screen 2")
    }
}

이런 식으로 path를 하위뷰에 넘겨주어 원하는 화면으로 이동하도록 할 수 있었다.

필요한 경우 root뷰로 나갈 수도 있기 때문에 아주 유용할 것 같았다.

앱 전체에서 전반적으로 NavigationStack과 path를 사용하는 경우 Path마다 원하는 화면 이동 경로를 관리하는 방법을 찾으면 라우팅 하는 게 훨씬 수월할 것이다..! (앞으로 해야할 고민...)

 

https://developer.apple.com/documentation/swiftui/navigationstack

NavigationStack | Apple Developer Documentation