SwiftUI) @State와 @Binding 란?

최대한 짧고 간결하게 요약하면

@State로 선언된 변수에 연결하기 위한 프로퍼티 래퍼가 @Binding 입니다.

하지만 밑도 끝도 없이 이렇게만 이야기하면 이해하기 쉽지 않습니다.

SwiftUI 에서의 데이터 흐름을 알게 되시면 쉽게 이해할 수 있습니다.

핵심 키워드는

단일원천자료 (Single Source of Truth) 입니다.

swiftUI를 이해하는데 있어 가장 중요한 키워드 같습니다. 동일한 데이터 요소가 여러곳에 나뉘어 중복되지 않고 한곳에서 다루어 지는 것입니다.

SwiftUI에서는 각 뷰에 데이터가 들어가게 됩니다.

예를 들어보겠습니다.

1. age라는 변수를 선언하고 나이를 저장합니다.
2. 앱을 구성하면서 여러 뷰를 사용하게 되고 각각 age 정보가 필요한 A, B, C뷰를 생성합니다.
3. ABC뷰 각각 age 정보가 필요합니다. 뷰 외부에 선언된 age 변수를 가져와 사용합니다.
4. A B C 뷰 각각 age를 정보를 표시한뒤 C 뷰에서 age변수의 값을 변경하면 A B뷰에서도 변경이 일어납니다.

즉, 원천 데이터가 유일하게 존재합니다.

이것을 도와주는 것이 @State 와 @Binding 입니다

처음 age를 선언할 때는 @State 를

@State var private age : Int = 32

age를 연결해 가져와 사용할 때는

@Binding var age : Int

이렇게 사용합니다.

다음 예제 입니다.

import SwiftUI

struct FirstView: View {
    @State private var isToggle : Bool = false
    var body: some View {
        VStack {
            Text("isToggle : \\(isToggle ? "true" : "false")")
            SecondView(isToggle: $isToggle)
        }
    }
}

struct SecondView: View {
    @Binding var isToggle : Bool
    var body: some View {
        Button {
            isToggle.toggle()
        } label: {
            ZStack{
                RoundedRectangle(cornerRadius: 5)
                    .fill(Color.cyan)
                Text("Toggle")
                    .foregroundColor(.white)
            }
            .frame(width: 150, height: 80)
        }
    }
}

FirstView와 SecondView에는 각각 isToggle이라는 변수가 @State 와 @Binding 을 통해서 연결되어있습니다.

SecondView에서 버튼을 tap하면 isToggle.toggle()이 실행되며

isToggle의 값이 true→false 로 false → true 로 변경되게 되며

FirstView에서의 Text안에 text의 변경이 실시간으로 자동으로 바뀌게 됩니다.

WWDC 2019, 2020 에서 설명입니다. 이해하는데 큰 도움이 되었습니다.

Data Flow Through SwiftUI - WWDC19 - Videos - Apple Developer

Data Essentials in SwiftUI - WWDC20 - Videos - Apple Developer

공식 문서 @Binding

Apple Developer Documentation

이상입니다. 🍎