[iOS/SwiftUI] Navigation - Back Button 커스텀 하기

[SwiftUI] NavigationView(NavigationStack) - Back Button 커스텀

---

SwiftUI의 NavigationView (또는 NavigationStack)를 사용할 때,

Destination View에서 보이는 Back Button을 지우거나 커스텀하는 방법을 알아봤다.

---

📎 지우는 방법

• View에 .navigationBarBackButtonHidden(true) modifier를 추가해 준다.

주의할 점은, 상위의 NavigationView가 아닌 Destination View에 적용해주어야 한다는 것이다.

UIKit에서는 반대로 상위의 ViewController에서 UIBarButton을 덮어씌워야 했었는데,

SwiftUI에서는 Destination View에서 이를 처리하도록 하고 있다.

내 생각에는 훨씬 직관적으로 이해할 수 있게 바뀐 것 같아서 좋은 것 같다.

처음 UIKit을 공부할 때, 당연히 Destination 쪽에서 처리해야 할 것이라고 착각하고 삽질하던 기억이 떠오른다.

---

📎 커스텀하는 방법

간단하게 코드 한 줄을 추가해서 버튼을 지울 수 있었다면, 커스텀은 약간 번거롭다.

요약하자면, 다음과 같은 절차를 거치면 된다.

1. .navigationBarBackButtonHidden(true) 를 선언하여 default 버튼을 지우기.
2. 커스텀 버튼 만들기
3. 만든 버튼을 Navigation Bar Item으로 등록하기.

Default 타입 Back Button에 적혀있는 "Back"이라는 글자만 지우고 싶을 수도 있기에,

Default 버튼 자체를 수정할 수 있는 방법은 없는지 찾아봤는데 그런 방법은 없는 것 같다. (있으면 알려주세요 ㅜ)

대신 Default 버튼을 지워버리고, 그 위에 직접 만든 버튼을 올리면 된다.

이 또한 생각하기에 따라서, 훨씬 직관적이라고 느껴질 수도 있을 것 같다.

아래는 이를 간단하게 구현해 본 예시 코드이다.

import SwiftUI

// 👀 First View
struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: MyView()){
                Text("Go to MyView")
            }
        }
    }
}

// 👀 Destination View
struct MyView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var backButton : some View {  // <-- 👀 커스텀 버튼
        Button{
            self.presentationMode.wrappedValue.dismiss()
        } label: {
            HStack {
                Image(systemName: "chevron.left") // 화살표 Image
                    .aspectRatio(contentMode: .fit)
                Text("뒤뒤뒤")
            }
        }
    }

    var body: some View {
        VStack {
            Text("MyView")

            Button {
                self.presentationMode.wrappedValue.dismiss()
            } label: {
                Text("Dismiss")
            }
        }
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: backButton)  // <-- 👀 버튼을 등록한다.
    }
}