[ios] SwiftUI 네비게이션

iOS 앱을 개발하다 보면 화면 간의 전환과 이동이 필요한데, SwiftUI에서는 네비게이션을 간단하게 구현할 수 있습니다. 네비게이션은 사용자 경험과 앱의 구조에 중요한 역할을 합니다.

네비게이션 구성

SwiftUI에서 네비게이션을 구현하는 방법은 매우 간단합니다. NavigationView로 컨테이너를 감싸고, NavigationLink를 사용하여 다른 뷰로 이동할 수 있습니다.

NavigationView {
    List {
        NavigationLink(destination: Text("Detail View")) {
            Text("Tap to show detail view")
        }
        NavigationLink(destination: Text("Another Detail View")) {
            Text("Tap to show another detail view")
        }
    }
}

위 예제에서는 NavigationView 안에 List가 포함되어 있고, 각각의 NavigationLink는 목적지(destination) 뷰를 설정하여 해당 뷰로 이동할 수 있습니다.

네비게이션 바 커스터마이징

네비게이션 바에는 기본적으로 제목이 표시되지만, 우리는 여러 가지 방법으로 네비게이션 바를 커스터마이징할 수 있습니다.

.navigationBarTitle(Text("Custom Title"), displayMode: .inline)
.navigationBarItems(trailing: Button(action: {
    // 동작 추가
}) {
    Image(systemName: "plus")
})

위 예제에서는 navigationBarTitle을 사용하여 네비게이션 바의 제목을 변경하고, navigationBarItems를 사용하여 우측에 버튼을 추가하였습니다.

네비게이션으로 데이터 전달

네비게이션을 사용하면서 다른 뷰로 데이터를 전달해야 하는 경우도 있습니다. SwiftUI에서는 @State, @Binding, @ObservedObject 등 다양한 속성 래퍼를 사용하여 데이터를 다른 뷰로 전달할 수 있습니다.

예를 들어, 목록에서 선택한 항목을 상세 화면으로 전달하려면 아래와 같이 @State를 활용할 수 있습니다.

@State private var selectedItem: Item?

List(items) { item in
    NavigationLink(destination: DetailView(item: item, selected: $selectedItem)) {
        Text(item.name)
    }
}

위 예제에서는 @State 속성 래퍼를 사용하여 선택된 항목을 저장하고, DetailView로 해당 항목을 전달하고 있습니다.

결론

SwiftUI를 사용하여 간단하게 네비게이션을 구현하는 방법과 네비게이션 바의 커스터마이징, 데이터 전달에 대해 알아보았습니다. 네비게이션을 효과적으로 활용하여 사용자 경험을 향상시키고, 앱의 구조를 잘 설계할 수 있도록 노력해야 합니다.


참고: SwiftUI Navigation