[SwiftUI/TCA] Binding

	SwiftUI	TCA
장점	- State 의 변경 -> UI에 즉시 반영 - 코드 작성이 간단함	- State 변경 로직 관리 용이 - 복잡한 State와 이에 따른 Side Effect 처리 용이
단점	- State 관리가 복잡해 질수록 State 변화에 따른 side effect를 관리하기 어려움	- 어려운 구현 난이도 🥊 😫

 

 

TCA Binding

  public func binding<Value>(
    get: @escaping (_ state: ViewState) -> Value,
    send valueToAction: @escaping (_ value: Value) -> ViewAction
  ) -> Binding<Value> {
    ObservedObject(wrappedValue: self)
      .projectedValue[get: .init(rawValue: get), send: .init(rawValue: valueToAction)]
  }

• get : State를 바인딩의 값으로 변환하도록 하는 클로저
• send : 바인딩의 값을 다시 Store에 피드백 하는 Action으로 변환하는 클로저

SwiftUI에서 ChildView에게 Binding<Value>를 전달할 때가 있는데 위 binding<Value>는 그 때 사용하는 것

Text("쿠폰")
.padding(.leading, 10)
VStack {
    TextField("프로모션 코드를 입력해 주세요.", text: .constant(""))
}
.padding()
.border(.black, width: 1)
.padding(.horizontal, 10)

(text에 Binding<String>으로 상위 State를 전달하게 되는데 이때의 State는 어떻게 관리할 것인가에 관한것)

 

binding(get:send:) 사용 하는 법

    struct State: Equatable {
        var couponCode = ""
        // 생략
    }

State에 텍스트필드에 바인딩 할 프로퍼티를 정의

 

    enum Action: Equatable {
        case couponCodeInserted(String)
    }

View에서 텍스트 필드를 통해 텍스트를 입력하면 Store가 아닌 Store 외부에 있는 TextField 내부에서 State를 조정하게 됨

이때의 Action을 정의

 

        Reduce { state, action in
            switch action {
            case .couponCodeInserted(let code):
                state.couponCode = code
                return .none
            }
        }

reducer에서 Action에 대한 결과로 State의 값을 변경

 

VStack {
    TextField("프로모션 코드를 입력해 주세요.", 
    text: viewStore.binding(
        get: \.couponCode,
        send: { .couponCodeInserted($0) }
    ))}
.padding()
.border(.black, width: 1)
.padding(.horizontal, 10)

• TextField의 Binding<String>으로 넘겨준다. 이때 Store의 binding(get:send:)를 사용
• viewStore.binding(get:send:)에서 get에 전달된 객체 바인딩 하여 text에 전달, send에 전달된 Action을 Store에 다시 피드백, 이후 해당 Action에 해당하는 reducer 로직이 실행
• get으로 State, send로 Action
• 이벤트를 단방향 통신으로 바꾸고 State와 사이드 이펙트를 관리할 수 있게 됨

binding(get:send)의 단점

• 각 서브 뷰에서 State를 관리하는 방식이 아니기 때문에 비즈니스 로직이 더 크고 복잡해 질 수록 많은 바인딩 코드가 작성되며 reducer의 관리가 복잡해 짐. 
• 가독성이 나빠지고 반복되는 코드 작업이 필요하게 됨

 

@BindingState

• @BindingState를 사용하면 SwiftUI의 UI 컨트롤에 바인딩 가능
• View에서 해당 필드 값 조정 가능
•  View에서 해당 필드 값을 변경할 수 없도록 하려면 @BindingState를 붙이지 않아야 함
  • SwiftUI에서 Binding은 State를 다른 뷰와 공유하는 개념이기 때문에 Source of Truth 관리가 어려워진다. 따라서 모든 필드에 @BindingState를 사용하는건 권장되지 않음 (캡슐화 손상)
  • 컴포넌트에 전달하기 위한 필드에만 사용

    struct State: Equatable {
        @BindingState var isToggled = false
    }

 

BindableAction protocol

    enum Action: BindableAction, Equatable {
        case binding(BindingAction<State>)
    }

 

• Action enum에 BindableAction 프로토콜 채택
• BindingState를 사용한 필드는 이 하나의 Action에 연결됨 

