기존의 API

• 다른 column 또는 스택에 표시되는 뷰들을 보내는 링크를 기반으로 함

  → rootView에 Navigation Link들이 있을 때, 링크 중 하나를 탭하면 해당 뷰를 stack에서 push 하고, rootView로 pop 하여 돌아감

  → 이때 링크에 바인딩을 하여 링크 표시 (프로그래밍 방식)

  🔥 문제: 각 링크별로 별도의 바인딩이 필요함

  NavigationLink(
  		"Datails",
  		isActive: $item.showDetail
  ) { DetailView() }
  

New API

NavigationStack

NavigationStack(path: $path) {
		NavigationLink("Details, value: value")
}

→ path : 스택에 푸쉬된 모든 값을 나타내는 Collection 타입

→ NavigationLink : 경로에 값을 추가함

@MainActor
struct NavigationStack<Data, Root> where Root : View

NavigationStack {
    List(parks) { park in
        NavigationLink(park.name, value: park)
    }
    .navigationDestination(for: Park.self) { park in
        ParkDetails(park: park)
    }
}

→ List 가 rootView 역할을 하며, ParkDetails 뷰가 스택에 추가되는 식의 흐름

→ 스택이 비어있으면 pop이 비활성화됨

@State private var presentedParks: [Park] = []

NavigationStack(path: $presentedParks) {
    List(parks) { park in
        NavigationLink(park.name, value: park)
    }
    .navigationDestination(for: Park.self) { park in
        ParkDetails(park: park)
    }
}

→ 기본적으로 NavigationStack은 스택의 뷰를 추적하기 위해 state를 관리하지만, 별도의 코드로 사용자가 만든 데이터 값 컬렉션에 대한 바인딩으로 스택을 초기화하여 상태 제어를 공유할 수 있음

• 가장 최신의 뷰를 보여주며, rootView를 삭제할 수 없음
• 기본 스택부터 다중 column 프레젠테이션까지 가능
• 딥링크를 지원
• 데이터 기반 프로그래밍 방식의 Navigation

NavigationSplitView

struct NavigationSplitView<Sidebar, Content, Detail> where Sidebar : View, Content : View, Detail : View

• 다중 열 앱에 적합