인프런 커뮤니티 질문&답변

안녕하세요 ycc3819님
먼저 강의 수강해 주셔서 감사합니다.

먼저 toolbar에 작동 원리에 대해 설명드릴게요

.navigationbarBackButtonHidden()과 .toolbar {}는 이 코드가 적힌 화면이 '네비게이션 스택안에 쌓인다면' 해당 화면에서 백버튼을 지우고, 새로운 툴바아이템을 보여줍니다.

아래 코드에서 navigationBarBackButtonHidden과 toolbar에 의미는

현재 네비게이션 스택에 쌓이는 모든 화면에 백버튼을 없애고, 툴바를 이걸로 대체해줘 라는 의미가 아니고

현재 화면이 다른 네비게이션 스택안에 쌓인다면 현재화면에 대해서 백버튼을 없애고, 툴바를 대체해줘 라는 의미가 됩니다.

 var body: some View {
        NavigationStack {
            ScrollView { }
        }
        .navigationBarBackButtonHidden()
        .toolbar {
            ToolbarItem(placement: .topBarLeading) {
                Button {
                    dismiss()
                } label: {
                    Image(systemName: "arrow.backward")
                    .tint(.black)
                }
            }
        }  //:TOOLBAR

NaviagtionStack과 navigationBarBackButtonHidden(or toolBar)는 별개라고 생각해주시면 됩니다.

이 코드를 해석해 본다면

NaviagtionStack : 이 화면은 navigationStack을 통해 다른 화면으로 전환이 되겠구나

navigationBarBackButtonHidden(or toolBar): 이 화면이 다른 navigationStack안에 쌓인다면 기존 백버튼이 사라지고 새 백버튼이 생기겠구나 라고 생각하시면 됩니다.

좀더 이해하기 쉽게 다른 코드를 보여드릴게요

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("This is the First View")
                NavigationLink("Go to Second View") {
                    SecondView()
                }
            }
            .navigationTitle("First View")
                
        }
    }
}

struct SecondView: View {
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        VStack(spacing: 20) {
            Text("This is the Second View")
        }
        .navigationBarBackButtonHidden()
        .toolbar {
            ToolbarItem(placement: .topBarLeading) {
                Button {
                    dismiss()
                } label: {
                    Image(systemName: "arrow.backward")
                        .tint(.black)
                }
            }
        }
    }
}

#Preview {
    ContentView()
}

이 코드는 NavigationStack과 백버튼관련코드가 다른 뷰로 나뉘어져 있는데요.

보통은 이런식으로 쓰이는게, 제 코드에서는 프로필뷰가 2가지 역할을 하기때문에 한곳에 모여있어서 혼란을 야기한것 같습니다.

1. 프로필뷰 -> 프로필에디팅뷰로 이동하기 위해 NavigationStack을 사용했고요

2. 피드뷰 -> (다른사람의)프로필뷰로 이동되었을때 백버튼을 바꾸기 위해,
   .navigationBarBackButtonHidden()

    

   .toolbar {}

이 두코드를 사용했다고 보시면 됩니다.


그런데 질문자님처럼 저렇게 화살표가 2개 나오는 상황이 제코드에서는 발생하지 않는거 같은데요.

chapter12폴더에 12-2코드로 한번 실행해보시겠어요?

아마 코드가 다른 부분이 있어서 저런 현상이 나타난게 아닌가 싶습니다.