NavigationView: 기초, SwiftUI 앱의 네비게이션 스택

NavigationView란?

NavigationView는 화면 계층 구조를 감싸고 네비게이션 인터페이스를 제공하는 SwiftUI 컨테이너입니다. NavigationView 내부에서는 NavigationLink가 작동합니다 — 누르면 현재 화면이 새 화면으로 교체되는 요소입니다. NavigationView는 자동으로 제목과 «뒤로» 버튼이 있는 네비게이션 바를 추가합니다.

NavigationView는 SwiftUI와 함께 iOS 13에서 등장했습니다. 개념적으로 UIKit의 UINavigationController를 대체하지만 선언적으로 구현됩니다. 수동 push/pop 대신 개발자가 NavigationLink를 통해 화면 간의 관계를 설명합니다. 시스템이 자동으로 스택을 관리합니다.

NavigationView는 .navigationTitle, .navigationBarTitleDisplayMode, .toolbar 및 .searchable 모디파이어를 지원합니다. iOS 16+의 경우 Apple은 NavigationView API를 유지하면서 NavigationPath를 통한 프로그래매틱 스택 관리를 추가하는 NavigationStack을 도입했습니다. iOS 15 이하를 지원하는 프로젝트의 경우 NavigationView가 유일한 옵션입니다.

NavigationLink와 화면 전환

NavigationLink는 NavigationView 또는 NavigationStack 내에서 대상 화면으로의 전환을 생성하는 SwiftUI 요소입니다. NavigationLink를 누르면 시스템이 대상 화면을 네비게이션 스택에 추가합니다. 전환 애니메이션은 iOS의 표준 오른쪽에서 푸시이며, 플랫폼에 맞게 조정됩니다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.title)
                }
            }
            .navigationTitle("목록")
        }
    }
}

struct DetailView: View {
    let item: Item

    var body: some View {
        VStack {
            Text(item.description)
                .navigationTitle(item.title)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

NavigationLink는 두 개의 매개변수를 받습니다: destination — 대상 View, label — 사용자가 누르는 요소입니다. 목록의 경우 value와 NavigationLink(value:)를 사용한 구문이 편리합니다 — 셀을 자동으로 선택 해제하고 NavigationPath와 함께 작동합니다.

NavigationStack vs NavigationView: API 비교

iOS 16에서 Apple은 NavigationView의 대체품으로 NavigationStack을 발표했습니다. NavigationStack은 선언적 구문을 유지하지만 매우 중요한 기능을 추가합니다 — NavigationPath 유형 또는 Hashable 배열의 path 속성을 통한 프로그래매틱 스택 관리입니다.

최소 버전이 iOS 16+인 프로젝트의 경우 NavigationStack을 사용하세요. iOS 14-15 지원의 경우 — NavigationView. NavigationStack에는 이전 버전에 대한 직접적인 유사 기능이 없으므로 업그레이드하려면 호환성 확인이 필요합니다.

Toolbar 및 navigationTitle 설정

.toolbar와 .navigationTitle 모디파이어가 네비게이션 바의 내용을 제어합니다. .navigationTitle은 화면 제목을 설정하고, .navigationBarTitleDisplayMode는 스타일을 선택합니다: .large (크게, 기본값) 또는 .inline (작게, 설정 앱처럼). .toolbar는 버튼, 검색 및 세그먼트 컨트롤을 추가합니다.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("프로필") {
                    Text("사용자 이름")
                    Toggle("알림", isOn: $notifications)
                }
            }
            .navigationTitle("설정")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("저장") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable은 네비게이션 바에 검색 바를 통합하는 또 다른 모디파이어입니다. NavigationView와 NavigationStack 모두에서 작동합니다. 스크롤 시 검색이 자동으로 숨겨지고 아래로 스와이프하면 나타납니다. Binding String을 통한 목록 필터링을 지원합니다.

NavigationPath를 이용한 프로그래매틱 네비게이션

NavigationPath는 네비게이션 스택을 Hashable 값의 컬렉션으로 표현하는 iOS 16+ 유형입니다. 개발자는 프로그래매틱 전환을 위해 path에 요소를 추가하고, 돌아가기 위해 제거합니다. NavigationPath는 딥 링크, 푸시 알림 및 상태 복원을 지원합니다.

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

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("카테고리 \(category.name)",
                               value: category)
            }
            .navigationTitle("카테고리")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // 딥 링크를 통한 프로그래매틱 전환
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:)는 화면을 표시할 데이터 유형을 등록합니다. 이 유형의 값이 path에 추가되면 시스템이 자동으로 대상 View를 생성합니다. 이 접근 방식은 명시적인 NavigationLink(destination:)를 대체하고 네비게이션을 엄격하게 타입 지정합니다.

iPad, watchOS 및 tvOS에서의 NavigationView

NavigationView와 NavigationStack은 모든 Apple 플랫폼에서 작동합니다: iOS, iPadOS, watchOS, tvOS 및 macOS. 동작은 화면에 맞게 조정됩니다. iPad에서 NavigationStack은 NavigationSplitView를 지원하며, 이는 UIKit의 UISplitViewController를 대체하고 넓은 화면에 두 개의 열을 표시합니다.

NavigationSplitView (iOS 16+)는 화면을 사이드바 (목록)와 세부 정보로 분할합니다. iPhone에서는 사이드바가 숨겨지고 NavigationLink를 통해 세부 정보만 표시됩니다. iPad에서는 사이드바와 세부 정보가 분할 모드에서 동시에 표시됩니다.

struct AdaptiveNavigation: View {
    @State private var selectedCategory: Category?

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("카테고리")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

NavigationSplitView는 각 기기에 최적의 표시 모드를 자동으로 선택합니다. 세로 모드 iPhone에서는 스택, 가로 모드 iPad와 iPhone에서는 분할입니다. 개발자는 다양한 사이즈 클래스에 대해 별도의 코드를 작성할 필요가 없습니다.