[TIL] 여러 Destination이 있을 때 화면 관리법

배경

아래 사진들을 보시면 프로필 화면에서 각각 닉네임 화면과 연락처 화면으로 이동하는 것을 알 수 있습니다.

이처럼 오늘은 한 화면에서 여러 화면으로 이동하려고 할 때 어떻게 관리해주면 될지 알아보도록 하겠습니다.

 

구현 방법

구현 방법은 아주 간단합니다. 바로 NavigationLink의 tag와 selection을 이용하면 되는데요.

 

구현 코드는 아래와 같습니다.

struct ContentView: View {
   
    @State private var selection: String? = nil

    var body: some View {
        NavigationView {
            List {
               
                NavigationLink("1", tag: "1", selection: $selection) {
                    Text("View 1")
                }
                NavigationLink("2", tag: "2", selection: $selection) {
                    Text("View 2")
                }
                NavigationLink("3", tag: "3", selection: $selection) {
                    Text("View 3")
                }
            }
            .navigationTitle("Home")
        }
    }
}

 

위 코드 동작에 대해 간단히 하자면 각 tag 값에 Hashable한 값을 할당한 후, selection 값이 각 tag 값과 일치하면 그 해당 화면으로 이동하는 매커니즘입니다.

원래 화면으로 되돌아 가는 방법

원래 화면으로 되돌아 가는 방법도 엄청 간단합니다. 일단 아래 코드부터 확인해보겠습니다.

struct DetailView: View {
    let title: String
    // 1
    @Binding var selection: String?

    var body: some View {
        Button("Dismiss") {
        	// 2
            selection = nil
        }
        .navigationTitle(title)
    }
}

 

역시나 많은 코드가 필요하지 않습니다. 위 코드에 대해 간단히 설명하자면 상위뷰에서 selection에서 대한 정보를 바인딩해주고, 이 selection 바인딩에 nil을 할당해주면 원래 화면으로 되돌아 갈 수 있습니다.

 

그리고 참고사항으로 상위뷰에서의 코드 구현은 다음과 같습니다.

struct ContentView: View {
    @State private var selection: String? = nil
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink("1", tag: "1", selection: $selection) {
                    DetailView(title: "View 1", selection: $selection) // selection 바인딩
                }
                NavigationLink("2", tag: "2", selection: $selection) {
                    DetailView(title: "View 2", selection: $selection)
                }
                NavigationLink("3", tag: "3", selection: $selection) {
                    DetailView(title: "View 3", selection: $selection)
                }
            }
            .navigationTitle("Home")
        }
    }
}

 

마무리

비루한 글이지만 읽어주셔서 감사합니다.

참고 사이트

https://sarunw.com/posts/how-to-pop-view-from-navigation-view-in-swiftui/