NavigationLink

안녕하세요. 그린입니다🟢

이번 포스팅에서는 SwiftUI에서 NavigationLink를 학습해보겠습니다💁🏻

 

NavigationLink?

이하 네비게이션 링크라 칭하겠습니다!

네비게이션 링크는 간단합니다. UIKit 환경에서도 뷰간 전환되는 방식이 있죠?

SwiftUI에서는 네비게이션 링크를 통해 뷰 전환을 할 수 있습니다.

 

NavigationLink 선언

struct NavigationLink<Label, Destination> where Label : View, Destination : View

네비게이션 링크는 위와 같이 라벨과 목적지를 가지고 선언할 수 있습니다.

여기서 라벨은 예를들어 라벨을 눌러주었을때 Destination의 뷰로 전환되는걸 말합니다.

간단하죠?

 

그럼 한번 예시를 보겠습니다.

예시는 애플 공식 문서를 참고하겠습니다🤫

 

NavigationLink 간단 선언 및 사용

// 1
NavigationLink(destination: FolderList(id: workFolder.id)) {
    Label("Work Folder", systemImage: "folder")
}
// 2
NavigationLink("Work Folder", destination: FolderList(id: workFolder.id))

자 이렇게 1번과 2번처럼 간단하게 네비게이션 링크의 라벨과 목적지를 설정해줄 수 있습니다.

이럴경우 "Work Folder"라는 라벨 이미지를 클릭하면 FolderList 뷰에 해당하는 id값을 전달하고 이동합니다.

이것만으로 감이 안오실것 같아 좀더 세부적인 예시를 들어보겠습니다.

 

NavigationLink를 통한 실사용

이번에는 NavigationView를 생성하고 그 안에 리스트들을 구성해 해당 리스트를 통해 새로운 뷰로 전환하는 예시를 봐보겠습니다.

import SwiftUI

struct ContentView: View {
  var body: some View {
    NavigationView {
      List {
        NavigationLink("Green", destination: ColorDetail(color: .green))
        NavigationLink("Yellow", destination: ColorDetail(color: .yellow))
        NavigationLink("Red", destination: ColorDetail(color: .red))
      }
      .navigationTitle("Colors")
    }
  }
}

struct ColorDetail: View {
  var color: Color
  var body: some View {
    color
      .frame(width: 200, height: 200)
        .navigationTitle(color.description.capitalized)
  }
}

자 이럴 경우는 해당 리스트에 있는 항목을 클릭 시 색상 정보를 ColorDetail 뷰로 넘겨주며 해당 뷰로 전환됩니다.

그리고 해당 리스트에 네비게이션바 타이틀도 넣어줄 수 있습니다.

이렇게 말이죠!

되게 간단히 SwiftUI에서 화면전환을 시킬 수 있겠죠?

그런데 SwiftUI에서는 네비게이션 링크를 통해 바인딩된 값을 변경 해줄 수도 있습니다.

NavigationLink(
  "GREEN",
  destination: ColorDetail(color: .green),
  isActive: $shouldShowGreen)
)

요런식으로 isActive를 통해 해당 값의 수정을 해줄 수 있습니다.

 

NavigationLink의 문제점

SwiftUI에서 아직 네비게이션 링크의 풀리지 않는 문제가 있습니다.

현업에서 사용하다보니 근원적으로 어떤 문제인지 파악이 되지 않으나 간헐적으로 네비게이션 링크를 통해 뷰 전환이 되어도 바로 해당 뷰를 빠져나오게 되더라구요😭

그래서 아래와 같은 많은 간증들과 사례를 찾아봤어요.

https://developer.apple.com/forums/thread/677333

SwiftUI NavigationLink pops out by… | Apple Developer Forums

아직 애플에서 SwiftUI에 공을 많이 안들이고 있는건지 해결이 되지 않고 있습니다.

그래서 사람들은 우회적으로 NavigationLink를 사용할때 뷰가 튕겨 나오는 문제 해결을 위해

우회적으로 EmptyView를 넣어주어 해당 빈 뷰가 튕겨나오고 기존 이동된 뷰는 그대로 남아있게 문제를 해결하고 있습니다.

저또한 해당 방법으로 문제점이 발생하면 수정해주고 있습니다.

(애플아... 제발 신제품보다도 이걸 먼저 고쳐줘🙏🏻)

 

아무튼 이렇게 간단하게 SwiftUI에서 NavigationLink를 사용하는 방법에 대해 알아보았습니다.

문제는 있지만..?! 그래도 필수적인 부분이니 알아두면 좋습니다👍

 

[참고자료]

https://developer.apple.com/documentation/swiftui/navigationlink

Apple Developer Documentation