SwiftUI의 @Binding

June·2023년 2월 2일
1

SwiftUI-Data

목록 보기
2/12
post-thumbnail

💡 subview를 사용할 때, @State를 @Binding 유형의 subview에 전달할 수 있다. 이 방법으로 서브뷰에서 @State에 대한 변경사항이나 업데이트 관찰이 가능하다.

ChildView에 대한 양방향 바인딩

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)
    }
}

List에서 @Binding 사용하기

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)
        }
    }
}
profile
안다고 착각하지 말기

0개의 댓글