SwiftUI - Navigation

목차

NavigationView

• WWDC22 → Deprecated 됨
• `NavigationStack`, `NavigationSplitView`로 대체 (데이터 기반에 가까운 Navigation API제공)
• 기존 View를 `NavigationView`로 감싸 `NavigationLink`로 다음 View로 이동하게 함
• 기본적인 패턴: Root View에 Navigation link들이 있음 → 하나를 누르면 이 Link는 Stack에 View를 Push
  • 기존 Navigation API에서는 link를 programmatically 보여주기 위하여 Link에 Binding을 추가

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

• 이 코드는 각 link가 각각의 binding을 필요
• Navigation Bar 설정 하려면 view extension인 `.navigationBarTitle`이나 `.toolbar`등을 사용

NavigationStack

• 신규: `NavigationStack`이라는 전체 container로 모든것을 binding 할 수 있게 함
• Path가 Stack에 Push된 모든 value들을 나타내는 collection
• Path를 변환하여 deep link를 만들 수 도 있고, path 의 모든 아이템을 remove하여 root view로 pop도 가능

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

 

• 모든 `NavigationStack`은 stack 이 보여주는 모든 데이터를 나타내는 path 를 계속 추적
• Stack은 항상 제거되지 않은 가장 최근에 추가된 View를 표시하며, RootView는 제거할 수 없음

NavigationSplitView

• 다중 열 화면 생성 가능 → 각 열의 너비와 사이드 바와 같은 세부 조정 가능
• 아이패드, 맥의 메일, 노트와 같은 multicolumn 앱에 최적화

NavigationLink

• 기존 NavigationLink가 항상 TItle과 나타낼 view를 포함했다면, 신규 `NavigationLink`에서는 여전히 Title은 포함하지만, 보여질 view를 포함하는 것이 아닌 그 링크를 보여줄 value를 포함 (value-presenting)
• 신규 → Link의 행동은 이것이 속해져 있는 / 나타나는 `NavigationStack`이나 list에 종속됨
• Programmatic Navigation
  • `NavigationLink`를 두 파트로 나눠야함 - 보여져야 하는 value, value와 함께 가는 view
  • value 타입을 설정하여 해당 NavigationLink 이벤트가 발생할 때 데이터를 전달
  • `.navigationDestination(for: )` modifier → 보여줘야하는 책임이 있는 data의 타입을 선언
    • 해당 data 타입의 value가 present될때 stack에 어떤 view를 push 할지 설명하는 view builder를 가짐

Navigation State 유지 (persist)

• navigation state를 유지하기 위해서는, `Codable`과 `SceneStorage` 사용
• 단계
  • Navigation Model 타입으로 navigation state를 encapsulate
    • navigation state를 unit으로 save하고 restore하여 consistent하게 함
  • Navigation Model을 Codable하게 함
  • `SceneStorage`를 사용하여 navigation model을 save하고 restore 함

NavigationPath

• `NavigationStack`의 내용을 나타내는 데이터 타입이 지워진 목록
• 데이터 컬렉션에 대한 바인딩을 통해 스택을 초기화해 NavigationStack의 상태를 관리
• 스택이 한 종류의 데이터에만 의존하는 뷰를 나타내면 배열과 같은 표준 컬렉션 사용, 다른 타입의 데이터를 나타내야 하는 경우 `NavigationPath`를 사용
• 데이터 요소를 추가 및 계산, 제거 등을 위한 일반적인 컬렉션 제어 기능 제공
• 네이게이션 스택에 표시되는 값이 `Codable` 프로토콜과 준수하면 path의 Codable Property를 사용해 serialization가능 → 스택의 내용을 저장 및 복원

Reference

The SwiftUI cookbook for navigation - WWDC22 - Videos - Apple Developer

 

NavigationPath | Apple Developer Documentation

 

NavigationStack | Apple Developer Documentation