iOS ๐ŸŽ/SwiftUI

[SwiftUI] NavigationStack

fram 2023. 3. 21. 01:17

์ฐธ๊ณ  ์‚ฌ์ดํŠธ ๋ฐ ์ถœ์ฒ˜

https://www.youtube.com/watch?v=ZQXzZ1hxQwo 

 

์œ„ ์›๋ณธ ์˜์ƒ์„ ์ฐธ๊ณ  ํ•˜์‹œ๋ฉด ๋” ์ž์„ธํžˆ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! ์œ„ ์˜์ƒ์ด ์žˆ์–ด ํ•ด๋‹น ํฌ์ŠคํŒ…์€ ๊ณต๋ถ€ํ•˜๋‹ค ์•Œ๊ฒŒ๋œ ์ ๋งŒ ์ ์–ด ๋†“์•˜์Šต๋‹ˆ๋‹ค.

 

NavigationLink

NavigationLink๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋„ค๋น„๊ฒŒ์ด์…˜ ์Šคํƒ์„ ์Œ“์„ ์ˆ˜ ์žˆ์Œ

        NavigationView {
            VStack {
                NavigationLink(value: <#T##Hashable?#>, label: <#T##() -> View#>)
            }
            .padding()
        }
  • value ๋Š” ์ด๋™ ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋งํฌ๋ฅผ ๊ฑธ ๋ทฐ, label์€ ์Šคํƒ์œผ๋กœ ์Œ“์„ ๋ทฐ๋ฅผ ํด๋กœ์ €๋กœ ์ „๋‹ฌ
        NavigationView {
            VStack {
                NavigationLink {
                    Text("๋‘ ๋ฒˆ์งธ ๋ทฐ")
                } label: {
                    Text("์ฒซ ๋ฒˆ์งธ ๋ทฐ")
                }
            }
            .padding()
        }

(์•„๋‹ˆ ๋ฒ„ํŠผ๋„ ์•„๋‹ˆ๊ณ  ํ…์ŠคํŠธ ๋ทฐ์— ๋งํฌ ๊ฑธ๋ฆฌ๋Š”๊ฒŒ ๋„ˆ๋ฌด ์‹ ๊ธฐํ•˜๋‹ค)

 

NavigationStack

    var body: some View {
        NavigationStack {
  
        }
    }
  • NavigationStack์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ์ดํ„ฐ drivenํ•œ Navigation์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ
        NavigationStack {
            List {
                Section("Manufacturerers") {
                    ForEach(brands) { brand in
                        NavigationLink(value: brand) { // value based
                            Text(brand.name)
                        }
                    }
                }
            }
            .navigationDestination(for: CarBrand.self) { brand in
                Text("New \(brand.name)")
            }
        }
  • NavigationStack์•ˆ์—์„œ NavigationLink๋ฅผ ํฌํ•จ์‹œํ‚ค๊ณ  NavigationLink๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ์ด๋™ํ•  ๋ทฐ๋Š” navigationDestination์—์„œ ์„ค์ •ํ•ด ์คŒ 

 

  • ์„œ๋กœ ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ๋‹ค๋ฅธ ๋ทฐ๋กœ ์—ฐ๊ฒฐํ•˜๊ธฐ
        NavigationStack {
			// ์ƒ๋žต
            .navigationDestination(for: CarBrand.self) { brand in
                Text("New \(brand.name)")
            }
            .navigationDestination(for: Car.self) { car in
                Color(.systemRed)
            }
        }
  • navigationDestination์„ ์ถ”๊ฐ€ํ•ด์„œ ํƒ€์ž… ๋ณ„๋กœ ๋ทฐ๋ฅผ ์—ฐ๊ฒฐํ•ด ์ค„ ์ˆ˜ ์žˆ์Œ

NavigationPath

@State private var navigationPath = [CarBrand]()
  • ๋ฆฌ์ŠคํŠธ๋ฅผ ์„ ์–ธํ•ด ์คŒ
 NavigationStack(path: $navigationPath) {
 // ์ƒ๋žต
  • NavigationStack์˜ path ์ธ์ž๋กœ ๋ฐ”์ธ๋”ฉ ํ•ด์คŒ(two-way binding)
navigationPath = []
  • path์— ๋นˆ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ rootView๋กœ ์ด๋™ํ•จ (UINavigationViewController ์—์„œ popToRootViewController์™€ ๊ฐ™์Œ)
  • ํŠน์ • ๊ฐ’์ด ์กด์žฌํ•˜๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ ๊ทธ ๊ฐ’๊ณผ ๋งค์น˜๋˜๋Š” ๋ทฐ๋ฅผ Stack์— ์Œ“์Œ