[SwiftUI] NavigationStack: 새로운 네비게이션 방식의 이해

SwiftUI의 NavigationStack은 iOS 16에서 도입된 새로운 네비게이션 구조로, 기존의 NavigationView를 대체할 수 있습니다. 이번 포스트에서는 NavigationStack의 개념, 동작 원리, 기본 사용법, 그리고 고급 활용 방법까지 살펴보겠습니다.

NavigationStack이란?

NavigationStack은 SwiftUI에서 화면 간 전환을 관리하고, 뷰 계층 구조를 통해 유저가 탐색할 수 있는 길을 제공하는 역할을 합니다. 이전의 NavigationView와 달리 NavigationStack은 더욱 선언적이고 유연한 방식으로 뷰를 탐색할 수 있게 해줍니다.

주요 특징:

• 뷰 간의 스택 방식 탐색
• 경로 기반 네비게이션 관리 (path)
• 데이터 드리븐 탐색 지원

NavigationStack의 동작 원리

NavigationStack은 스택을 사용하여 뷰 계층을 관리합니다. 유저가 화면을 탐색할 때마다 새로운 화면이 스택에 추가되고, 뒤로 가면 스택에서 제거됩니다. 경로(path)라는 상태 변수를 통해 현재 탐색 중인 화면들의 목록을 관리할 수 있습니다.

struct ContentView: View {
    @State private var path: [String] = []

    var body: some View {
        NavigationStack(path: $path) {
            List {
                NavigationLink("첫 번째 화면", value: "첫 번째 화면")
                NavigationLink("두 번째 화면", value: "두 번째 화면")
            }
            .navigationDestination(for: String.self) { value in
                Text("현재 화면: \(value)")
            }
        }
    }

NavigationStack 구성 요소:

• NavigationLink: 화면을 전환하는 링크 역할을 함.
• path: 현재 탐색 중인 경로의 상태 변수.
• navigationDestination: 특정 데이터 타입에 따라 탐색 목적지를 정의.

기본 사용법

NavigationStack은 간단하게 새로운 화면을 스택에 쌓아가며 탐색할 수 있습니다. 가장 기본적인 형태로 두 개의 화면을 전환하는 코드를 살펴보겠습니다.

예시: 기본적인 NavigationStack 사용

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("Detail View", destination: DetailView())
            }
            .navigationTitle("Main View")
        }
    }
}

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

설명:

• NavigationStack은 기본 화면을 나타냅니다.
• NavigationLink는 "Detail View"로 이동하는 버튼 역할을 합니다.
• DetailView는 탐색 후 보여질 새로운 화면입니다.

예시: 경로 기반 탐색

NavigationStack의 강력한 기능 중 하나는 경로를 관리하는 것입니다. 이는 데이터를 기반으로 동적으로 뷰를 탐색할 수 있게 해줍니다.

struct ContentView: View {
    @State private var path: [String] = []

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                Button("Go to First View") {
                    path.append("First View")
                }
                Button("Go to Second View") {
                    path.append("Second View")
                }
            }
            .navigationDestination(for: String.self) { value in
                Text("You are now in \(value)")
                    .navigationTitle(value)
            }
        }
    }

이 예시에서는 버튼을 클릭할 때마다 경로가 업데이트되며, 해당 경로에 맞는 화면이 표시됩니다.

고급자 가이드

커스텀 데이터와 함께 사용하기

NavigationStack은 문자열이나 간단한 데이터 외에도 복잡한 객체를 사용하여 경로를 관리할 수 있습니다.

struct Item: Identifiable, Hashable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    @State private var path: [Item] = []

    var body: some View {
        NavigationStack(path: $path) {
            List {
                NavigationLink("Go to Item 1", value: Item(name: "Item 1"))
                NavigationLink("Go to Item 2", value: Item(name: "Item 2"))
            }
            .navigationDestination(for: Item.self) { item in
                Text("You selected \(item.name)")
                    .navigationTitle(item.name)
            }
        }
    }
}

이 예시에서는 Item이라는 사용자 정의 객체를 사용하여 경로를 관리하며, 각 항목이 탐색되면 해당 객체의 정보를 사용해 화면을 표시합니다.

프로그래매틱 네비게이션

NavigationStack은 path 상태 변수와 함께 프로그램적으로 화면 전환을 처리할 수 있습니다. 사용자의 상호작용 외에도 코드를 통해 경로를 직접 관리할 수 있습니다.

struct ContentView: View {
    @State private var path: [Item] = []

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                Button("Go to Item 1") {
                    path.append(Item(name: "Item 1"))
                }
                Button("Go to Item 2") {
                    path.append(Item(name: "Item 2"))
                }
            }
            .navigationDestination(for: Item.self) { item in
                Text("Selected: \(item.name)")
            }
        }
    }
}

이 코드는 버튼을 클릭함으로써 경로를 업데이트하여 새로운 화면으로 탐색하게 합니다.

결론

SwiftUI의 NavigationStack은 기존 NavigationView보다 더욱 선언적이고 유연한 네비게이션 방식을 제공합니다. 데이터 기반 탐색, 경로 관리, 그리고 프로그래매틱 네비게이션 기능을 통해 복잡한 앱의 화면 전환을 더욱 쉽게 구현할 수 있습니다.