SwiftUI NavigationStack 사용 방법 정리 (iOS 16+)

SwiftUI NavigationStack 사용 방법 정리 (iOS 16+)

SwiftUI에서 화면 이동을 구현할 때 예전에는 NavigationView를 많이 사용했다. 하지만 iOS 16부터는 NavigationView 대신 NavigationStack 사용이 권장된다.

NavigationStack은 기존 방식보다 더 명확한 네비게이션 상태 관리가 가능하며, 특히 여러 화면을 스택 구조로 관리할 때 훨씬 편리하다.

이 글에서는 SwiftUI NavigationStack의 기본 사용 방법과 실제 프로젝트에서 활용하는 방식까지 정리한다.

NavigationStack이란?

NavigationStack은 SwiftUI에서 화면 이동을 관리하는 컨테이너다.

이름 그대로 화면을 스택 형태로 관리하며, Push / Pop 방식의 네비게이션을 구현할 수 있다.

• Push navigation
• Pop navigation
• Stack 상태 관리
• 타입 기반 navigation

iOS 16 이후 SwiftUI 프로젝트에서는 NavigationStack 사용이 기본 방식이다.

NavigationStack 기본 사용 방법

가장 기본적인 NavigationStack 구조는 다음과 같다.

import SwiftUI

struct ContentView: View {

    var body: some View {
        NavigationStack {
            VStack {
                Text("Home View")
            }
            .navigationTitle("Home")
        }
    }
}

NavigationStack 내부에 표시할 View를 배치하고 navigationTitle을 설정할 수 있다.

NavigationLink로 화면 이동하기

NavigationStack에서 가장 기본적인 화면 이동 방식은 NavigationLink를 사용하는 것이다.

NavigationStack {
    NavigationLink("Detail 화면 이동") {
        DetailView()
    }
}

버튼을 누르면 DetailView로 Push 이동한다.

DetailView 예시

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

NavigationStack + List 예제

실제 앱에서는 List와 함께 사용하는 경우가 많다.

struct ContentView: View {

    let items = ["Apple", "Banana", "Orange"]

    var body: some View {

        NavigationStack {
            List(items, id: \.self) { item in
                NavigationLink(item) {
                    Text("\(item) Detail")
                }
            }
            .navigationTitle("Fruit List")
        }
    }
}

List 아이템을 클릭하면 해당 상세 화면으로 이동한다.

navigationDestination 사용하기

NavigationStack에서는 navigationDestination을 사용해 타입 기반 네비게이션을 구현할 수 있다.

struct ContentView: View {

    var body: some View {

        NavigationStack {

            NavigationLink(value: "detail") {
                Text("Go Detail")
            }

        }
        .navigationDestination(for: String.self) { value in
            Text("Detail Screen")
        }
    }
}

이 방식은 데이터 기반 네비게이션을 구현할 때 매우 유용하다.

NavigationPath 사용하기

NavigationPath를 사용하면 네비게이션 스택을 직접 관리할 수 있다.

struct ContentView: View {

    @State private var path = NavigationPath()

    var body: some View {

        NavigationStack(path: $path) {

            Button("Push View") {
                path.append("detail")
            }

        }
        .navigationDestination(for: String.self) { value in
            Text("Detail Screen")
        }
    }
}

이 방식은 복잡한 화면 흐름을 관리할 때 사용된다.

NavigationStack과 NavigationView 차이

• NavigationStack → iOS 16 이상
• NavigationView → 이전 방식

NavigationStack은 타입 기반 네비게이션과 NavigationPath를 통한 상태 관리 기능이 추가되었다.

실제 프로젝트에서 사용하는 패턴

실제 프로젝트에서는 NavigationStack을 다음과 같이 사용한다.

• List → Detail 화면 이동
• 검색 결과 → 상세 페이지 이동
• 설정 화면 이동
• 여러 단계 화면 흐름 관리

특히 상태 기반 네비게이션을 구현할 때 NavigationStack이 매우 유용하다.

마무리

SwiftUI NavigationStack은 iOS 16 이후 SwiftUI 앱에서 화면 이동을 구현하는 기본 방식이다.

NavigationLink, navigationDestination, NavigationPath를 활용하면 복잡한 네비게이션 구조도 깔끔하게 관리할 수 있다.

정리

• NavigationStack은 iOS 16 이후 기본 네비게이션 방식
• NavigationLink로 간단한 화면 이동 가능
• navigationDestination으로 타입 기반 네비게이션 구현
• NavigationPath로 네비게이션 상태 관리 가능

SwiftUI 관련 글

• SwiftUI NavigationStack 사용 방법 정리 (iOS 16+)
• SwiftUI List Separator 제거 방법 (iOS)
• SwiftUI Toggle 사이즈 조절 방법 (iOS)
• SwiftUI NavigationTitle 왼쪽 정렬 구현 방법 (iOS)
• SwiftUI TabView 커스텀 탭바 만들기 (iOS)