[WWDC22] NavigationStack, NavigationSplitView

안녕하세요.

 

이번엔 WWDC22의 'The SwiftUI cookbook for navigation'를 보고 iOS 16부터 새롭게 추가된 NavigationStack과 NavigationSplitView에 대해 공부할게요.

 

---

# NavigationStack

기존 NavigationView에서 코드로 화면을 전환시키려면 아래처럼 NavigationLink 마다 별도의 binding을 해줘야 했습니다.

 

 

iOS 16부터 추가된 NavigationStack, NavigationLink의 new API, 그리고 new 수식어인 navigationDestination를 사용하면 쉽게 구현이 가능합니다.

 

@State 프로퍼티인 path 정보를 수정함으로써 deep linking도 가능합니다.

 

# NavigationSplitView

[참고] WWDC20 영상에서 소개한 예시코드가 잘 되어 있어서 그거 그대로 사용할게요!
https://developer.apple.com/videos/play/wwdc2022/10054/

 

multi-column 화면 만들 때는 NavigationSplitView를 사용합니다.

 

[참고] List의 selection binding을 사용해서 Multi-column 일 때도 programmatic 하게 화면 전환시켜 줄 수 있습니다.

[참고] iPhone, Apple TV, Apple Watch 환경에선 자동으로 single-column stack view로 바뀝니다!

 

그리고 NavigationSplitView 안에서 NavigationStack도 사용할 수 있습니다.

 

[주의] navigationDestination은 lazy container 안에서 사용하지 마세요.

List, Table, LavyGrid 같은 것들이 lazy container에 해당합니다.

만약 위 코드처럼 lazy container 안에서 navigationDestination 수식어를 사용하면 아래와 같은 문제가 발생합니다.

1) lazy container는 모든 view를 즉시에 load하지 않기 때문에, navigationDestination도 load 되지 않는 상황이 발생하고 NavigationStack이 navigationDestination을 볼 수 없는 상황이 발생합니다.
2) 모든 element에 대해서 navigationDestination이 반복 호출되게 됩니다.

 

# 참고

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