TCA 주요 개념 흐름도

안녕하세요 !

이번에는 TCA의 데이터 흐름이 어떤식으로 이동하는지에 대해서 포스팅 해보도록 하겠습니다

TCA: 단방향 아키텍처의 강점

SwiftUI 개발에서 TCA(The Composable Architecture)는 단방향 데이터 흐름을 통해 일관성 있는 상태 관리를 제공합니다

참고로 SwiftUI는 양방향 데이터 바인딩 방식입니다

TCA vs SwiftUI 데이터 흐름

SwiftUI는 양방향 바인딩으로 개발할때는 편리하지만 앱에 규모가 커지면 커질수록 유지보수와 관리하기 어려워지며 가독성이 떨이진다는 느낌을 많이 받았습니다

반면 TCA는 상태 변화에 대한 일관성 있는 가이드라인과 단방향 구조로서,

개발하고 설계할때는 어려움이 따르지만 유지보수와 가독성 측면에서는 매우 편리했습니다

TCA의 핵심 원칙
모든 상태 변화는 Action을 통해 이루어
View에서는 .send() 메서드로 Action을 전달

TCA의 작동 방식

구성요소
State: UI 렌더링과 비즈니스 로직에 필요한 데이터
View: 사용자 인터페이스와 상호작용
Action: 사용자 입력이나 시스템 이벤트 등 모든 가능한 액션
Reducer: Action에 따라 State를 변경하는 함수
Effect: 비동기 작업과 사이드 이펙트 처리

TCA의 데이터 흐름

1. 사용자가 View를 통해 이벤트를 Action으로 보낸다

struct TestView: View {
    let store: StoreOf<TestFeaturse>
    
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            VStack(alignment:.center,spacing:0) {
                Text("Test Text \(viewStore.isTest)")
                .onTapGesture {
                    viewStore.send(.test)
                }
            }
            .frame(maxWidth:.infinity,maxHeight: .infinity,alignment: .top)
            .background(Color.darkTextColor)
            
        }
    }
}

2. 연관된 Action이 Reducer로 전달되고 test를 찾아 실행

struct TestFeaturse: Reducer {
    struct State: Equatable {
        var isTest: Bool = false

    }
    
    enum Action: BindableAction, Equatable {
        case binding(BindingAction<State>)
        case test
    }
    
    
    private enum CancelID { case signUp, googleSignIn }
    
    var body: some ReducerOf<Self> {
        BindingReducer()
        Reduce { state, action in
            switch action {
            case .binding:
                return .none
                
            case .test:
                state.isTest.toggle()
                return .none
  
            
            default:
                return .none
            }
        }
    }
}

3. Reducer가 State 변경

            case .test:
                state.isTest.toggle()
                return .none

4. 변경된 State가 View에 반영

TCA의 이러한 구조는 상태 변화를 예측 가능하고 추적하기 쉽게 만들어, 대규모 앱 개발에서 특히 유용하다고 합니다

Effect의 대한 내용도 추가할까 싶었지만 TCA의 대해 처음 읽어보시는 분들이 많을 것 같아 다음 포스팅에서 좀 더 자세하게 다뤄보도록 하겠습니다

감사합니다.