@State and @Binding

@State

- View의 로컬 상태를 정의하고 관리하기 위해 사용 

- 뷰 내에서 어떤 값이 자주 변경되지만, 그 값이 그 뷰에서만 사용될 때 

 

* View를 로컬 상태로 정의한다?

- 로컬: "이 뷰"에만 관련된다는 의미. 즉, 다른 화면이나 앱의 다른 부분에서는 해당 뷰의 데이터 변화를 신경쓰지 않아도 됨

- 상태: 변화할 수 있는 정보

- 정의한다: 이 뷰에서 데이터가 어떻게 시작되고 어떻게 변화하는지 결정 

→ 뷰가 해당 뷰에서만 중요한 정보(상태)를 관리하고, 그 상태가 어떻게 변화할지를 정한다는 의미!

 

- @State로 선언된 변수를 통해 해당 뷰가 Single Source of Truth가 됨!

→ 그 뷰가 State의 원본이자 소유자. State는 해당 뷰 내에서만 유지되며 다른 곳에서 직접 접근할 수 없음 

 

@Binding

- State를 여러 뷰에서 공유할 때 사용 

- State의 Single Source of Truth를 유지하면서도, 하위 뷰가 상위 뷰의 상태를 수정할 수 있도록 함 

- @Binding은 실제 상태 값을 소유하지 않고, 다른 뷰에서 관리되는 @State의 참조(reference)

→ 원본 상태의 복제를 방지하고, Single Source of Truth의 원칙을 유지  

 

 

import SwiftUI

struct ParentView: View {
    // text는 ParentView에서 관리되는 상태 
    @State private var text: String = "Hello, World!" // Single Source of Truth

    var body: some View {
        VStack {
            Text("Parent View: \(text)")
            ChildView(text: $text) // @Binding을 통해 상태를 하위 뷰에 전달
        }
    }
}

struct ChildView: View {
    // @Binding을 통해 ParentView의 text 상태에 대한 참조를 받음 
    // 상태는 여전히 ParentView에서 관리되지만 ChildView에서 수정될 수 있음  
    @Binding var text: String // @Binding으로 전달된 상태

    var body: some View {
        TextField("Enter text", text: $text) // TextField에서 상태를 수정
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
    }
}

 

- 상태는 한 곳(ParentView)에서만 관리되며, 중복없이 여러 뷰(ChildView)에서 사용할 수 있음 

→ Single Source of Truth의 원칙을 유지하면서 뷰 간의 상태 공유를 가능하게 함 

 

---

[참조 자료]

Data Flow Through SwiftUI - WWDC19 - Videos - Apple Developer