[SwiftUI] SwiftUI + TCA: 최신 버전 TCA의 동작 과정 (예제 포함)

🧘 시작하기 전에…

기존 글에서 TCA를 이루는 기본 요소(?)에 대해 알아보고 왔는데요.

이번 글에서는 TCA의 핵심 개념과 최신 버전의 예제를 다뤄보겠습니다.

학습하면서 가장 크게 느낀 점은, 많은 블로그 글과 ChatGPT 답변이 과거 버전을 기준으로 하고 있어 최신 버전을 설치했을 때 오류가…

이에 학습 과정이 훨씬 어려웠는데, 이번 글을 통해 새롭게 학습하는 분들이 같은 어려움을 겪지 않도록 최신 버전을 기준으로 정리해보았습니다.

🔍 TCA가 해결해주는 핵심 개념들

(1) 상태 관리 🛠

애플리케이션에서 데이터를 효율적으로 관리하는 방법을 제공.

• 상태를 단순한 값 타입(struct)으로 정의하고 관리.
• 여러 화면에서 동일한 상태를 공유할 수 있고, 한 곳에서 변경된 상태를 다른 곳에서도 즉시 반영 가능.

예를 들어, 로그인한 유저 정보를 여러 화면에서 공유해야 할 때, 하나의 State에서 관리하고 모든 화면이 같은 정보를 사용할 수 있음.

---

(2) 구성 요소 분리(Composition) 🧩

애플리케이션이 커지면 유지보수가 어려워지는데, TCA는 기능을 작은 단위로 나누고, 나중에 다시 합치는 구조를 지원.

• 하나의 큰 기능을 여러 개의 작은 기능으로 쪼갤 수 있음.
• 나눠진 작은 기능들은 독립적인 모듈로 만들 수 있고, 필요할 때 쉽게 조합 가능.

예를 들어, Todo 리스트를 만든다고 하면 개별 Todo를 담당하는 모듈, Todo 리스트 전체를 담당하는 모듈, 리스트를 필터링하는 모듈로 나눠 만들고, 필요할 때 합쳐서 사용할 수 있음.

---

(3) 사이드 이펙트 관리 🌍

네트워크 요청, 데이터 저장, 알림 전송 같은 외부 작업을 효율적으로 처리.

• 사이드 이펙트는 Reducer(리듀서) 내부에서 Effect라는 개념으로 관리.
• Effect는 특정 액션이 발생했을 때 실행되고, 이후 새로운 액션을 방출할 수도 있음.
• 이 과정이 명확하게 분리되어 있어서, 어떤 코드가 어떤 작업을 하는지 쉽게 이해할 수 있음.

예를 들어, 버튼 클릭 시 API를 호출하고 화면을 업데이트한다든지, 새로운 일정 추가 시 알림을 예약한다든지 이런 것들이 깔끔하게 처리될 수 있음.

---

(4) 테스트 가능성 ✅

TCA의 핵심 장점 중 하나는 테스트 용이.

• 상태 변화와 사이드 이펙트가 예측 가능하게 동작하므로, 각 기능을 단위 테스트(Unit Test) 가능.
• 여러 개의 기능이 합쳐진 상태에서도 테스트 가능.
• 실제 네트워크 요청 없이 모의 데이터(Mock) 를 활용해 API 연동 테스트가 가능.

예를 들어, 특정 액션을 보냈을 때 상태가 올바르게 바뀌는지, API 요청이 끝난 후 올바른 데이터가 화면에 표시되는지 확인할 수 있음.

---

(5) 사용하기 편리한 API 제공 🎯

TCA는 위의 기능들을 쉽고 직관적으로 사용할 수 있도록 일관된 구조를 제공.

• State, Reducer, Effect, Store 같은 개념을 이해하면 애플리케이션 전반에서 같은 방식으로 개발 가능.
• 새로운 기능을 추가할 때 기존 구조를 그대로 유지하면서 확장 가능해서 유지보수 용이.

---

🔍 TCA의 핵심 구성 요소

구성 요소	설명
State	애플리케이션의 현재 상태를 담고 있는 구조체
Action	사용자의 입력 또는 내부 이벤트를 나타내는 열거형
Reducer	Action을 받아 State를 변경하는 순수 함수
Effect	네트워크 요청, 타이머 등 비동기 작업을 처리하는 함수
Store	State, Reducer, Effect를 조합하여 상태를 관리하는 중앙 저장소

---

🔍 TCA의 동작 과정 (데이터 흐름)

 

TCA는 단방향 데이터 흐름(Unidirectional Data Flow)을 따릅니다.

