[SwiftUI] 상태 프로퍼티와 상태 바인딩

상태 프로퍼티와 상태 바인딩

SwiftUI는 데이터 변경에 따른 뷰들의 업데이트 방식을 대표적으로 세가지 방식으로 지원한다.

• 상태 프로퍼티
• Observable 객체
• Environment 객체

여기서는 상태 프로퍼티에 대해서 알아본다.

상태 프로퍼티 - @State

상태 프로퍼티는 뷰의 상태에 대한 가장 기본적인 형태이다. 상태 프로퍼티의 값이 변경되면 SwiftUI는 뷰를 다시 재랜더링하여 보여준다. 그렇다면 왜 상태 프로퍼티를 사용하는 것일까. 어느 두개의 뷰가 있고 서로 바인딩 되어 있다고 해보자. 어느 하나의 뷰에서 특정 프로퍼티의 값이 바뀔 때마다 다른 한 뷰도 실시간으로 업데이트 되어야 할 때가 있는데 이때 사용하는 것이다. 상태 프로퍼티의 선언은 @State 프로퍼티 래퍼를 사용하며, 상태 프로퍼티의 값이 바뀔때마다 바인딩된 모든 뷰들 역시 재랜더링 된다. 한편, 상태 값은 해당 뷰에 대한 것이기 때문에 private 프로퍼티로 선언되어야 한다.

import SwiftUI

struct ExampleView: View {
    @State private var text: String
    
    var body: some View {
        VStack(alignment: .center){
            Button(action: {
                text = text + "a" // 버튼 누를 때마다 끝에 'a'추가
            }, label: {
                Text("\(text)")
                    .frame(width: 120, height: 60)
                    .foregroundColor(.white)
                    .background(Color.blue)
            })
            
            // 상태 프로퍼티에 대한 바인딩 전달
            TestView(text: $text) // 수정할때 마다 버튼 글자도 실시간으로 반영
        }
    }
}

상태 바인딩 - @Binding

상태 프로퍼티에 대한 바인딩을 다른 뷰에 전달하면 그 뷰도 바인딩을 전달 받을 @Binding 프로퍼티가 있어야 한다. 아래 코드에서 보이듯이 text는 @Binding 프로퍼티로 선언되었고 text의 값이 변할 때 마다 바인딩된 모든 뷰들이 재랜더링되어 뷰가 업데이트 될것이다.

import SwiftUI

struct TestView: View {
    @Binding var text: String
    
    var body: some View {
       TextField("input..", text: $text)
    }
}