💡 subview를 사용할 때, @State를 @Binding 유형의 subview에 전달할 수 있다. 이 방법으로 서브뷰에서 @State에 대한 변경사항이나 업데이트 관찰이 가능하다.
TextField를 별도의 서브뷰로 추출할 때, 데이터를 어떻게 subview에 바인딩할 수 있을까?
import SwiftUI
struct TextFields {
var firstField: String
var secondField: String
}
struct ContentView: View {
@State private var textField = TextFields(firstField: "첫번째", secondField: "두번째")
var body: some View {
NavigationView {
VStack {
Text("텍스트 필드에 텍스트 입력하기")
.fontWeight(.bold)
.font(.headline)
NavigationLink {
EditTextView(textField: $textField)
} label: {
Text("텍스트 입력을 위해 이동")
.font(.headline)
.padding()
.background(Color.cyan)
}
}
.navigationTitle("Binding")
.navigationBarTitleDisplayMode(.large)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
// MARK: - SubView
struct EditTextView: View {
@Binding var textField: TextFields
var body: some View {
Group {
TextField("첫번째 입력", text: $textField.firstField)
.textFieldStyle(RoundedBorderTextFieldStyle())
TextField("두번째 입력", text: $textField.secondField)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
.padding(.horizontal)
}
}
import SwiftUI
struct Person: Identifiable {
var id = UUID()
var firstName = ""
var lastName = ""
}
struct BindingWithList: View {
@State private var people = [
Person(firstName: "애플", lastName: "미"),
Person(firstName: "삼성", lastName: "한"),
Person(firstName: "샤오미", lastName: "중")
]
var body: some View {
NavigationView {
VStack {
List(people) { person in
NavigationLink {
EditPersonView(person: $people[people.firstIndex(where: { $0.id == person.id})!])
} label: {
Text("\(person.firstName + " " + person.lastName)")
}
}
}
.navigationTitle("이름 수정하기")
.navigationBarTitleDisplayMode(.large)
}
}
}
struct BindingWithList_Previews: PreviewProvider {
static var previews: some View {
BindingWithList()
}
}
struct EditPersonView: View {
@Binding var person: Person
var body: some View {
VStack(spacing: 20) {
Group {
TextField("이름", text: $person.firstName)
.textFieldStyle(RoundedBorderTextFieldStyle())
TextField("성", text: $person.lastName)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
.font(.title2)
.foregroundColor(.gray)
.padding(.horizontal)
}
}
}