🐥 Navigation Stack의 모든 것

[luminouxx]

✏️ Overview

SwiftUI에서 여러 화면을 넘나드는 앱을 만들고 싶다면, NavigationStack과 NavigationLink는 꼭 알아야 할 필수 도구입니다.

이 문서는 SwiftUI에서의 화면 전환(Navigation)에 대해 처음 접하는 사람도 이해할 수 있도록,
NavigationStack, NavigationLink, 그리고 NavigationPath의 개념과 사용 방법을 소개합니다.

글을 읽다가 이해가 안되더라도 일단 쭉~ 읽어보자!

⁉️ 이 문서를 통해 배우게 될 내용:

1. NavigationStack을 사용해 화면 전환의 시작점을 만들고

2. NavigationLink로 다른 화면으로 이동하는 방법을 익히며

3. NavigationPath를 활용한 동적 화면 전환까지 배워봅니다.

4. 마지막으로, 화면 전환 로직을 하나의 객체로 관리하는 구조도 함께 알아봅니다. (중급자용)

단순한 버튼 클릭 → 화면 전환뿐만 아니라,
데이터를 함께 전달하거나, 조건에 따라 특정 화면으로 이동하는 유연한 Navigation 흐름까지 다룰 예정입니다.

⚠️ 우리가 준비해야할 것은 다음과 같습니다.

1. Navigation Stack (담을 놈) -> 화면 구조의 최상단에 1번
2. Navigation Link (보낼 놈)
3. Navigation Destination (받을 놈)

그럼 하나씩 알아보고, 활용 방법을 찾아보겠습니다.

---

✏️ Before the Start...

💡 마인드의 전환…

SwiftUI의 Navigation Stack은 데이터의 전환 관점에서 접근하는 것이 좋습니다.
일반적으로 우리가 화면을 전환한다고 생각을 한다면,

1. 화면을 바꿔줘야지!
2. 화면을 그리는 데 필요한 데이터를 뿌려줘야지

위와 같은 사고의 흐름을 하기 쉽지만,

1. 다음 화면에 사용할 데이터를 전환 한 후
2. 그 데이터에 맞는 화면을 보여주겠다!
   즉, 스택아! 값을 전달해 줄테니까! 화면을 내놔!

[참고]
위와 같은 사고의 흐름이 선언형, 함수형 프로그래밍 패러다임을 지향하는 SwiftUI에 더 적합합니다. (몰라도 됨)

---

1. NavigationStack

NavigationStack은 화면 전환의 시작점(root view)을 만들어주는 컨테이너입니다.

NavigationStack {
    // 화면 전환을 위한 콘텐츠들 
    // (여기에 여러분들의 첫번째 뷰가 들어가면 돼요!)
}

1.1 NavigationStack의 2가지 종류

Xcode에 Navigation Stack을 입력하면 2가지 생성자가 있다는 것을 확인 할 수 있습니다.

1. root View를 parameter로 받는 이니셜라이저
2. path와 root View를 parameter로 받는 이니셜라이저

-> 무슨 말인지 모르겠지만, 대충 path를 쓸 수도, 안 쓸 수도 있다는 느낌이 듭니다.

1.2 NavigationLink

NavigationLink는 사용자가 누르면 다른 화면으로 전환되는 버튼 역할을 합니다.
SwiftUI는 이 링크를 누를 때마다 자동으로 다음 화면을 보여주는 구조를 만들어줍니다.

// 데이터를 전달하는 예제 Value에 뭔가를 보내고 있죠? (value: mentor)
// 값을 전달 해 줄테니까! 화면을 내놔!
NavigationLink(value: mentor) {
      Text(mentor.name)
            .foregroundColor(mentor.color)
}

// 전달할 값이 없으면
NavigationStack {
    NavigationLink {
        Text("이동된 화면입니다.")
    } label: {
        Text("다른 화면으로 이동")
    }
}

1.3 NavigationDestination

NavigationDestination은 NavigationStack에서 화면을 전환할 대상 뷰(Destination View) 를 지정해주는 역할을 합니다.
이 경우, 받은 테이터의 타입에 따라서, 목적지를 설정해줍니다.

