How to create custom bindings

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-custom-bindings]

 

How to create custom bindings

 

SwiftUI의 @State 프로퍼티 래퍼(property wrapper)를 사용할때 사용자 인터페이스 제어를 위해 양방향 바인딩을 허용하기 위해 우리를 대신해서 많은 일을 합니다. 하지만, 직접 Binding 타입을 사용해서 바인딩을 만들 수 있으며, 값을 읽고 쓸때 실행하기 위한 사용자정의 get과 set 클로져를 제공할 수 있습니다.

 

예를들어, 또다른 프로퍼티를 거쳐가는(passthrough) 역할을 하는 사소한 바인등을 만듭니다.

struct ContentView: View {
    @State private var username = ""

    var body: some View {
        let binding = Binding(
            get: { self.username },
            set: { self.username = $0 }
        )

        return VStack {
            TextField("Enter your name", text: binding)
        }
    }
}

 

팁 : 사용자정의 Binding 인스턴스를 바인딩 할때, 달러($) 기호를 바인딩 이름 앞에 사용할 필요가 없습니다 - 이미 양방향 바인딩을 읽었습니다. 

 

사용자정의 바인딩은 읽거나 쓰는 바인딩에 추가적인 로직을 추가할때 유용합니다 - 값을 다시 보내기 전에 계산을 수행하길 원하거나, 값이 변경될때 추가 동작을 하길 원할 수도 있습니다.

 

예를들어, 2개의 토글 스위치 스택을 만들 수 있으며, 두개 다 꺼져(off)있고 둘중 하나가 켜져(on) 있을수도 있지만, 동시에 둘다 켤수(on)는 없습니다 - 하나를 활성화하면 다른 하나는 비활성화합니다. 코드는 다음과 같습니다.

struct ContentView: View {
    @State private var firstToggle = false
    @State private var secondToggle = false

    var body: some View {
        let firstBinding = Binding(
            get: { self.firstToggle },
            set: {
                self.firstToggle = $0

                if $0 == true {
                    self.secondToggle = false
                }
            }
        )

        let secondBinding = Binding(
            get: { self.secondToggle },
            set: {
                self.secondToggle = $0

                if $0 == true {
                    self.firstToggle = false
                }
            }
        )

        return VStack {
            Toggle(isOn: firstBinding) {
                Text("First toggle")
            }

            Toggle(isOn: secondBinding) {
                Text("Second toggle")
            }
        }
    }
}