[SwiftUI] 데이터 바인딩 (1/5) @State

 

 

 

데이터바인딩

데이터 바인딩(data binding)은 제공자와 소비자로부터 데이터 원본을 결합시켜 이것들을 동기화하는 기법이다.

라고 위키백과가 말하는데, 쉽게말해

SwiftUI에서 데이터 바인딩은 view에 보여줄 데이터를 연결하는 작업이라고 생각하면 될 것 같습니다.

바인딩하는 데이터의 종류는 다양하고 그 용도가 다 다르기 때문에 바인딩 하는 방법도 다양합니다.

 

 

IOS 프로그래밍을 할 때 swift에서 익히 사용하던대로 프로퍼티를 선언하고 수정하면 에러가 나는것을 볼 수 있다.

그 이유와 대체 키워드인 @State에 대해서 알아보자

왜 에러가 나는가?

아래 코드는 기본적인 ContentView 형태로 버튼을 누르면 str의 값을 변경하는 코드입니다.

하지만 아래 코드는 에러가 발생합니다.

struct ContentView: View {
    var str = "A"
    
    var body: some View {
        VStack{
            Text(str)
            Button("B로 변경"){
                str = "B"
            }
        }
    }
}

swiftUI에서 View는 struct로 되어있습니다.

구조체는 말 그대로 구조체이기 때문에  내부에서 프로퍼티를 변경하는 것이 불가능 하므로 에러가 납니다 !!

 

이 문제를 해결하기 위해 @State가 필요한데요,

@State

SwiftUI에서 값을 읽고 쓸 수 있는 어쩌구 저쩌구 라고 되어 있는데,

@State는 프로퍼티의 값을 변화할 수 있고 변할 때 마다 View를 업데이트 합니다. 프로퍼티 앞에 @State만 붙여주면 됨

@State var str = "A"

💡 @State는 private이고 다른 View와 공유되지 않습니다.

 

위에서 에러가 났던 코드를 다시 작성하면,

struct ContentView: View {
    @State var str = "A"
    
    var body: some View {
        VStack{
            Text(str)
            Button("B로 변경"){
                str = "B"
            }
        }
    }
}

 

왼 : 버튼 클릭전 / 오 : 버튼 클릭후

 

Binding<String>

주로 사용자가 해당 데이터에 직접 접근해야하는 경우 사용합니다. (ex. Toggle, TextEditer, TextField ...)

예시로 토글 버튼을 사용할 때 isOn 파라미터에 대해서 Binding 값을 넣어주어야 합니다.

바인딩할 프로퍼티 앞에 $(달러) 표시를 붙여주면 됩니다.

struct ContentView: View {
    
    @State var toggle = false
    
    var body: some View {
        VStack{
            Text(toggle.description)
            Toggle("토글버튼", isOn: $toggle)
        }
    }
}