쉽게 말해, NavigationLink를 통해 넘긴 데이터가 어떤 화면과 연결되어야 하는지를 SwiftUI에게 알려주는 기능입니다.

// Mentor 타입의 데이터를 전달 받았어? -> MentoView로 가
// 멘토 타입일 경우 MentorView로 이동
.navigationDestination(for: Mentor.self) { mentor in
          MentorView(mentor: mentor)
}

위 코드는 이런 의미입니다:

1. Mentor 타입의 데이터를 전달 받으면 (타입 배우셨던 것 기억하나요?)
2. MentorView(mento:) 라는 화면을 보여주겠다는 약속

따라서 NavigationLink(value:)로 값을 넘기기만 하면,
시스템은 자동으로 알맞은(해당 타입에 맞는) Destination View를 찾아 연결해줍니다.

---

✏️ Topic 1. Navigation Path를 사용하지 않는 방법

🧐 Topic1. Sample Code (복사해서 연습해보세요.)

import SwiftUI

// MARK: - 데이터 모델 정의

// 멘토 정보 모델 (Hashable을 채택해서 NavigationDestination에서 사용 가능)
struct Mentor: Hashable {
    var name: String
    var age: Int
    var color: Color
}

// 배우 정보 모델
struct Actor: Hashable {
    var name: String
    var income: Int
    var movie: String
}

// MARK: - 샘플 데이터

// 멘토 리스트
var mentors: [Mentor] = [
    .init(name: "루미", age: 40, color: .red),
    .init(name: "주디", age: 88, color: .orange),
    .init(name: "하워드", age: 50, color: .yellow),
    .init(name: "네이선", age: 38, color: .green),
    .init(name: "리이오", age: 99, color: .blue),
    .init(name: "제이슨", age: 50, color: .indigo),
    .init(name: "아이작", age: 38, color: .purple)
]

// 배우 리스트
var actors: [Actor] = [
    .init(name: "전지현", income: 40, movie: "별에서 온 그대"),
    .init(name: "김수현", income: 88, movie: "눈물의 여왕"),
    .init(name: "고윤정", income: 50, movie: "무빙"),
    .init(name: "송강호", income: 38, movie: "기생충")
]

// MARK: - 메인 화면

struct ContentView: View {
    var body: some View {
        // NavigationStack: 화면 전환을 관리하는 루트 컨테이너
        NavigationStack {
            List {
                // Section 1: 멘토 목록
                Section("멘토들") {
                    ForEach(mentors, id: \.name) { mentor in
                        // NavigationLink로 멘토 정보를 넘기며 이동
                        NavigationLink(value: mentor) {
                            Text(mentor.name)
                                .foregroundColor(mentor.color)
                        }
                    }
                }

                // Section 2: 배우 목록
                Section("배우들") {
                    ForEach(actors, id: \.name) { actor in
                        // NavigationLink로 배우 정보를 넘기며 이동
                        NavigationLink(value: actor) {
                            Text(actor.name)
                        }
                    }
                }

                // Section 3: 아무 값도 넘기지 않는 경우
                Section("그 외") {
                    NavigationLink {
                        LumiView()
                    } label: {
                        Text("전달할게 없다면요?")
                    }
                }
            }

            // 멘토 타입일 경우 MentoView로 이동
            .navigationDestination(for: Mentor.self) { mentor in
                MentorView(mentor: mentor)
            }

            // 배우 타입일 경우 ActorView로 이동
            .navigationDestination(for: Actor.self) { actor in
                ActorView(actor: actor)
            }

            // 타이틀 설정
            .navigationTitle("사람들")
        }
    }
}

// MARK: - 멘토 상세 화면

struct MentorView: View {
    private let mentor: Mentor

    init(mentor: Mentor) {
        self.mentor = mentor
    }

    var body: some View {
        ZStack {
            // 배경색은 멘토의 color
            mentor.color.ignoresSafeArea()
            VStack {
                Text("이름 : " + mentor.name)
                    .fontWeight(.bold)
                Text("나이 : \(mentor.age)")
            }
        }
    }
}

