[TCA] day 3 기본적인 Binding을 활용한 View만들기 (GettingStarted-Bindings-Basics)

코드 전문

import ComposableArchitecture
import SwiftUI

private let readMe = """
  This file demonstrates how to handle two-way bindings in the Composable Architecture.

  Two-way bindings in SwiftUI are powerful, but also go against the grain of the "unidirectional \
  data flow" of the Composable Architecture. This is because anything can mutate the value \
  whenever it wants.

  On the other hand, the Composable Architecture demands that mutations can only happen by sending \
  actions to the store, and this means there is only ever one place to see how the state of our \
  feature evolves, which is the reducer.

  Any SwiftUI component that requires a binding to do its job can be used in the Composable \
  Architecture. You can derive a binding from a store by taking a bindable store, chaining into a \
  property of state that renders the component, and calling the `sending` method with a key path \
  to an action to send when the component changes, which means you can keep using a unidirectional \
  style for your feature.
  """

@Reducer
struct BindingBasics {
  @ObservableState
  struct State: Equatable {
    var sliderValue = 5.0
    var stepCount = 10
    var text = ""
    var toggleIsOn = false
  }

  enum Action {
    case sliderValueChanged(Double)
    case stepCountChanged(Int)
    case textChanged(String)
    case toggleChanged(isOn: Bool)
  }

  var body: some Reducer<State, Action> {
    Reduce { state, action in
      switch action {
      case let .sliderValueChanged(value):
        state.sliderValue = value
        return .none

      case let .stepCountChanged(count):
        state.sliderValue = .minimum(state.sliderValue, Double(count))
        state.stepCount = count
        return .none

      case let .textChanged(text):
        state.text = text
        return .none

      case let .toggleChanged(isOn):
        state.toggleIsOn = isOn
        return .none
      }
    }
  }
}

struct BindingBasicsView: View {
  @Bindable var store: StoreOf<BindingBasics>

  var body: some View {
    Form {
      Section {
        AboutView(readMe: readMe)
      }

      HStack {
        TextField("Type here", text: $store.text.sending(\.textChanged))
          .disableAutocorrection(true)
          .foregroundStyle(store.toggleIsOn ? Color.secondary : .primary)
        Text(alternate(store.text))
      }
      .disabled(store.toggleIsOn)

      Toggle(
        "Disable other controls",
        isOn: $store.toggleIsOn.sending(\.toggleChanged).resignFirstResponder()
      )

      Stepper(
        "Max slider value: \(store.stepCount)",
        value: $store.stepCount.sending(\.stepCountChanged),
        in: 0...100
      )
      .disabled(store.toggleIsOn)

      HStack {
        Text("Slider value: \(Int(store.sliderValue))")
        Slider(
          value: $store.sliderValue.sending(\.sliderValueChanged),
          in: 0...Double(store.stepCount)
        )
        .tint(.accentColor)
      }
      .disabled(store.toggleIsOn)
    }
    .monospacedDigit()
    .navigationTitle("Bindings basics")
  }
}

private func alternate(_ string: String) -> String {
  string
    .enumerated()
    .map { idx, char in
      idx.isMultiple(of: 2)
        ? char.uppercased()
        : char.lowercased()
    }
    .joined()
}

#Preview {
  NavigationStack {
    BindingBasicsView(
      store: Store(initialState: BindingBasics.State()) {
        BindingBasics()
      }
    )
  }
}

extension Binding {
  /// SwiftUI will print errors to the console about "AttributeGraph: cycle detected" if you disable
  /// a text field while it is focused. This hack will force all fields to unfocus before we write
  /// to a binding that may disable the fields.
  ///
  /// See also: https://stackoverflow.com/a/69653555
  @MainActor
  func resignFirstResponder() -> Self {
    Self(
      get: { self.wrappedValue },
      set: { newValue, transaction in
        UIApplication.shared.sendAction(
          #selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil
        )
        self.transaction(transaction).wrappedValue = newValue
      }
    )
  }
}

 

 

