SwiftUI - TCA Binding

안녕하세요 !

이번에는 TCA Binding 주제로 간단하게 작성해보겠습니다

TCA에서 Binding을 어떻게 활용하는지, 그리고 이를 통해 어떻게 SwiftUI의 양방향 데이터 바인딩을 TCA의 단방향 데이터 흐름과 함께 사용 할 수 있는지 알아보겠습니다

TCA에서의 Binding

TCA는 기본적으로 단방향 데이터 흐름을 따르지만, SwiftUI의 양방향 바인딩과도 잘 작동할 수 있도록 설계되었습니다. TCA에서 Binding을 사용하기 위해서는 BindingState와 BindingAction을 활용 할 수 있습니다

import ComposableArchitecture

struct Feature: Reducer {
  struct State: Equatable {
    @BindingState var text = ""
    var count = 0
  }

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

  var body: some ReducerOf<Self> {
    BindingReducer()
    Reduce { state, action in
      switch action {
      case .binding:
        return .none
      case .incrementButtonTapped:
        state.count += 1
        return .none
      }
    }
  }
}

예제설명

• @BindingState는 SwiftUI의 양방향 바인딩과 호환되는 상태를 정의
• BindableAction은 바인딩 관련 액션을 자동으로 처리할 수 있게 해줌
• BindingReducer()는 바인딩 관련 액션을 자동으로 처리하는 리듀서입니다

Binding 사용하기

struct FeatureView: View {
  let store: StoreOf<Feature>

  var body: some View {
    WithViewStore(self.store, observe: { $0 }) { viewStore in
      VStack {
        TextField("Enter text", text: viewStore.$text)
        Text("Character count: \(viewStore.text.count)")
        Text("Button tapped \(viewStore.count) times")
        Button("Increment") {
          viewStore.send(.incrementButtonTapped)
        }
      }
    }
  }
}

@BindingState -> viewStore.$text는 SwiftUI의 양방향 바인딩

TextField에 텍스트를 입력하면 자동으로 Feature의 상태가 업데이트

예를 들어, TextField에 "Hello"를 입력하면 다음과 같은 과정이 일어납니다:

1. SwiftUI가 텍스트 변경을 감지
2. .binding(.set(.$text, "Hello")) 액션을 생성
3. BindingReducer가 이 액션을 처리하여 state.text를 "Hello"로 업데이트
4. 상태 변경으로 인해 뷰가 다시 렌더링

이상으로 포스팅 마무리 하겠습니다.

.
.
.

감사합니다.