TCA(8) : Binding

안녕하세요.

 

이번에는 TCA의 Binding에 대해 알아볼게요.

(TCA 1.0.0 기준으로 작성했으며, 전체 코드는 여기를 봐주세요!)

 

---

TCA의 Binding 기능을 사용할 땐 크게 3단계로 진행됩니다.

1) State에 Binding이 필요한 값을 BindingState property wrapper로 선언
2) Action에 BindableAction 프로토콜을 채택시키고, binding case 추가
3) Reducer의 body에 BindingReducer 추가

 

 

쉽게 설명하기 위해 TCA Binding을 활용해서 아래와 같은 URL 인코딩을 해주는 예제를 만들어볼게요.

 

 

먼저, State에 Binding이 필요한 값(변수)을 BindingState property wrapper로 선언해 줍니다.

 

 

Action에 BindableAction 프로토콜을 채택시키고, binding case를 추가해 주세요.

 

 

Reducer의 body에 BindingReducer를 추가합니다.

 

[참고] body 안의 BindingReducer 순서에 따른 동작 차이점

예전에 Scope를 사용해서 부모-자식 Reducer 관계를 정의할 때, 자식 Scope가 부모 Reduce 클로저보다 항상 위에 있어야 한다고 했던 것 기억하시나요?
(잘 모르시겠으면 이 글을 참고해 주세요!)
그 이유는 자식 이벤트를 부모가 먼저 받는 것을 방지하기 위함이었어요.

BindingReducer도 동일한 개념이 적용됩니다.
BindingReducer를 Reduce 클로저보다 위에 선언할 경우, binding이 먼저 되고 Reduce 클로저가 호출됩니다.
반대로 BindingReducer가 Reduce 클로저보다 아래에 있을 경우, Reduce 클로저가 먼저 호출되고 나중에 binding 됩니다.

꼭 BindingReducer가 위에 있어야 한다는 제약은 없고, 내부 로직에 따라 BindingReducer를 위에 선언할지 아래에 선언할지 선택해서 적용하시면 됩니다.

 

View에서는 SwiftUI의 binding과 동일하게 변수명 앞에 $를 붙여서 binding 선언을 해줍니다.

 

 

한번 볼까요?

 

TextField에 값이 잘 입력된 것을 보면 binding 자체는 잘 됐어요.

 

근데 저희가 만들 예제는 binding으로 값이 설정되었을 때 URL 인코딩도 같이 해주는 추가 로직이 필요하죠?

 

이땐 Reduce 클로저에서 특정 BindingState가 binding 되는 이벤트를 후킹 해서 처리해 주면 됩니다.

 

[참고] 자식 이벤트를 부모가 받을 때랑 유사하네요?

맞습니다. 단, 변수명 앞에 $를 붙인다는 점이 달라요.

 

잘 되네요!ㅎㅎㅎ

 

 

 

# 요약

- BindingState, BindableAction, BindingReducer를 활용해서 TCA로 Binding 기능을 사용할 수 있다.
- BindingReducer와 Reduce 클로저 순서에 따라 이벤트 발생 순서가 다르며, BindingReducer가 Reduce 클로저보다 꼭 위에 있어야만 하는 것은 아니다.

 

 

# 참고

- https://pointfreeco.github.io/swift-composable-architecture/1.0.0/documentation/composablearchitecture/bindings/#Binding-state-actions-and-reducers

Documentation

 

---

이번 글은 여기서 마무리.