// MARK: - 배우 상세 화면

struct ActorView: View {
    private let actor: Actor

    init(actor: Actor) {
        self.actor = actor
    }

    var body: some View {
        VStack(spacing: 8) {
            Text("이름 : " + actor.name)
                .fontWeight(.bold)
            Text("월급 : \(actor.income)만 원")
            Text("대표작품 : " + actor.movie)
        }
    }
}

// MARK: - 전달값이 없는 단순 View

struct LumiView: View {
    var body: some View {
        VStack(spacing: 8) {
            Text("난 아무것도 전달 받을 게 없어.")
                .foregroundColor(.red)
                .fontWeight(.bold)
        }
    }
}



// MARK: - 미리보기

#Preview {
    ContentView()
}

Q. 아니 근데 데이터를 전달하고 싶지 않을 수도 있잖아요?

데이터의 전환 없이 화면을 전환할 수도 있다.

메소드를 분석해보면, 2개의 파라미터를 필요로 합니다.

1. destination에 해당하는 View
2. Label에 해당하는 View

전달해야 할 데이터가 없으니까, .Destination을 설정하지 않아도 되겠죠?

---

✏️ Topic 2. Navigation Path를 활용한 동적 사용법

이번에는 동적으로 Navigation을 전환해 보겠습니다. (동적이 뭔 지 몰라도 됨. 느낌만 가져가세요)

이제부터 우리는 Navigation Path에만 집중하면 됩니다.

Navigation Path는 지금 현재 화면 정보를 담고 있는 배열입니다.

시스템은 Navigation Path를 관찰하며, Path에 맞게 화면을 구성합니다.

[예시로 알아보기]

시스템은 Navigation Path를 관찰합니다.
하지만 Navigation Path(배열)는 현재 비어 있어 있습니다. (무엇을 의미할까요?)
자 이제 우리는 1번 화면으로 화면을 전환하고 싶습니다.
그렇다면, 우리는 Path에 1번에 대한 데이터를 추가하면 됩니다.

여기에 추가적으로 3번 화면을 추가하고 싶다면,
Path에 3번에 대한 데이터를 추가하면 됩니다.

마지막으로 이제 우리는 root로 돌아가고 싶습니다.
그렇다면 Path에 있던 데이터를 전부 없애주면 됩니다.
(Root 상태는 빈 리스트 형태였으니)

🧐 Topic2. Sample Code (복사해서 연습해보세요.)

import SwiftUI

// 메인 화면
struct ContentView: View {
    // 화면 이동 경로를 저장하는 상자라고 생각하면 돼요!
    @State var path = NavigationPath()
    
    var body: some View {
        // 화면들을 쌓아 올릴 수 있는 Stack을 만들어요!
        NavigationStack(path: $path) {
            VStack(spacing: 20) {
                Text("여기는 루트입니다") // 제일 첫 화면이에요!
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding(.top, 50)
                
                // 1번 화면으로 이동하는 버튼
                Button(action: {
                    path.append("1") // 경로에 "1"을 추가하면 1번 화면으로 이동해요!
                }) {
                    Text("1번으로 이동하기")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                        .padding(.horizontal)
                }
                
                // 2번 화면으로 이동하는 버튼
                Button(action: {
                    path.append("2") // 경로에 "2"를 추가하면 2번 화면으로 이동해요!
                }) {
                    Text("2번으로 이동하기")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                        .padding(.horizontal)
                }
            }
            // 화면을 어떤 값으로 이동할지 정해줘요
            .navigationDestination(for: String.self) { value in
                // 만약 경로에 "1"이 들어오면 1번 화면을 보여줘요
                switch value {
                case "1":
                    DetailView1(path: $path)
                case "2":
                    DetailView2(path: $path)
                case "3":
                    DetailView3(path: $path)
                case "4":
                    DetailView4(path: $path)
                default:
                    EmptyView() // 아무 것도 없는 화면이에요
                }
            }
        }
    }
}

