Add a custom Navigation Link for lazy loading | SwiftUI Crypto App #18

CryptoApp: NavigationLink

구현 목표

• 커스텀 네비게이션 링크 구현

구현 태스크

• 디테일 뷰 구현
• 네비게이션 링크 연결
• 백그라운드 단의 네비게이션 링크

핵심 코드

private var allCoinsList: some View {
        List {
            ForEach(viewModel.allCoins) { coin in
                CoinRowView(coin: coin, showHoldingsColumn: false)
                    .listRowInsets(.init(top: 10, leading: 0, bottom: 0, trailing: 10))
                    .onTapGesture {
                        segue(coin: coin)
                    }
            }
        }
        .listStyle(.plain)
    }

• List 내부에 NavigationLink를 선언할 때 현재 클릭하지 않은 Row까지 모두 destination으로 선언된 뷰가 초기화되는 이슈

private func segue(coin: CoinModel) {
        selectedCoin = coin
        showDetailView.toggle()
    }

• 특정 뷰를 클릭했을 때 onTapGesture를 통해 실행되는 함수
• DetailView를 그리기 위한 selectedCoin에 해당 코인 데이터를 넘기고 showDetailView 변수 값을 토글함으로써 네비게이션 링크 활성화

.background(
            NavigationLink(destination: DetailLoadingView(coin: $selectedCoin), isActive: $showDetailView, label: {
                EmptyView()
            })
        )

• 현재 뷰에서 해당 네비게이션으로 넘어가는 부분은 isActive에 걸려 있는 showDetailView 값이 바뀔 때에만 가능
• 스택에 쌓이는 뷰는 isActive 시점에 초기화 보장

import SwiftUI

struct DetailLoadingView: View {
    @Binding var coin: CoinModel?
    
    init(coin: Binding<CoinModel?>) {
        self._coin = coin
    }
    var body: some View {
        ZStack {
            if let coin = coin {
                DetailView(coin: coin)
            }
        }
    }
}

• 바인딩으로 받아주는 DetailLoadingView 내부에서 상수 let이 된 코인 데이터를 DetailView로 넘기기
• 코인 데이터와 관련 없는 UI는 현재 DetailLoadingView에서 그릴 수도 있음

import SwiftUI

struct DetailView: View {
    let coin: CoinModel
    
    init(coin: CoinModel) {
        self.coin = coin
    }
    var body: some View {
        ZStack {
            
        }
    }
}

• 실제 코인 데이터를 통해 그리는 뷰

구현 화면