SwiftUI의 @Binding이란?

@Binding은 SwiftUI에서 뷰 간에 상태를 공유할 때 사용하는 속성 래퍼입니다. SwiftUI에서 상태를 관리할 때, 기본적으로는 @State를 사용하여 해당 뷰 내에서 상태를 관리하지만, 다른 뷰에서도 그 상태를 읽거나 수정할 수 있게 하려면 @Binding을 사용해야 합니다.

기본 개념

• @State: 뷰 내부에서만 사용되는 상태 관리. 상태를 소유한 뷰에서만 직접 상태를 변경할 수 있습니다.
• @Binding: 다른 뷰의 상태를 참조(binding)하여, 해당 상태를 읽고 수정할 수 있게 합니다. 즉, @Binding은 특정 상태에 대한 읽기/쓰기 접근 권한을 하위 뷰에게 전달해 줍니다.

사용 시나리오

@Binding은 상태를 소유한 뷰가 아닌 하위 뷰에서도 해당 상태를 수정하거나 참조할 수 있도록 할 때 사용됩니다. 주로 상위 뷰가 상태를 소유하고, 하위 뷰에서 그 상태를 참조하거나 수정할 때 유용합니다.

동작 방식

1. 상위 뷰에서 상태를 소유하고, 그 상태를 @Binding을 통해 하위 뷰로 전달합니다.
2. 하위 뷰에서는 @Binding을 통해 전달된 상태를 사용하여 UI를 변경하거나 상태를 수정합니다.

상위 뷰에서 @State로 선언한 변수를 하위 뷰에 전달할 때, $를 사용하여 바인딩을 전달합니다.

예시

1. 상위 뷰 (@State 사용)

struct ParentView: View {
    @State private var backgroundColor: Color = .green
    
    var body: some View {
        VStack {
            ChildView(backgroundColor: $backgroundColor) // @Binding 전달
        }
        .background(backgroundColor.ignoresSafeArea())
    }
}

2. 하위 뷰 (@Binding 사용)

struct ChildView: View {
    @Binding var backgroundColor: Color // 상위 뷰에서 전달된 바인딩
    
    var body: some View {
        Button("Change Background Color") {
            backgroundColor = .blue // 상태 수정
        }
        .padding()
    }
}

설명

• @State: ParentView에서 backgroundColor는 @State로 선언되어 상위 뷰의 상태로 관리됩니다.
• @Binding: ChildView에서는 @Binding을 사용해 상위 뷰로부터 전달된 backgroundColor에 대한 참조를 받습니다. 이 참조를 통해 하위 뷰에서 상위 뷰의 상태를 변경할 수 있습니다.
• $ 연산자: ParentView에서 ChildView로 전달할 때, $backgroundColor를 사용하여 바인딩을 전달합니다. $는 상태의 참조를 의미합니다.

동작 흐름

1. ParentView는 @State로 backgroundColor 상태를 관리합니다.
2. ChildView는 @Binding으로 ParentView의 backgroundColor에 대한 참조를 받습니다.
3. ChildView에서 버튼을 눌러 backgroundColor를 변경하면, 상위 뷰의 상태가 변경되며, SwiftUI는 이 상태 변화를 감지하고 UI를 다시 렌더링합니다.

@Binding을 사용하는 이유

• 상태 공유: 뷰 간에 상태를 공유하여 UI와 상태가 동기화되도록 합니다. 하위 뷰에서도 상위 뷰의 상태를 변경할 수 있도록 함으로써, UI의 일관성을 유지할 수 있습니다.
• 데이터 흐름 제어: @Binding을 통해 뷰들 간에 데이터를 읽고 쓸 수 있지만, 상태의 소유자는 여전히 상위 뷰로 유지됩니다. 이는 상위 뷰가 상태를 제어하고 하위 뷰는 필요한 부분만 다루도록 해, 데이터 흐름을 명확히 합니다.

결론

• @State는 뷰의 상태를 관리하는 데 사용되고, 해당 상태는 뷰 내부에서만 변경 가능합니다.
• @Binding은 그 상태를 다른 뷰에서도 참조하고 변경할 수 있게 해 줍니다.
• 이를 통해 SwiftUI는 데이터의 일관성을 유지하면서 다양한 뷰 간에 상태를 공유할 수 있게 도와줍니다.