struct BindingAction<Root>: CasePathable, Equatable, @unchecked Sendable

• 하나의 Action case가 여러 BindingState에 대응할 수 있게 하기 위해 제네릭 타입을 가짐
• 제네릭 타입은 reducer의 State

associatedtype State

• bindable 내에는 State 타입을 제네릭으로 받기 위해 associatedtype으로 State가 정의되어 있음(바인딩을 위한 상태 값의 타입은 여러가지가 올 수 있음)

 

BindingReducer

    var body: some ReducerOf<Self> {
        BindingReducer()

• reducer에는 BindingReducer를 사용해서 State 변경을 간단하게 할 수 있음
• Binding action이 수신되면 State를 업데이트 해주는 reducer
• Store 내부 바인딩 가능한 State(예시 코드에서는isToggled) 필드가 업데이트 되면 BindingReducer()가 업데이트 된 필드 값과 함께 Action 수신 후 Reducer 클로저 내에 도메인 로직 처리하여 State에 결과 반영
• State와 Action 사이를 바인딩 하는 역활

Reduce { state, action in

• action이 BindableAction을 따르게 됨

static func binding(_ action: BindingAction<State>) -> Self

• BindableAction의 위 메서드는 BindingAction을 반환 
• BindingState로 정의한 State를 지정해주면 됨

            case .binding(\.$isToggled):
                return .none
            case .binding(_):
                return .none

• Effect를 반환하는 Reduce 클로저에는 case .bindg(_) 에서 정의해 주며 키패스를 사용해서 접근
• .binding(_) 도 적어주어야 함

BindingState 프로퍼티 래퍼의 사용

Toggle("test 입니다.", isOn: viewStore.$isToggled)

 

._printChanges()

received action:
  ProductDetailFeature.Action.amountControl(.plusButtonTapped)
  ProductDetailFeature.State(
-   productAmount: 1,
+   productAmount: 2,
-   amountControl: AmountControl.State(amount: 1)
+   amountControl: AmountControl.State(amount: 2)
    _isToggled: true
  )

• 바인딩 프로퍼티는 언더바로 표시됨

View State Binding

• Store 외부에 있는 View State를 바인딩하기 위해서 BindingViewState 프로퍼티 래퍼를 사용

 

struct CartButton: View { }

 

• Child View 혹은 Sub View를 만들면 Binding을 통해서 값을 공유해야 하는 상황이 발생하게 되는데 이때 BindingViewState를 사용할 수 있음

let store: StoreOf<ProductDetailFeature>

• 하위뷰에 상위 스토어를 정의해 주고 init 시점에 전달 받음

    struct ViewState: Equatable {
        @BindingViewState var productAmount: Int
    }

• ViewState를 구조체를 만들고 바인딩이 필요한 값을 정의 해줌

    var body: some View {
        WithViewStore(store, observe: { bindingViewStore in
            ViewState(productAmount: bindingViewStore.$productAmount)
        }) { viewStore in
            ZStack(alignment: .bottomLeading) {
                Image(systemName: "cart")
                    .foregroundStyle(.green)
                    .font(.system(size: 30))
                
                if viewStore.productAmount > 0 {
                    Circle()
                        .frame(width: 20, height: 20)
                        .foregroundStyle(.red)
                        .overlay(
                            Text("\(viewStore.productAmount)")
                                .foregroundStyle(.white)
                                .fontWeight(.heavy)
                        )
                        .offset(x: -5, y: 8)
                }
            }
            .frame(width: 50, height: 50)
        }
    }

• 상위 State에서 전달 받은 값 중에 하위 뷰에서만 사용할 값을 지정하기 위해서 WithViewStore의 observe 파라미터를 지정해 줌
• BindingViewStore을 사용해서 상위 뷰의 모든 값에 접근하는 것이 아닌 필요한 값만 공유할 수 있음
• ViewState에서 BindingViewState로 지정한 값과 상위 ViewStore로 부터 전달 받은 State를 바인딩 해줌

CartButton(store: self.store)

• 상위뷰에서 하위뷰를 사용할 때는 store를 전달해 주면 된다.

 

Pixabay 로부터 입수된&nbsp; Tim Mossholder 님의 이미지 입니다.