SwiftUI의 NavigationView 사용법: 네비게이션 구현하기

SwiftUI는 iOS 앱 개발을 혁신적으로 변화시키고 있습니다. 그 중에서 NavigationView는 사용자가 앱 내에서 유연하게 화면을 전환할 수 있게 해주는 중요한 컴포넌트입니다. 이 글에서는 NavigationView의 기본 사용법부터 고급 기능까지 소개하고, 다양한 예제를 통해 이해를 돕고자 합니다.

NavigationView의 기본 개념

NavigationView는 네비게이션을 관리하는 컨테이너 역할을 담당합니다. 이는 UIKit의 UINavigationController와 유사한 기능을 제공하며, SwiftUI의 뷰 계층 구조를 탐색할 수 있게 해줍니다. 아래는 가장 간단한 NavigationView 예제입니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello, SwiftUI!")
                .navigationBarTitle("Home")
        }
    }
}

위 예제에서는 NavigationView 안에 단순한 Text 뷰를 넣었습니다. 이 Text 뷰는 네비게이션 바(title)를 통해 제목을 표시합니다.

화면 전환과 NavigationLink

NavigationView의 진정한 힘은 화면 전환에 있습니다. 이를 위해 NavigationLink를 사용합니다. NavigationLink는 터치 이벤트 시 지정된 화면으로 전환하는 링크를 생성합니다. 아래는 두 개의 화면을 NavigationLink를 통해 연결하는 예제입니다.

swift
struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View")
                }
                .navigationBarTitle("Home")
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the detail view")
            .navigationBarTitle("Detail")
    }
}

이 예제에서 ContentView에는 NavigationLink가 포함되어 있으며, 터치 시 DetailView로 전환됩니다.

리스트와 NavigationView

SwiftUI에서는 리스트와 네비게이션을 조합하여 복잡한 리스트 기반 네비게이션을 쉽게 구현할 수 있습니다. 아래는 리스트 아이템을 선택하여 상세 페이지로 전환하는 예제입니다.

swift
struct Contact: Identifiable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    let contacts = [
        Contact(name: "Alice"),
        Contact(name: "Bob"),
        Contact(name: "Charlie")
    ]

    var body: some View {
        NavigationView {
            List(contacts) { contact in
                NavigationLink(destination: Text("Detail for \(contact.name)")) {
                    Text(contact.name)
                }
            }
            .navigationBarTitle("Contacts")
        }
    }
}

이 예제에서는 리스트 아이템을 선택하면 해당 이름을 가진 텍스트 뷰로 전환됩니다.

커스텀 백 버튼과 네비게이션 바 설정

기본적으로 NavigationView는 자동으로 네비게이션 바와 백 버튼을 제공합니다. 하지만 필요에 따라 이를 커스터마이징할 수 있습니다. 예를 들어, 커스텀 백 버튼을 추가하는 방법은 다음과 같습니다.

swift
struct DetailView: View {
    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        VStack {
            Text("This is the detail view")
            Button("Go Back") {
                self.presentationMode.wrappedValue.dismiss()
            }
        }
        .navigationBarTitle("Detail")
    }
}

@Environment를 사용하여 뷰의 현재 네비게이션 상태를 제어할 수 있습니다. presentationMode.wrappedValue.dismiss()를 호출하여 화면을 종료할 수 있습니다.

중첩 NavigationView

때로는 하나의 뷰 안에 여러 NavigationView가 필요할 수 있습니다. 예를 들어, 마스터-디테일 레이아웃을 사용하는 경우입니다. 다음 예제는 중첩 NavigationView를 구성하는 방법을 보여줍니다.

swift
struct MasterView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView1()) {
                    Text("Detail View 1")
                }
                NavigationLink(destination: DetailView2()) {
                    Text("Detail View 2")
                }
            }
            .navigationBarTitle("Master")
        }
    }
}

struct DetailView1: View {
    var body: some View {
        NavigationView {
            Text("This is detail view 1")
                .navigationBarTitle("Detail 1")
        }
    }
}

struct DetailView2: View {
    var body: some View {
        NavigationView {
            Text("This is detail view 2")
                .navigationBarTitle("Detail 2")
        }
    }
}

이 예제에서는 MasterView가 두 개의 네비게이션 링크를 포함하며, 각각 고유한 NavigationView를 관리합니다.

결론

SwiftUI의 NavigationView는 간단하면서도 강력한 네비게이션 기능을 제공합니다. 위에서 소개한 기본 사용법과 고급 기능을 통해 다양한 네비게이션 시나리오를 쉽게 구현할 수 있습니다. 네비게이션 바 설정부터 리스트와의 연동, 커스텀 백 버튼 등을 통해 더 복잡한 사용자 경험을 제공할 수 있습니다. SwiftUI를 사용하여 더 나은 iOS 앱을 개발해 보세요!