// 1번 화면
struct DetailView1: View {
    @Binding var path: NavigationPath
    
    var body: some View {
        VStack(spacing: 20) {
            Text("1번 뷰 입니다.") // 지금 여긴 1번 화면이에요
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding(.top, 50)
            
            // 3번 화면으로 이동하는 버튼
            Button {
                path.append("3") // 경로에 "3"을 추가해서 3번 화면으로 이동!
            } label: {
                Text("3번 뷰로 이동하기")
                    .font(.title2)
                    .fontWeight(.semibold)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.orange)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            }
        }
    }
}

// 2번 화면
struct DetailView2: View {
    @Binding var path: NavigationPath
    
    var body: some View {
        VStack(spacing: 20) {
            Text("2번 뷰입니다.") // 지금 여긴 2번 화면이에요
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding(.top, 50)
            
            // 4번 화면으로 이동하는 버튼
            Button {
                path.append("4") // 경로에 "4"를 추가해서 4번 화면으로 이동!
            } label: {
                Text("4번 뷰로 이동하기")
                    .font(.title2)
                    .fontWeight(.semibold)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.purple)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            }
        }
    }
}

// 3번 화면
struct DetailView3: View {
    @Binding var path: NavigationPath
    
    var body: some View {
        Text("3번 뷰입니다.") // 여긴 3번 화면이에요!
            .font(.largeTitle)
            .fontWeight(.bold)
            .padding(.top, 50)
        
        // 루트(처음 화면)으로 돌아가기
        Button {
            path.removeLast(path.count) // 저장된 경로들을 전부 없애요! = 처음 화면으로!
        } label: {
            Text("루트로 이동하기")
                .font(.title2)
                .fontWeight(.semibold)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.purple)
                .foregroundColor(.white)
                .cornerRadius(10)
                .padding(.horizontal)
        }
    }
}

// 4번 화면
struct DetailView4: View {
    @Binding var path: NavigationPath
    
    var body: some View {
        Text("4번 뷰 입니다.") // 여긴 4번 화면이에요!
            .font(.largeTitle)
            .fontWeight(.bold)
            .padding(.top, 50)
        
        // 한 단계만 뒤로 가기
        Button {
            path.removeLast() // 마지막으로 쌓인 화면 하나만 지워요!
        } label: {
            Text("뒤로 가기 없이 뒤로가기?")
                .font(.title2)
                .fontWeight(.semibold)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.purple)
                .foregroundColor(.white)
                .cornerRadius(10)
                .padding(.horizontal)
        }
    }
}

#Preview {
    ContentView()
}

---

✏️ Topic 3. 불편한데요? 조금 더 세련되게 사용할 수 없을까요? (Advanced)

❕ 예제를 따라 하면서 생기는 불편한 점들을 한번 정리해볼게요.

1. 화면(View)을 만들 때마다 NavigationPath를 꼭 넘겨줘야 해요

NavigationPath는 화면 전환 정보를 저장하는 친구인데요,
SwiftUI는 이런 걸 @binding이라는 방식으로 전달받아야만 같이 사용할 수 있어요.

근데 문제는, 모든 화면마다 @binding var path를 적어줘야 한다는 점이에요.

→ 이건 SwiftUI가 내부에서 상태(@State)를 관리하는 방식 때문이에요.
→ 개발자가 일일이 연결해줘야만 제대로 작동해요.

2. View가 너무 많은 책임을 지게 돼요 (몰라도 됨)

View가 "화면을 보여주는 역할"만 하고 싶게 할 수도 있어요.
우리는 화면마다 아래처럼 복잡한 로직을 계속 쓰고 있어요.

Button {
    path.append("3")
}

이게 무슨 문제냐면…

1. 보기 힘들고, 헷갈려요

코드가 복잡해지고, 읽기 어려워져요.

2. 같은 코드가 계속 반복돼요

버튼이 있는 화면마다 path.append()를 계속 써야 해요.

3. 실수 찾기가 어려워요

