SwiftUI 탭 뷰 구현하기: 다중 화면 네비게이션

SwiftUI는 애플의 UI 프레임워크로서, 간결하고 직관적인 코드로 사용자 인터페이스를 구성할 수 있는 도구입니다. 특히 다중 화면 네비게이션을 손쉽게 구현할 수 있는 탭 뷰(Tap View)를 지원합니다. 이 글에서는 SwiftUI 탭 뷰를 사용하여 다중 화면 네비게이션을 구현하는 방법에 대해 살펴보겠습니다.

기본 개념과 설정

먼저 SwiftUI의 탭 뷰는 여러 개의 뷰를 탭 형식으로 전환할 수 있게 해줍니다. 이를 위해 SwiftUI의 TabView 컴포넌트를 사용합니다. 가장 기본적인 설정은 다음과 같습니다:

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("첫 번째 화면")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("첫 번째")
                }
            Text("두 번째 화면")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("두 번째")
                }
        }
    }
}

위 코드에서는 두 개의 텍스트 뷰를 TabView 내부에 배치했습니다. 그리고 각각의 탭 아이템에 아이콘과 텍스트를 설정했습니다. systemName은 애플이 제공하는 SF Symbols 아이콘을 사용합니다.

커스텀 뷰 추가하기

텍스트 뿐만 아니라, 완전히 새로운 커스텀 뷰를 탭으로 추가할 수 있습니다. 예를 들어 여러 화면에 대한 SwiftUI 뷰 파일을 만들어서 탭으로 추가할 수 있습니다:

swift
import SwiftUI

struct FirstView: View {
    var body: some View {
        VStack {
            Text("첫 번째 커스텀 화면")
            Image(systemName: "star.fill")
        }
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            Text("두 번째 커스텀 화면")
            Image(systemName: "heart.fill")
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            FirstView()
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("첫 번째")
                }
            SecondView()
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("두 번째")
                }
        }
    }
}

이제 각각의 탭은 FirstView와 SecondView로 별도 구성된 커스텀 화면을 표시합니다. 이러한 구조는 화면을 모듈화하고 재사용 가능하게 만듭니다.

매개변수 전달과 상호작용

탭 뷰 내에서 각 화면 간에 매개변수를 전달하거나 상호작용을 구현하는 것은 매우 중요합니다. State와 Binding, Environment 등을 사용하여 이를 구현할 수 있습니다.

예를 들어, 간단한 카운터를 생각해보겠습니다:

swift
import SwiftUI

struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("카운터: \(count)")
                .font(.largeTitle)
            Button(action: {
                count += 1
            }) {
                Text("증가")
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            CounterView()
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("카운터")
                }
            Text("다른 화면")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("다른 화면")
                }
        }
    }
}

이 예제에서는 CounterView에서 @State 프로퍼티를 이용해 카운트를 증가시키는 버튼을 추가했습니다. 이를 통해 각 탭에서 독립적인 상태를 관리할 수 있습니다.

다양한 기능의 활용

탭 뷰는 간단한 구성 이외에도 다양한 기능을 연동하여 더욱 강력하게 만들 수 있습니다. 예를 들어, NavigationView를 조합하거나, ObservableObject와 같은 프로토콜을 사용하여 전체 애플리케이션 상태를 공유할 수 있습니다.

swift
import SwiftUI

class AppState: ObservableObject {
    @Published var globalCount: Int = 0
}

struct GlobalCounterView: View {
    @EnvironmentObject var appState: AppState

    var body: some View {
        VStack {
            Text(