[SwiftUI] Deprecated된 tabItem(_:)을 대신하여 Tab()을 사용할 수 있다

[머릿말]

Android 앱 개발 공부를 할 때도 느꼈던 것이지만 유독 앱 분야가 변동사항이 많은 것 같다. 비교적 최근에 출판된 책으로 공부를 하고 있음에도 불구하고 deprecated 되었다는 문구를 많이 확인하고 있다.

 

deprecated 되었다는 것은 새로운 대체제가 있다는 것이므로 어떤 대체제가 있는지 찾아보며 공부하고 있는데 이것도 하나의 재미 포인트로 작용하는 것 같다.

---

● tabItem(_:) 이란?

공식 문서에서의 내용은 다음과 같다.

"뷰와 연관된 탭바 아이템을 설정한다."

iOS 13.0부터 18.1까지 잘 사용된 함수인 것 같은데... 왜 사라지는 것인가...

 

이것을 사용하면 TabView의 하단에 tab bar item을 설정할 수 있다. 아래 예제를 통해 확인해보자.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            
            Text("첫번째 뷰")
                .tabItem {
                    Image(systemName: "01.circle.fill")
                    Text("Screen 1")
                }
            Text("두번째 뷰")
                .tabItem {
                    Image(systemName: "02.circle.fill")
                    Text("Screen 2")
                }
            Text("세번째 뷰")
                .tabItem {
                    Image(systemName: "03.circle.fill")
                    Text("Screen 3")
                }
                
        }
        .font(.largeTitle)
    }
}

#Preview {
    ContentView()
}

위 예제처럼 TabView 의 하위 뷰에 .tabItem(_:) 수정자를 적용하여 tab bar item을 구성할 수 있다. 하지만!! 이것은 이제 deprecated 되었다고 하니 대체 방법에 대해 알아보도록 하자.

 

 

● Tab 이란?

tabItem(_:) 공식 문서에서도 대체제로 Tab을 사용하라고 나와있었다. 공식 문서에서의 Tab은 다음과 같다. iOS 18.0 이상부터 사용할 수 있다는 점에 유의해야 한다.

"TabView에서 탭의 내용과 탭에 연결된 탭 항목"

 

Tab에는 많은 초기화 함수가 있다. 위 공식 문서를 들어가면 확인할 수 있다. 이중 하나를 사용하여 위 예제와 동일한 화면을 구성해보도록 하겠다. 내가 사용한 것은 init(_:systemImage:content:)이다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
        
            Tab("Screen One", systemImage: "1.circle", content: {
                Text("First Content View")
            })

            Tab("Screen Two", systemImage: "2.circle", content: {
                Text("Second Content View")
            })

            Tab("Screen Three", systemImage: "3.circle", content: {
                Text("Third Content View")
            })
            
        }
        .font(.largeTitle)
    }
}

#Preview {
    ContentView()
}

결과 화면은 위 사진과 동일하다.

 

---

정말 많은 것이 바뀌는 앱 개발의 세상인 것 같다...🤣

 

끝!