화면이 100개 있다고 생각해보세요!
모든 화면이 .append()를 직접 하고 있기 때문에, 중간에 실수가 생겨도 어디서 잘못된 건지 찾기 힘들어요.

그래서 우리는 화면 전환의 책임을 뷰에서 떼어내서,
전문적으로 Navigation만 관리하는 객체에게 맡겨 보는 연습을 해보겠습니다.

이건 마치 길 안내는 네비게이션에게 맡기고, 운전자는 운전에만 집중하는 것과 같아요.

[NavigationManager(예시)의 요구 사항]

• 모든 View에서 참조를 할 것.
• 객체를 여러번 생성하지 말 것.

🧐 Topic3. Sample Code (복사해서 연습해보세요.)

import SwiftUI

// MARK: 화면 전환을 관리하는 객체
class NavigationManager: ObservableObject {
    @Published var path = NavigationPath()
    
    // 화면 전환하기
    func navigate(to destination: String) {
        path.append(destination)
    }
    
    // 루트로 이동하기
    func poptoRoot() {
        path.removeLast(path.count)
    }
    
    // 뒤로가기
    func pop() {
        path.removeLast()
    }
    
    // 내 마음대로 커스텀, 1 - 2 - 3 - 4 순으로 이동하기
    func oneTwoThreeFour() {
        path.append("1")
        path.append("2")
        path.append("3")
        path.append("4")
    }
}

struct ContentView: View {
    
    @StateObject private var navigationManager = NavigationManager()
    
    var body: some View {
        NavigationStack(path: $navigationManager.path) {
            VStack(spacing: 20) {
                Text("여기는 루트입니다")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding(.top, 50)
                
                Button(action: {
                    // TODO: 1번으로 이동하기
                    navigationManager.navigate(to: "1")
                }) {
                    Text("1번으로 이동하기")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                        .padding(.horizontal)
                }
                
                Button(action: {
                    // TODO: 2번으로 이동하기
                    navigationManager.navigate(to: "2")
                }) {
                    Text("2번으로 이동하기")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                        .padding(.horizontal)
                }
                
                Button(action: {
                    // TODO: 1 - 2 - 3 - 4 순으로 이동하기
                    navigationManager.oneTwoThreeFour()
                }) {
                    Text("1 - 2 - 3 - 4 순으로 이동하기")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.purple)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                        .padding(.horizontal)
                }
            }
            .navigationDestination(for: String.self) { value in
                switch value {
                case "1":
                    DetailView1()
                        .environmentObject(navigationManager)
                case "2":
                    DetailView2()
                        .environmentObject(navigationManager)
                case "3":
                    DetailView3()
                        .environmentObject(navigationManager)
                case "4":
                    DetailView4()
                        .environmentObject(navigationManager)
                default:
                    EmptyView()
                }
            }
        }
    }
}

struct DetailView1: View {
    @EnvironmentObject var navigationManager: NavigationManager
    
    var body: some View {
        VStack(spacing: 20) {
            Text("1번 뷰 입니다.")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding(.top, 50)
            
            Button {
                // TODO: 3번으로 이동하기
                navigationManager.navigate(to: "3")
            } label: {
                Text("3번 뷰로 이동하기")
                    .font(.title2)
                    .fontWeight(.semibold)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.orange)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            }
        }
    }
}

struct DetailView2: View {
    @EnvironmentObject var navigationManager: NavigationManager
    
    var body: some View {
        VStack(spacing: 20) {
            Text("2번 뷰입니다.")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding(.top, 50)
            
            Button {
                // TODO: 4번으로 이동하기
                navigationManager.navigate(to: "4")
            } label: {
                Text("4번 뷰로 이동하기")
                    .font(.title2)
                    .fontWeight(.semibold)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.purple)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            }
        }
    }
}

struct DetailView3: View {
    @EnvironmentObject var navigationManager: NavigationManager
    