리드미 해석

  Two-way bindings in SwiftUI are powerful, but also go against the grain of the "unidirectional   data flow" of the Composable Architecture. This is because anything can mutate the value   whenever it wants.

  On the other hand, the Composable Architecture demands that mutations can only happen by sending   actions to the store, and this means there is only ever one place to see how the state of our   feature evolves, which is the reducer.

  Any SwiftUI component that requires a binding to do its job can be used in the Composable   Architecture. You can derive a binding from a store by taking a bindable store, chaining into a   property of state that renders the component, and calling the `sending` method with a key path   to an action to send when the component changes, which means you can keep using a unidirectional   style for your feature.

 

SwiftUI의 양방향 바인딩은 강력하지만 컴포저블 아키텍처의 '단방향 데이터 흐름'이라는 원칙에 어긋나기도 합니다. 무엇이든 원할 때마다 값을 변경할 수 있기 때문입니다.

반면에 컴포저블 아키텍처는 스토어에 액션을 전송해야만 변형을 수행할 수 있도록 요구하며, 이는 기능의 상태가 어떻게 변화하는지 확인할 수 있는 곳이 오직 한 곳, 즉 리듀서뿐이라는 것을 의미합니다.

작업을 수행하기 위해 바인딩이 필요한 모든 SwiftUI 컴포넌트는 컴포저블 아키텍처에서 사용할 수 있습니다. 바인딩 가능한 저장소를 가져와서 컴포넌트를 렌더링하는 상태 속성으로 연결하고 컴포넌트가 변경될 때 보낼 액션의 키 경로로 `sending` 메서드를 호출하여 저장소에서 바인딩을 도출할 수 있으므로, 기능에 단방향 스타일을 계속 사용할 수 있습니다.
Translated with DeepL.com (free version)

 

 

 

 

SwiftUI의 양방향 통신

SwiftUI는 양방향 바인딩이라는 구조가 있습니다. 이는 binding을 매개변수로 받는 NavigationStack일수도, Toggle혹은 다양한 View에 Binding을 하게 합니다. 일단 간단한 예로 Toggle을 들어 보겠습니다. 

 

Toggle의 Init인데 isOn으로 Binding<Bool>을 매개변수로 받고 있습니다. 우리는 직감적으로 Binding된 property를 넘겨야 한다고 느낄 것 입니다. 이는 @state, @binding으로 선언된 변수를 통해 생성자를 만족시킬 수 있습니다.

 @State
 var toggleValue = true
  
// code...
	Toggle("Test Toggle",isOn: $toggleValue)

 

 

 

TCA는 일방향 통신

TCA의 가치는 SwiftUI와는 상반되게 모든 state들이 store의 action을 통해 넘어와서 reducer에서 처리되기를 원합니다. 즉 Toggle이라는 뷰를 생성하고 Toggle의 상태를 reducer에서 처리해야 합니다.

 

 

 

 

실제 코드는 어떻게 처리 될까? TCA

some binding의 값을 init변수로 가질 때 tca는 $store.<State>.sending(<ActionKeyPath>)로 전달합니다. 이를 실제 코드로 보면

//MARK: - $store.<State>.sending(<ActionKeyPath>)


Toggle(
    "Disable other controls",
    isOn: $store.toggleIsOn.sending(\.toggleChanged).resignFirstResponder()
  )

 

이렇게 전달하게 되면 우리는 store을 통해서 binding된 값을 얻고 이를 action을 통해서 값을 변경하게 됩니다. 

 

 

 

비슷한 예로 스테퍼도 bindingValue를 통해서 Event가 처리 됩니다.

  Stepper(
    "Max slider value: \(store.stepCount)",
    value: $store.stepCount.sending(\.stepCountChanged),
    in: 0...100
  )
  .disabled(store.toggleIsOn)

 

 

 

 

 

 

 

 

 

게시물은 TCA 라이브러리의 CaseStudies를 직접 작성해보고 어떻게 작동하는지에 대해서 공부하기 위해서 작성했습니다.