[사용자 입력] → [Action 발생] → [Reducer 실행] → [State 변경] → [View 업데이트]

1. 사용자가 버튼을 누름 (View → Action)
2. Action이 Store로 전달됨 (Store.send(action))
3. Reducer가 Action을 받아 State를 변경함
4. Store가 State의 변경을 감지하고 View를 다시 그림

➡ TCA에서는 State를 직접 변경할 수 없고, 반드시 Reducer를 통해 변경해야 함!

---

🔍 TCA의 코드 예제 (Counter 앱)

(1) State (앱의 상태)

import ComposableArchitecture

struct CounterFeature: Reducer {
    struct State: Equatable {
        var count: Int = 0
    }
}

• State는 앱의 상태를 나타내는 구조체
• Equatable을 준수하여 상태 변화를 감지 가능

---

(2) Action (사용자의 입력)

enum Action: Equatable {
    case increment
    case decrement
}

• Action은 상태 변경을 트리거하는 열거형
• increment, decrement 같은 이벤트를 정의

---

(3) Reducer (상태 변경 로직)

var body: some ReducerOf<Self> {
    Reduce { state, action in
        switch action {
        case .increment:
            state.count += 1  // 상태 변경
            return .none

        case .decrement:
            state.count -= 1  // 상태 변경
            return .none
        }
    }
}

• Reducer는 순수 함수(Pure Function) 이며, State를 변경하는 유일한 곳
• return .none은 부수효과(Side Effect)가 없음을 의미

---

(4) Store (중앙 상태 관리)

import SwiftUI

struct CounterView: View {
    let store: StoreOf<CounterFeature>

    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            VStack {
                Text("\\(viewStore.count)")
                HStack {
                    Button("-") { viewStore.send(.decrement) }
                    Button("+") { viewStore.send(.increment) }
                }
            }
        }
    }
}

• Store는 상태(State)를 저장하고, Reducer를 실행하는 중앙 저장소 역할
• viewStore.send(.increment) → Action을 Reducer로 전달하여 State를 변경

---

(5) 앱 실행 시 Store 주입 (앱의 진입점)

import SwiftUI
import ComposableArchitecture

@main
struct TCAExampleApp: App {
    var body: some Scene {
        WindowGroup {
            CounterView(
                store: Store(
                    initialState: CounterFeature.State(),  // 초기 상태
                    reducer: { CounterFeature() }  // Reducer 주입
                )
            )
        }
    }
}

• 앱이 실행될 때 Store를 생성하여 CounterView에 주입

---

🔥 전체 코드

import SwiftUI
import ComposableArchitecture

// MARK: - Feature 정의 (Reducer)
struct CounterFeature: Reducer {
    struct State: Equatable {
        var count = 0 // 현재 카운트 값(count)을 저장
    }
    
    enum Action: Equatable {
        case increment // 숫자 증가
        case decrement // 숫자 감소
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .increment:
                state.count += 1
                return .none
            case .decrement:
                state.count -= 1
                return .none
            }
        }
    }
}

import SwiftUI
import ComposableArchitecture

// MARK: - SwiftUI View
struct CounterView: View {
    let store: StoreOf<CounterFeature>
    
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            VStack(spacing: 20) {
                Text("카운트: \\(viewStore.count)")
                    .font(.largeTitle)
                
                HStack(spacing: 40) {
                    Button(action: { viewStore.send(.decrement) }) {
                        Text("–")
                            .font(.largeTitle)
                            .frame(width: 60, height: 60)
                            .background(Color.red.opacity(0.7))
                            .foregroundColor(.white)
                            .clipShape(Circle())
                    }
                    
                    Button(action: { viewStore.send(.increment) }) {
                        Text("+")
                            .font(.largeTitle)
                            .frame(width: 60, height: 60)
                            .background(Color.green.opacity(0.7))
                            .foregroundColor(.white)
                            .clipShape(Circle())
                    }
                }
            }
            .padding()
        }
    }
}

import SwiftUI
import ComposableArchitecture

@main
struct TCAExampleApp: App {
    var body: some Scene {
        WindowGroup {
            CounterView(
                store: Store(
                    initialState: CounterFeature.State(),  // 초기 상태
                    reducer: { CounterFeature() }  // Reducer 주입
                )
            )
        }
    }
}

---

🧘 마치며…

다음에는 이번 글에서는 설명하지 않은 Effect에 대해 다뤄보도록 하겠습니다.

추가적으로 DependencyValues와 API 통신 예제도 포함해서 작성할 예정입니다.