    var body: some View {
        Text("3번 뷰입니다.")
            .font(.largeTitle)
            .fontWeight(.bold)
            .padding(.top, 50)
        
        Button {
            // TODO: 루트로 이동하기
            navigationManager.poptoRoot()
        } label: {
            Text("루트로 이동하기")
                .font(.title2)
                .fontWeight(.semibold)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.purple)
                .foregroundColor(.white)
                .cornerRadius(10)
                .padding(.horizontal)
        }
    }
}

struct DetailView4: View {
    @EnvironmentObject var navigationManager: NavigationManager
    
    var body: some View {
        Text("4번 뷰 입니다.")
            .font(.largeTitle)
            .fontWeight(.bold)
            .padding(.top, 50)
        
        Button {
            // TODO: 뒤로 가기
            navigationManager.pop()
        } label: {
            Text("뒤로 가기 없이 뒤로가기?")
                .font(.title2)
                .fontWeight(.semibold)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.purple)
                .foregroundColor(.white)
                .cornerRadius(10)
                .padding(.horizontal)
        }
    }
}

#Preview {
    ContentView()
}

✏️ Summary

지금까지 SwiftUI에서 화면 전환을 구현하는 핵심 도구인
NavigationStack, NavigationLink, 그리고 NavigationPath에 대해 배워봤습니다.
이 문서를 통해 우리는 다음과 같은 내용을 익혔습니다:

✅ 내용 요약

항목	설명
NavigationStack	화면 전환의 시작점 역할을 하는 뷰 컨테이너
NavigationLink	사용자가 눌렀을 때 다음 화면으로 이동하게 해주는 트리거
NavigationDestination	어떤 데이터를 넘겼을 때 어떤 화면을 보여줄지 지정
NavigationPath	코드로 직접 화면 전환 흐름을 제어할 수 있는 구조

---

[luminouxx]

🧐 Topic3. Sample Code (번외편)

Enum 활용해도 좋음

import SwiftUI

// View의 종류에 대한 Enum
enum ViewType {
    case one
    case two
    case three
    case four
}

// MARK: 화면 전환을 관리하는 객체
class NavigationManager: ObservableObject {
    @Published var path = NavigationPath()
    
    // 화면 전환하기
    func navigate(to destination: ViewType) {
        path.append(destination)
    }
    
    // 루트로 이동하기
    func poptoRoot() {
        path.removeLast(path.count)
    }
    
    // 뒤로가기
    func pop() {
        path.removeLast()
    }
    
    // 내 마음대로 커스텀, 1 - 2 - 3 - 4 순으로 이동하기
    func oneTwoThreeFour() {
        path.append(ViewType.one)
        path.append(ViewType.two)
        path.append(ViewType.three)
        path.append(ViewType.four)
    }
}

struct ContentView: View {
    
    @StateObject private var navigationManager = NavigationManager()
    
    var body: some View {
        NavigationStack(path: $navigationManager.path) {
            VStack(spacing: 20) {
                Text("여기는 루트입니다")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding(.top, 50)
                
                Button(action: {
                    // TODO: 1번으로 이동하기
                    navigationManager.navigate(to: .one)
                }) {
                    Text("1번으로 이동하기")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                        .padding(.horizontal)
                }
                
                Button(action: {
                    // TODO: 2번으로 이동하기
                    navigationManager.navigate(to: .two)
                }) {
                    Text("2번으로 이동하기")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                        .padding(.horizontal)
                }
                
                Button(action: {
                    // TODO: 1 - 2 - 3 - 4 순으로 이동하기
                    navigationManager.oneTwoThreeFour()
                }) {
                    Text("1 - 2 - 3 - 4 순으로 이동하기")
                        .font(.title2)
                        .fontWeight(.semibold)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.purple)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                        .padding(.horizontal)
                }
            }
            .navigationDestination(for: ViewType.self) { value in
                switch value {
                case .one:
                    DetailView1()
                        .environmentObject(navigationManager)
                case .two:
                    DetailView2()
                        .environmentObject(navigationManager)
                case .three:
                    DetailView3()
                        .environmentObject(navigationManager)
                case .four:
                    DetailView4()
                        .environmentObject(navigationManager)
                }
            }
        }
    }
}

