NavigationStack, NavigationPath and navigationDestination

Navigation

- Enable people to move between different parts of your app's view hierarchy within a scene 

- 사람들이 앱의 각 view를 쉽게 이동할 수 있도록 가능하게 함 

 

 

NavigationStack

- A View that displays a root view and enables you to present additional views over the root view

- root view를 표시하고, 그 위에 추가적인 뷰를 표시함 

 

- 새로운 view로 네비게이션할 때마다 루트 view 위에 새로운 view가 push 되고, 뒤로 갈 때는 pop되어 이전 뷰로 돌아감 

 

* NavigationStack과 NavigationView의 차이점 

1. NavigationView

- SwiftUI에서 화면 간의 이동을 관리하는 기본적인 도구 

ex) List에서 항목을 선택하면 상세 뷰로 이동 

→ 간단하지만 복잡한 네비게이션 패턴을 처리하고 프로그래밍적으로 네비게이션 흐름을 제어하는 데는 한계가 있음 

 

2. NavigationStack 

- iOS16부터 지원하는 기능

- NavigationPath, navigationDestination 같은 새로운 기능을 통해 더 복잡하고 유연한 네비게이션 경로를 관리할 수 있음 

- 딥 링크와 데이터 기반 네비게이션을 쉽게 구현할 수 있음 

 

→ NavigationStack과 NavigationView는 모두 NavigationLink를 사용하지만, 네비게이션 상태 관리와 제어 수준에서 차이가 있음. NavigationStack은 복잡한 네비게이션 패턴과 프로그래밍적 제어가 필요한 앱에 적합하고, NavigationView는 간단한 리스트-디테일 인터페이스에 적합함.

 

NavigationView가 더 적합한 경우 

• 단순함과 익숙함: 단순한 네비게이션 구조가 필요할 때 
• 소규모 앱: 작은 앱이나 프로토타입에서 사용할 때 
• 표준 UI 패턴: 설정화면 등 일반적인 iOS 패턴에 적합 
• 복잡성 감소: 코드 베이스의 복잡성을 줄이고자 할 때 
• 기존코드 통합: 기존 앱의 NavigationView 구조를 유지하고 싶을 때 

 

Key Features of NavigationStack

1. Programmatic Navigation 

- 프로그래밍적으로 네비게이션을 제어하기 쉽게 만들어줌 

- 루트 뷰로 직접 돌아가거나 딥 링크를 구현할 수 있음 

- NavigationPath property는 네비게이션 경로 타입에 바인딩 되어 있어 네비게이션 상태를 제어할 수 있음 

 

2. Value-based Navigation Links

- navigationDestination 모디파이어를 통해 표시된 데이터 타입과 대상 뷰를 연결 

→ 전통적인 NavigationLink보다 유연하고 동적인 타입 기반 네비게이션을 가능하게 함 

 

3. Customization and Transitions

- iOS 16에서 네비게이션 바 배경 색상 변경 등 더 많은 커스터마이징 옵션을 제공

 

4. Navigation State Management

- 네비게이션 상태를 쉽게 추적하고 관리할 수 있어, 여러 단계의 네비게이션을 가진 복잡한 앱에서 특히 유용함

 

---

NavigationPath

- A type-erased list of data representing the content of a navigationStack 

- type-erased: 데이터의 타입이 숨겨져 있음 → 리스트가 특정 데이터 타입에 제한되지 않고, 다양한 타입을 담을 수 있게 됨 

→ NavigationStack 안에는 여러 화면이 순서대로 쌓여 있는데, 이 화면들을 설명하는 데이터가 어떤 특정한 타입(텍스트, 이미지 등)에 국한되지 않고 여러 종류의 데이터를 담을 수 있다는 뜻 

⇒ NavigationPath는 이 타입을 지운 리스트로 관리되며, 다양한 뷰나 데이터를 포함할 수 있어 유연한 네비게이션 흐름을 구현할 수 있음

- 여러 화면을 순서대로 관리할 수 있도록 도와줌 → 특정 화면으로 돌아가거나, 원하는 화면으로 바로 이동 가능 

---

NavigationLink and navigationDestination

NavigationLink: A view that controls a navigation presentation 

navigationDestination: Associates a destination view with a presented data type for use within a navigation stack 

→ data value를 바탕으로 NavigationLink를 사용하기 위해서는 navigationDestination과 함께 쓰여야 함! 

 

NavigationStack {
    List(items) { item in
        NavigationLink(value: item) {
            Text(item.name)
        }
    }
    // 사용자가 입력한 데이터가 TypeA인 경우 TypeADetailView로 이동 
    .navigationDestination(for: TypeA.self) { item in
        TypeADetailView(item: item)
    }
    .navigationDestination(for: TypeB.self) { item in
        TypeBDetailView(item: item)
    }
}

 

---

 

 

import SwiftUI

struct ContentView: View {
    // NavigationPath: 사용자의 경로를 저장하고, 추적함
    @State private var path = NavigationPath()
    
    var body: some View {
    // NavigationStack: NavigationPath를 바인딩하여 사용자가 이용한 경로 기억 
        NavigationStack(path: $path) {
            VStack {
            // NavigationLink: 사용자가 클릭하면 새로운 화면으로 이동 
                NavigationLink("Go to Detail", value: "DetailView")
            }
            // navigationDestination: 특정 데이터에 따라 다른 화면을 보여줌 
            // -> 'Go to Detail'을 클릭하면 DetailView로 이동 
            .navigationDestination(for: String.self) { value in
                if value == "DetailView" {
                    DetailView()
                }
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the detail view")
    }
}

 

 

 

 

[참고]

DeepLink 

- 사용자가 앱 내의 특정 화면으로 바로 이동할 수 있도록 하는 링크 

ex) 이메일, 메시지, 웹사이트에 있는 링크를 클릭하면 앱이 열리면서 지정된 화면(특정 제품의 상세 페이지 등)으로 이동 

- 앱의 특정 기능이나 콘텐츠로 직접 접근할 수 있도록 함

 

 

---

[참고자료]

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

Navigation | Apple Developer Documentation

 

https://blog.stackademic.com/navigating-the-future-understanding-navigationstack-vs-navigationview-in-swiftui-4fb144132e87

Navigating the Future: Understanding NavigationStack vs NavigationView in SwiftUI

 

https://developer.apple.com/videos/play/wwdc2022/10054

The SwiftUI cookbook for navigation - WWDC22 - Videos - Apple Developer