Bindings and forms

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/bindings-and-forms]

Bindings and forms

[동영상 강좌 : https://youtu.be/5UJCIymXmdU]

지금까지 우리는 사용자들이 메뉴를 탐색하고, 주문에 항목들을 추가하고나서, 전체 주문을 볼 수 있었습니다. 우리가 하지 않은 것은 주문을 확인하는 메카니즘이며, 그것이 다음에 해야 할 일입니다.

 

실제로 서버로 전송되는 것은 아니며, 적어도 이번 기회에 SwiftUI의 가장 인상깊은 기능 중 하나를 보여주고 싶습니다: forms

 

Forms는 목록과 같은 컨테이너이지만, 설정 화면과 사용자 입력용으로 특별히 설계되었습니다 - 어디서든지 사용자는 한번에 여러가지의 선택을 원할 수 있습니다. Forms는 약간 흥미로운 동작을 하며, 피커(pickers), 텍스트 필드(text fields), 세그먼트 컨트롤(segmented controls), 등과 같은 일반적인 UI 처리 방법을 보여줄 것입니다.

 

여러분이 무슨 생각을 하고 있는지 알고 있습니다: 확실히 텍스트 필드(text fields)가 쉬울까요? 글쎄요. 그것은 어렵지 않지만, UIKit에서 사용했던것 처럼 동작하지 않습니다.

 

이를 준비하고 실행하기 위해서 Place Order가 눌러질때 표현되어야 할 새로운 CheckoutView 구조체를 만들어 봅시다. 새로운 SwiftUI View를 추가하기 위해서 Cmd+N을 누르고 CheckoutView라고 입력하고 나서 다른 뷰와 동일하게 @EnvironmentObject 프로퍼티를 입력 하세요.

@EnvironmentObject var order: Order

 

뷰에 대한 미리보기를 제공하는 것도 마찬가지 입니다.

struct CheckoutView_Previews: PreviewProvider {
    static let order = Order()

    static var previews: some View {
        CheckoutView().environmentObject(order)
    }
}

 

그것은 쉬운게 아니며, 새로운 것을 시도해 봅시다: 사용자가 결제 옵션으로 현금, 신용카드, iDine 포인트를 고를수 있는 피커(picker)를 보여 줍시다.

 

이것은 2개의 새로운 프로퍼티가 필요합니다. 우선, 피커(picker)에서 보여주고자 하는 모든 값의 목록에 대한 프로퍼티가 필요합니다 - 다음을 추가하세요.

static let paymentTypes = ["Cash", "Credit Card", "iDine Points"]

 

두번째, SwiftUI가 피커(picker)에서 선택한 값을 저장할 프로퍼티가 필요합니다. UI가 변경될때 SwiftUI는 뷰를 업데이트 할수 있도록 그에 대해서 알고 싶어 합니다 - 예를들어, 숨겨진 뷰의 일부가 보여질지도 모릅니다. 직접 변경사항을 감시하는지 물어보는 대신에 구조체에 있는 프로퍼티에 피커(picker)를 bind해서, 피커가 변경될때 SwiftUI는 자동으로 그 프로피티를 변경합니다. 그리고 envirionment objects 처럼, SwiftUI가 body 프로퍼티를 다시 호출해서 변경사항을 보이도록 할 것입니다.

 

이미 외부 소스로부터 오는 데이터를 작업하기 위해@EnvironmentObject를 사용했습니다. 여기에서, 해당 데이터는 뷰에 대한 것이고, ObservableObject를 준수하는 전용 클래스 대신에 단순한 값이 될 것입니다. 

 

SwiftUI는 이러한 간단한 로컬 값을 위해 다른 프로퍼티 래퍼를 제공합니다: @State. 그것은 객체가 변경되면 자동으로 UI가 갱신되는@EnvironmentObject와 비슷하게 동작하지만, 정수형이나 문자열 같은 간단한 로컬 값으로 설계되었습니다 - Order 같은 클래스를 사용하려면 다른 것을 사용해야 합니다.

 

중요: 현재 뷰에서만 사용되는 간단한 값을 사용하길 원하는 경우에 프로퍼티 래퍼로 @State를 사용해야 합니다. Apple은 외부 접근에 대해 설계된 것이 아닌 것을 반복하기 위해, 이러한 프로퍼티들을 private로 표시하는 것을 권장합니다. 

 

CheckoutView에 다음 프로퍼티를 추가하세요.

@State private var paymentType = 0

 

피커(picker)를 사용해서 body 프로퍼티 안을 채워넣으세요. 모두 새로운 것이므로, 코드 먼저 입력하고 무엇을하는지 보세요.

var body: some View {
    VStack {
        Section {
            Picker("How do you want to pay?", selection: $paymentType) {
                ForEach(0 ..< Self.paymentTypes.count) {
                    Text(Self.paymentTypes[$0])
                }
            }
        }
    }
    .navigationBarTitle(Text("Payment"), displayMode: .inline)
}

자세히 살펴봅시다.

1. 하나의 섹션을 포함하는 수직 스택이 있습니다.

2. 해당 섹션은 피커(picker)를 포함하며, 선택에 $paymentType를 사용합니다.

3. 아직 보여지지 않은 라벨이 있지만, 곧 바뀌게 될 것입니다.

4. 피커(picker) 안쪽에서 모든 결제 타입을 반복하고 옵션으로 추가합니다.

5. 그 화면은 큰 제목이 아닌 작은 텍스트로된 제목 Payment입니다.

실제 질문은 다음과 같습니다: 왜 paymentType이 아니고 $paymentType 인가요?