struct DetailView1: View {
    @EnvironmentObject var navigationManager: NavigationManager
    
    var body: some View {
        VStack(spacing: 20) {
            Text("1번 뷰 입니다.")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding(.top, 50)
            
            Button {
                // TODO: 3번으로 이동하기
                navigationManager.navigate(to: .three)
            } label: {
                Text("3번 뷰로 이동하기")
                    .font(.title2)
                    .fontWeight(.semibold)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.orange)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            }
        }
    }
}

struct DetailView2: View {
    @EnvironmentObject var navigationManager: NavigationManager
    
    var body: some View {
        VStack(spacing: 20) {
            Text("2번 뷰입니다.")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding(.top, 50)
            
            Button {
                // TODO: 4번으로 이동하기
                navigationManager.navigate(to: .four)
            } label: {
                Text("4번 뷰로 이동하기")
                    .font(.title2)
                    .fontWeight(.semibold)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.purple)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            }
        }
    }
}

struct DetailView3: View {
    @EnvironmentObject var navigationManager: NavigationManager
    
    var body: some View {
        Text("3번 뷰입니다.")
            .font(.largeTitle)
            .fontWeight(.bold)
            .padding(.top, 50)
        
        Button {
            // TODO: 루트로 이동하기
            navigationManager.poptoRoot()
        } label: {
            Text("루트로 이동하기")
                .font(.title2)
                .fontWeight(.semibold)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.purple)
                .foregroundColor(.white)
                .cornerRadius(10)
                .padding(.horizontal)
        }
    }
}

struct DetailView4: View {
    @EnvironmentObject var navigationManager: NavigationManager
    
    var body: some View {
        Text("4번 뷰 입니다.")
            .font(.largeTitle)
            .fontWeight(.bold)
            .padding(.top, 50)
        
        Button {
            // TODO: 뒤로 가기
            navigationManager.pop()
        } label: {
            Text("뒤로 가기 없이 뒤로가기?")
                .font(.title2)
                .fontWeight(.semibold)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.purple)
                .foregroundColor(.white)
                .cornerRadius(10)
                .padding(.horizontal)
        }
    }
}

#Preview {
    ContentView()
}

[salgilbarana]

✏️ Topic 4. 만약 각 화면에 상태를 바인딩하려면

// 모델
struct Gus: Identifiable, Hashable {
    var id: UUID 
    var name: String

   init(name: String = "") {
         self.id = UUID()
         self.name = name
   }
}

import SwiftUI

// Hashable 추가 
enum ViewType: Hashable {
    case .one
    case .two
    case .three
    case .four(gus: Gus)
}

struct ContentView: View {
    @State private var gus: [Gus] = [Gus(name:"아임 유얼"), Gus(name:"빠더")]
    @StateObject private var navigationManager = NavigationManager()

    var body: some View {
        NavigationStack(path: $navigationManager.path) {
            List {
                ForEach(gus) { g in
                     navigationManager.navigate(to: .four(gus:g))
                            } label: {
                                 Text("4번 화면으로 가기")
                            }
            }
            .navigationDestination(for: ViewType.self) { viewType in
                switch viewType {
                case .one:
                   DetailView1(gus: $gus)
                case .two:
                    DetailView2()
                case .three:
                   DetailView3()
                case .four(let friend):
                    DetailView4(friend: friend)
                }
            }
        }
    }
}

struct DetailView1: View {
    @Binding var gus: [Friend]

    var body: some View {
        List {
            ForEach(friends) { friend in
                Text(friend.name)
            }
        }
    }
}

struct DetailView4: View {
    @EnvironmentObject var navigationManager: NavigationManager
    @Binding var gus: Gus
    
    var body: some View {
        Text("4번 뷰 입니다. :  \(gus.name)")
            .font(.largeTitle)
            .fontWeight(.bold)
            .padding(.top, 50)
    }
}

[luminouxx]

ㅋㅋㅋㅋㅋ
아임 유얼 파더....

[hkwangro]

하 ..✨ 감사합니다!!