[SwiftUI] NavigationView 이동하다가 Root View로 돌아오기 (첫화면으로 돌아오는 방법)

 

앞에서 작성했던 글에서, SecondPage에서 NavigationBarHidden(true)코드를 없애고, 빌드시켜보면 아래와 같이 될 것이다.

[SwiftUI] Navigation bar가 계속 쌓이는 문제를 해결하자

여기 마지막 화면에서 뒤로가기 두번을 누르면, MainPage가 등장하지만,,, 만약 바로 화면으로 가고싶다면? 아래와 같이 마지막 화면에 NavigationLink를 통해 첫화면으로 가게 만들 것이다.

// ThirdPage 코드

import SwiftUI

struct ThirdPage: View {
    var body: some View {
        VStack{
            Text("This is Last Page.")
            NavigationLink(destination: ContentView()) {
                Text("Main으로 돌아가기")
                    .foregroundColor(Color.white)
                    .frame(width: 100, height: 60, alignment: .center)
                    .background(RoundedRectangle(cornerRadius: 10)
                        .fill(Color.purple))
            }
        }
    }
}

struct ThirdPage_Previews: PreviewProvider {
    static var previews: some View {
        ThirdPage()
    }
}

완벽해 보인다. 마지막화면에 버튼을 넣어서 destination으로 ContentView를 걸면 되지 않을까!? ThirdPage에 대한 코드를 이렇게 수정하고 빌드해보면 결과물은 아래와 같다.

main을 버튼을 누를때마다 NavigationView가 한층씩 더 쌓이는 것을 볼 수 있다. 초반에 이 문제로 고민을 많이 했었던 것 같다. 이것은 어떻게 해결할 수 있을까?

 

해결방법은 @Binding을 이용해서 값을 넘겨주는 것이다. 완성코드는 아래와 같다.

1. 최상단 뷰에서 (돌아오고싶은 뷰) @State 변수를 만들어준다.

firstNaviLinkActive 라고 state변수를 만들어주고, 초기값을 false 부터 시작한다. 이 값을 NavigationLink 에서 다음 뷰로 넘겨줄것이다. 이때, $로 표현한 것은, 해당 변수가 binding된 값이라는 것을 알려주는 것이고, isactive는, 인자값이 true로 변하면서 두번째 뷰로 넘어간다는 뜻이다.

isactive 를 해서 true로 넘겨주는 이유는, true로 이동하다가, 마지막 화면에서 "메인페이지로 이동하기"를 눌렀을 때, 이 값을 false로 전환하면서 첫 화면으로 돌아오게끔 설정하기 위해서다.

// ContentView 코드

import SwiftUI

struct ContentView: View {
    @State var firstNaviLinkActive = false
    var body: some View {
        NavigationView {
            VStack {
                Text("This is Main page.")
                    .bold()
                NavigationLink(destination: SecondPage(firstNaviLinkActive: $firstNaviLinkActive), isActive: $firstNaviLinkActive) {
                    Text("Click Here")
                        .foregroundColor(Color.white)
                        .frame(width: 100, height: 60, alignment: .center)
                        .background(RoundedRectangle(cornerRadius: 10)
                            .fill(Color.red))
                }
                .navigationBarHidden(true)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

2. 두번째 뷰에서 @Binding 변수로 firstNaviLinkActive 값을 받는다. 그리고 다시 이 값을 3번째 뷰로 넘긴다.

// SecondPage 코드

import SwiftUI

struct SecondPage: View {
        @Binding var firstNaviLinkActive: Bool
    var body: some View {
        VStack{
            Text("This is Second Page.")
            NavigationLink(destination: ThirdPage(firstNaviLinkActive: $firstNaviLinkActive)) {
                Text("Click Here")
                    .foregroundColor(Color.white)
                    .frame(width: 100, height: 60, alignment: .center)
                    .background(RoundedRectangle(cornerRadius: 10)
                        .fill(Color.green))
            }
        }
    }
}

struct SecondPage_Previews: PreviewProvider {
    static var previews: some View {
        SecondPage(firstNaviLinkActive: .constant(true))
    }
}

 

3. 마지막 페이지에서도 마찬가지로 @Binding변수로 firstNaviLinkAcive값을 전달받은 뒤, Main으로 돌아가기 라는 버튼을 만든 후, 버튼이 클릭되었을때 firstNaviLinkActive값을 false로 줘버린다.

// ThirdView 코드 (마지막화면)

import SwiftUI

struct ThirdPage: View {
    @Binding var firstNaviLinkActive: Bool
    var body: some View {
        VStack{
            Text("This is Last Page.")
            Button(action: {
                firstNaviLinkActive = false
            }, label: {
                Text("Main으로 돌아가기")
                    .foregroundColor(Color.white)
                    .frame(width: 100, height: 60, alignment: .center)
                    .background(RoundedRectangle(cornerRadius: 10)
                        .fill(Color.purple))
            })
        }
    }
}


struct ThirdPage_Previews: PreviewProvider {
    static var previews: some View {
        ThirdPage(firstNaviLinkActive: .constant(true))
    }
}

이렇게 코드를 수정하고, 완성본을 보면 아래와 같다.

 

iOS 앱개발을 하면서, @Binding변수에 대해서 처음으로 접해봤던 순간이었다. 값이 변한것을 유지시켜주면서, 값을 전달받게 해주고, 값이 false로 바뀌면 binding된 모든 페이지의 해당 변수가 다 false로 바뀌는 재밌는 개념이었다. 

추후 State변수와 Binding변수에 대해서 더 자세하게 포스팅하고 공부해볼 예정이다.