NavigationLink란, SwiftUI 전환 버튼

SwiftUI에서 NavigationLink란?

NavigationLink는 누르면 네비게이션 전환을 시작하는 View입니다. NavigationStack 내에서 NavigationLink를 누르면 대상 화면이 스택에 배치되고 시스템 뒤로 가기 버튼이 표시됩니다. NavigationLink는 iOS 13부터 존재하며 SwiftUI에서 사용자 네비게이션의 기본 방법입니다.

NavigationLink는 UIButton에서 상속받지 않습니다 — 컨텍스트에 자동으로 적응하는 SwiftUI View입니다. List 내에서 NavigationLink는 공개 표시기와 함께 표시됩니다. 목록 외부에서는 NavigationLink가 일반 버튼처럼 동작하지만 네비게이션 동작을 제공합니다.

SwiftUI Lab (2024)에 따르면 NavigationLink는 Text, Image, VStack 다음으로 SwiftUI 애플리케이션에서 가장 많이 사용되는 View 중 하나입니다. 초기화 형태 간의 차이를 이해하는 것은 성능과 예측 가능한 네비게이션 동작에 매우 중요합니다.

NavigationLink 내부 작동 방식

누르면 NavigationLink가 가장 가까운 NavigationStack 또는 NavigationView와 연결된 네비게이션 스택에 값(또는 destination)을 추가합니다. SwiftUI는 EnvironmentValue를 사용하여 View 계층 전체에 네비게이션 경로를 전달합니다. NavigationLink는 Environment에서 이 경로를 읽고 누르면 수정합니다.

NavigationLink 초기화 형태

NavigationLink에는 두 가지 주요 형태가 있습니다: destination(대상 View 직접 지정) 및 value(NavigationDestination 값). 형태 선택은 iOS 버전과 네비게이션 아키텍처에 따라 달라집니다.

Destination 형태(iOS 13+): NavigationLink(destination: DetailView(), label: { Text("Open") }). 이 형태는 사용자가 링크를 클릭하지 않았더라도 NavigationLink를 렌더링할 때 즉시 DetailView를 생성합니다. 이는 View의 조기 초기화로 이어지며 대상 View가 초기화자에서 무거운 작업을 수행하는 경우 잠재적인 성능 문제를 일으킵니다.

Value 형태(iOS 16+): NavigationLink(value: "detail_42", label: { Text("Open") }). 대상 View는 링크를 누를 때만 생성되며, SwiftUI가 해당 .navigationDestination을 찾습니다. 이는 조기 초기화를 방지하고 네비게이션을 더 예측 가능하게 만듭니다.

NavigationStack과 NavigationLink: 올바른 사용법

NavigationStack과 NavigationLink iOS 16+에서는 value 형태로 전환해야 합니다. 네비게이션을 위한 데이터 유형(String, Int, enum Route)을 정의하고 .navigationDestination을 통해 대상을 등록합니다. NavigationLink는 스택에 값만 배치하고 SwiftUI는 누를 때 대상 View를 생성합니다.

struct CatalogView: View {
    let categories: [String]

    var body: some View {
        List(categories, id: \.self) { category in
            NavigationLink(value: category) {
                Text(category)
            }
        }
        .navigationDestination(for: String.self) { category in
            CategoryView(name: category)
        }
    }
}

// Programmatic navigation:
struct DeepLinkView: View {
    @State private var path: [AppRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: AppRoute.self) { route in
                    switch route {
                    case .detail(let id): DetailView(id: id)
                    case .settings: SettingsView()
                    }
                }
                .toolbar {
                    Button("Open Settings") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

프로그래매틱 네비게이션: 경로에 값 추가(path.append 통해)는 동일한 값을 가진 NavigationLink를 누르는 것과 같습니다. 이를 통해 ViewModel, Coordinator 또는 푸시 알림에 응답하여 네비게이션을 구현할 수 있습니다.

IsActive 형태(NavigationLink(isActive:destination:label:))는 호환성을 위해 사용 가능하지만 iOS 16+에서는 권장되지 않습니다. 경로 배열 또는 NavigationPath에 대한 Binding과 함께 value 형태를 사용하세요.

List에서 NavigationLink: 특징

List 내 NavigationLink는 행 오른쪽에 자동으로 공개 표시기(chevron)를 표시하여 누르면 다른 화면으로 이동함을 사용자에게 알립니다. List는 화살표 표시를 자동으로 관리합니다 — 목록 외부의 일반 NavigationLink에는 화살표가 없습니다.

iOS 16에서 NavigationLink가 있는 List는 List(data:rowContent:) 내에서 자동으로 value 형태를 사용합니다. List 내에서 ForEach를 사용할 때도 공개 표시기가 자동으로 추가됩니다. 이 동작은 수정자를 통해 비활성화할 수 없습니다 — NavigationLink를 Button으로 대체해야만 화살표를 제거할 수 있습니다.

List에서 destination 형태의 문제점: List 내에서 NavigationLink(destination:label:)를 사용하면 사용자가 링크를 클릭했는지 여부와 관계없이 모든 대상 View가 목록 로드 시 즉시 생성됩니다. 행 수가 많은 목록의 경우 초기 로딩 속도가 크게 저하되고 메모리 소비가 증가할 수 있습니다. NavigationStack과 함께 value 형태가 이 문제를 해결합니다.

WWDC 2022(Session 10054)에 따르면 Apple은 새 프로젝트에 NavigationStack과 NavigationLink의 value 형태 사용을 권장합니다. 이는 행 수가 많을 수 있는 동적 데이터가 있는 List에 특히 중요합니다.

NavigationLink 사용 패턴

패턴 1: 사용자 정의 NavigationLink 모양. NavigationLink는 모든 View를 레이블로 허용하므로 링크에 대한 사용자 정의 디자인을 만들 수 있습니다. List 내에서 이는 특히 편리합니다 — NavigationLink를 사용할 때 자동 공개 표시기를 얻을 수 있습니다.

NavigationLink(value: ProductRoute.detail(product)) {
    HStack {
        AsyncImage(url: product.imageURL)
            .frame(width: 60, height: 60)
        VStack(alignment: .leading) {
            Text(product.name).font(.headline)
            Text(product.price) .foregroundColor(.secondary)
        }
    }
    .padding(8)
}

패턴 2: 화살표 없는 NavigationLink(사용자 정의 버튼). 공개 표시기가 필요하지 않은 경우 프로그래매틱 네비게이션을 위해 Button을 사용하세요: path.append(value). 이는 NavigationLink가 부자연스러워 보이는 사용자 정의 인터페이스 요소에 유용합니다.

패턴 3: 조건부 네비게이션. 빈 destination을 사용하거나 특정 값에 .navigationDestination을 추가하지 않음으로써 NavigationLink를 차단할 수 있습니다. 경로를 통한 프로그래매틱 네비게이션은 값을 추가하기 전에 조건을 확인할 수 있습니다.

Hacking with Swift (2024)에 따르면 NavigationLink의 대부분의 문제는 이전 프로젝트에서 destination 형태 사용과 관련이 있습니다. NavigationStack으로 마이그레이션할 때 모든 NavigationLink(destination:label:)를 NavigationLink(value:label:)로 바꾸고 루트 수준에서 .navigationDestination을 추가하세요.