NavigationStack이란?

NavigationStack은 SwiftUI에서 화면 간의 내비게이션(화면 전환)을 관리하는 내비게이션 컨테이너입니다. SwiftUI 4.0부터 도입된 NavigationStack은 기존의 NavigationView를 개선한 버전으로, 더 직관적이고 유연한 내비게이션 흐름을 제공합니다. NavigationStack을 사용하면 화면 간 이동을 쉽게 구현하고, 스택 구조로 여러 화면을 쌓아가며 이동할 수 있습니다.

기본 개념

NavigationStack은 내비게이션 스택(navigation stack)을 관리합니다. 이 스택은 LIFO(Last In, First Out) 방식으로 작동하며, 새로운 화면이 추가되면 이전 화면 위에 쌓이고, 뒤로 이동하면 스택에서 제거됩니다.

기본 사용법

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink("Go to Detail View") {
                    DetailView()
                }
                .navigationTitle("Home")
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the Detail View")
            .navigationTitle("Detail")
    }
}

주요 구성 요소

1. NavigationStack: 전체 내비게이션 흐름을 관리하는 컨테이너. 이 안에 NavigationLink를 사용하여 화면 간의 전환을 구현합니다.
2. NavigationLink: 사용자가 클릭하거나 터치하면 다른 화면으로 이동하는 링크입니다. 링크를 클릭하면 스택에 새로운 화면이 쌓입니다.
3. navigationTitle: 현재 화면의 탑바 제목을 설정합니다.

동작 방식

1. NavigationStack은 스택을 관리하며, 화면이 추가될 때마다 스택에 쌓입니다.
2. NavigationLink를 클릭하면 새로운 화면이 스택에 추가됩니다.
3. 뒤로 이동할 때는 스택에서 화면을 제거하여 이전 화면으로 돌아갑니다.

상태 기반 내비게이션

NavigationStack은 상태 기반으로 내비게이션을 제어할 수 있습니다. @State나 @Binding을 사용하여, 상태 변화를 통해 특정 화면으로 이동할 수 있습니다.

상태 기반 내비게이션 예시

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                Button("Go to Detail View") {
                    path.append("Detail")
                }
                Button("Go to Profile View") {
                    path.append("Profile")
                }
            }
            .navigationDestination(for: String.self) { value in
                if value == "Detail" {
                    DetailView()
                } else if value == "Profile" {
                    ProfileView()
                }
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the Detail View")
            .navigationTitle("Detail")
    }
}

struct ProfileView: View {
    var body: some View {
        Text("This is the Profile View")
            .navigationTitle("Profile")
    }
}

주요 구성 요소 설명

1. NavigationPath: @State나 @Binding으로 선언하여, 내비게이션 스택의 경로를 관리할 수 있습니다. 이 경로는 여러 유형의 데이터를 가질 수 있으며, 화면 전환을 쉽게 제어할 수 있습니다.
2. navigationDestination: 스택에 쌓일 수 있는 여러 목적지 뷰를 정의합니다. 이 예시에서는 String 타입을 기반으로 목적지를 정의했지만, 다른 데이터 타입을 사용할 수도 있습니다.

경로 기반 내비게이션

위 코드에서 path.append("Detail")와 같이 경로에 데이터를 추가하면, navigationDestination에 정의된 화면으로 이동합니다. 경로는 스택 구조로 쌓이기 때문에, 경로에 값을 계속 추가하면서 여러 화면으로 전환할 수 있습니다.

여러 화면을 스택에 쌓기

NavigationPath를 사용하면 다양한 화면을 연속적으로 스택에 쌓을 수 있습니다.

path.append("Detail")
path.append("Profile")

위 코드처럼 경로를 추가하면 DetailView로 이동한 뒤 다시 ProfileView로 이동하는 식으로 화면이 쌓이게 됩니다.

스택 초기화 (뒤로 이동)

스택에서 뒤로 이동하거나 스택을 초기화하고 싶다면, NavigationPath를 빈 값으로 설정하면 됩니다.

path.removeLast() // 하나의 화면을 스택에서 제거
path.removeLast(path.count) // 스택을 초기화

이렇게 하면 스택에 쌓인 화면들이 제거되고, 다시 초기 상태로 돌아갑니다.

NavigationLink를 통한 화면 전환

NavigationLink는 탭 가능한 요소로, 이를 클릭하면 지정된 화면으로 이동할 수 있습니다. 아래는 기본적인 사용 예시입니다.

NavigationLink("Go to Detail View", destination: DetailView())

• 첫 번째 인자로 탭할 수 있는 텍스트나 뷰를 지정합니다.
• destination에는 이동할 화면을 지정합니다. 이 링크를 탭하면 DetailView로 이동합니다.

여러 목적지 정의

NavigationStack에서는 다양한 목적지를 관리할 수 있으며, 데이터 타입에 따라 화면을 조건부로 처리할 수 있습니다.

.navigationDestination(for: String.self) { value in
    if value == "Detail" {
        DetailView()
    } else if value == "Profile" {
        ProfileView()
    }
}

• for: String.self는 String 타입 데이터를 경로로 처리한다는 의미입니다.
• 경로에 따라 각기 다른 화면으로 이동할 수 있습니다.

NavigationStack과 기존 NavigationView의 차이점

1. 상태 기반 내비게이션: NavigationStack은 경로 기반 내비게이션을 지원하여, 상태를 기반으로 더 쉽게 화면 전환을 제어할 수 있습니다. NavigationView는 주로 NavigationLink를 사용해 화면을 이동했지만, NavigationStack은 경로를 통해 더 유연하게 관리할 수 있습니다.
2. 다중 경로 관리: NavigationStack은 여러 화면의 경로를 스택으로 관리할 수 있습니다. NavigationPath를 사용하여, 경로를 명시적으로 추가하고 삭제하면서 내비게이션 스택을 제어할 수 있습니다.
3. 더 강력한 내비게이션 흐름: NavigationStack은 더 나은 내비게이션 흐름을 제공하며, 화면 간의 상태를 더 쉽게 관리하고, 여러 경로를 처리하는데 적합한 구조를 제공합니다.

요약

• NavigationStack은 SwiftUI에서 내비게이션 흐름을 관리하는 컨테이너로, 스택 구조로 화면 전환을 관리합니다.
• NavigationLink를 사용하여 다른 화면으로 이동할 수 있으며, @State와 NavigationPath를 활용해 상태 기반으로 화면 전환을 제어할 수 있습니다.
• 경로 기반 내비게이션을 지원하여, 복잡한 내비게이션 흐름을 더 쉽게 관리할 수 있고, 다중 경로를 처리하는데 적합합니다.
• 기존의 NavigationView보다 더 강력한 기능을 제공하며, 상태 관리 및 경로 기반의 내비게이션을 지원하는 최신 방식입니다.

NavigationStack을 사용하면 SwiftUI에서 복잡한 화면 전환을 쉽게 구현할 수 있습니다.