KoreaMango 나무

[iOS App Dev Tutorials] SwiftUI - Passing Data (2) 본문

iOS/iOS App Dev Tutorials

[iOS App Dev Tutorials] SwiftUI - Passing Data (2)

KoreaMango 2022. 5. 12. 01:04
 

Apple Developer Documentation

 

developer.apple.com

Section 3. Pass the Edit View a Binding to Data

struct DetailEditView: View {
    @Binding var data: DailyScrum.Data
		...
}

struct DetailEditView_Previews: PreviewProvider {
    static var previews: some View {
        DetailEditView(data: .constant(DailyScrum.sampleData[0].data))
    }
}

DetailView에서 State 변수를 받기 위해 Binding으로 data 를 선언한다.

 

struct DetailView: View {
    @Binding var scrum: DailyScrum
    
    @State private var data = DailyScrum.Data()
		...
		
		.sheet(isPresented: $isPresentingEditView) {
      NavigationView {
          DetailEditView(data: $data)
              .navigationTitle(scrum.title)
              .toolbar {
                  ToolbarItem(placement: .cancellationAction) {
                      Button("Cancel") {
                          isPresentingEditView = false
                      }
                  }
                  ToolbarItem(placement: .confirmationAction) {
                      Button("Done") {
                          isPresentingEditView = false
                          scrum.update(from: data)
                      }
                  }
              }
      }
}

DetailEditView의 상위 뷰인 DetailView에서 State data 선언한다.

DetailEditView를 선언하고 넘겨주는 Binding 매개변수에 $를 붙여 data를 넘겨준다.

 

DetailView의 상위 뷰인 ScrumView에서 scrum을 받아오기 위해서 scrum도 Binding 으로 설정해준다.

 

Section 4. Pass a Binding into the Detail View

struct ScrumsView: View {
    @Binding var scrums: [DailyScrum]
    
    var body: some View {
        List {
            ForEach($scrums) { $scrum in
                NavigationLink(destination: DetailView(scrum: $scrum)) {
                    CardView(scrum: scrum)
                }
                .listRowBackground(scrum.theme.mainColor)
            }
        }
        .navigationTitle("Daily Scrums")
        .toolbar {
            Button(action: {}) {
                Image(systemName: "plus")
            }
            .accessibilityLabel("New Scrum")
        }
    }
}

struct ScrumsView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ScrumsView(scrums: .constant(DailyScrum.sampleData))
        }
    }
}

ScrumdingerApp에서 scrum을 받아오기 위해 여기도 Binding을 해준다.

DetailView에 Binding 매개변수에 값을 줄 때 똑같이 $를 붙여 데이터를 전달한다.

여기서 또 한번 느낀 것인데, View에 Binding 변수가 생기면 Preview에 전달되는 매개변수에는

constant를 붙인다.

 

참고

  • You can use the constant(_:) type method to create a binding to a hard-coded, immutable value. Constant bindings are useful in previews or when prototyping your app’s UI.
  • Pass a constant binding to initialize a theme picker in the preview.

 

Section 5. Pass a Binding into the List View

@main
struct ScrumdingerApp: App {
    @State private var scrums = DailyScrum.sampleData
    var body: some Scene {
        WindowGroup {
            NavigationView {
                ScrumsView(scrums: DailyScrum.sampleData)
            }
        }
    }
}

앱의 진입점과 구조를 정의하는 App 부분에 @State scrum을 선언한다.

 

계층 데이터

@State와 @Binding 으로 값 타입에 대한 단일 진실 소스를 만들고 다른 View와 공유를 할 수 있다.

상위에서 State 를 선언해 Binding으로 계층적으로 데이터를 전달할 수 있다.