[SwiftUI] SwiftUI + TCA: Effect? DependencyValues? (예제 포함)

🧘 시작하기 전에…

이전 글에서 버튼을 눌러 카운트를 증가 또는 감소시킬 수 있는 예제를 통해 최신 버전 TCA에 대해 간단히 설명했는데요.

이번 글에서는 조금 더 심화적으로 Effect와 DependencyValues, 그리고 네트워크 통신을 진행할 경우를 알아보도록 하겠습니다.

🔍 TCA의 Effect와 DependencyValues 설명

TCA에서는 비동기 작업(네트워크 요청, 타이머, 데이터 저장 등)은 Reducer 내부에서 직접 실행할 수 없고, Effect를 사용하여 처리 해야 합니다.

또한, 최신 TCA에서는 Environment 대신 DependencyValues를 사용하여 의존성을 주입(Dependency Injection, DI) 및 관리합니다.

---

🔍 Effect란? (비동기 작업을 처리하는 방식)

Effect의 역할

• 네트워크 요청(API 호출)
• 데이터베이스 읽기/쓰기
• 타이머 실행
• 파일 저장/읽기
• 애널리틱스(Analytics) 로그 전송

---

❌ 잘못된 방식: Effect 없이 비동기 작업을 직접 Reducer에서 실행

case .fetchRandomNumber:
    let randomValue = Int.random(in: 1...100)  // 동기 작업
    state.count = randomValue  // 상태 변경
    return .none

🚨 문제점

• Reducer는 순수 함수여야 하므로 비동기 작업을 직접 실행하면 안 됨!
• Reducer 내부에서 네트워크 요청을 수행하면 상태 변경이 예측 불가능해지고, 테스트가 어려워짐.
• 따라서 비동기 작업은 Effect에서 분리하여 실행 해야 함.

---

✅ 올바른 방식: Effect를 사용하여 네트워크 요청 실행

case .fetchRandomNumber:
    return .run { send in
        let randomValue = Int.random(in: 1...100)  // 랜덤 숫자 생성
        await send(.randomNumberResponse(randomValue))  // 결과를 Reducer에 전달
    }

➡ Effect는 비동기 작업을 실행한 후, 결과를 Action으로 Reducer에 전달 함.

➡ await send(.randomNumberResponse(value)) 을 통해 상태 변경을 Reducer에서 처리하도록 함.

---

🔍 DependencyValues란? (환경 의존성 주입)

최신 TCA에서 Environment가 사라지고 DependencyValues로 변경됨

기존 TCA에서는 Environment를 사용하여 네트워크 클라이언트, 타이머, 데이터베이스 등의 외부 의존성을 주입했지만,

최신 버전에서는 DependencyValues를 사용하여 의존성을 관리합니다.

---

🔍 DependencyValues를 활용한 네트워크 요청 예제

(1) Action 정의

enum Action: Equatable {
		case increment // 숫자 증가
    case decrement // 숫자 감소
    case fetchRandomNumber // 랜덤 숫자 요청
    case randomNumberResponse(Int)  // API에서 받은 랜덤 숫자를 상태에 반영
}

• fetchRandomNumber: 랜덤 숫자를 가져오는 요청을 시작
• randomNumberResponse(Int): 응답을 받은 후 상태를 변경

---

(2) DependencyValues에 네트워크 클라이언트 등록

struct RandomCounterClient {
    var fetchRandomNumber: () async throws -> Int
}

extension RandomCounterClient {
		// API 통신
    static let live = RandomCounterClient(fetchRandomNumber: {
        let url = URL(string: "<http://www.randomnumberapi.com/api/v1.0/random?min=1&max=1000&count=1>")!
        let (data, _) = try await URLSession.shared.data(from: url)
        return try JSONDecoder().decode([Int].self, from: data).first ?? 0
    })
}

private enum RandomCounterClientKey: DependencyKey {
    static let liveValue = RandomCounterClient.live
}

• RandomNumberClient를 정의하여 네트워크 요청을 처리하는 fetch() 메서드를 포함
• DependencyKey를 사용하여 liveValue에 기본 동작을 정의
• 이후, DependencyValues에 randomNumberClient를 등록해야 함

---

(3) DependencyValues 확장 (의존성 주입)

extension DependencyValues {
    var randomNumberClient: RandomNumberClient {
        get { self[RandomNumberClientKey.self] }
        set { self[RandomNumberClientKey.self] = newValue }
    }
}

• DependencyValues에 randomNumberClient를 추가
• 이후 @Dependency(\\.randomNumberClient)로 의존성을 주입하여 사용 가능

---

(4) Reducer에서 Effect 실행

struct CounterFeature: Reducer {
    @Dependency(\\.randomCounterClient) var client // Dependency 주입

    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
            case .fetchRandomNumber:
                return .run { send in
                    do {
                        let number = try await client.fetchRandomNumber()
                        await send(.randomNumberResponse(number)) // 응답을 Reducer로 전달
                    } catch {
                        print("랜덤 넘버 가져오기 실패: \\(error)")
                    }
                }
            case .randomNumberResponse(let number):
                state.count = number
                return .none
            }
        }
    }
}

• @Dependency(\\.randomNumberClient)를 사용하여 randomNumberClient.fetch()를 호출
• 네트워크 요청이 끝나면 .randomNumberResponse(value) 액션을 발생시켜 상태를 변경

---

🔥 전체 코드

import SwiftUI
import ComposableArchitecture

// MARK: - RandomCounterClient 정의
struct RandomCounterClient {
    var fetchRandomNumber: () async throws -> Int
}

// MARK: - 실제 구현
extension RandomCounterClient {
    static let live = RandomCounterClient(fetchRandomNumber: {
        let url = URL(string: "<http://www.randomnumberapi.com/api/v1.0/random?min=1&max=1000&count=1>")!
        let (data, _) = try await URLSession.shared.data(from: url)
        return try JSONDecoder().decode([Int].self, from: data).first ?? 0
    })
}

// MARK: - DependencyKey 등록
private enum RandomCounterClientKey: DependencyKey {
    static let liveValue = RandomCounterClient.live
}

// MARK: - ependencyValues 확장 (의존성 주입)
extension DependencyValues {
    var randomCounterClient: RandomCounterClient {
        get { self[RandomCounterClientKey.self] }
        set { self[RandomCounterClientKey.self] = newValue }
    }
}

import SwiftUI
import ComposableArchitecture

// MARK: - Feature 정의 (Reducer)
struct RandomCounterFeature: Reducer {
    struct State: Equatable {
        var count = 0 // 현재 카운트 값(count)을 저장
    }
    
    enum Action: Equatable {
        case increment // 숫자 증가
        case decrement // 숫자 감소
        case fetchRandomNumber // 랜덤 숫자 요청
        case randomNumberResponse(Int) // API에서 받은 랜덤 숫자를 상태에 반영
    }

    @Dependency(\\.randomCounterClient) var client

    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
            case .fetchRandomNumber:
                return .run { send in
                    do {
                        let number = try await client.fetchRandomNumber()
                        await send(.randomNumberResponse(number))
                    } catch {
                        print("랜덤 넘버 가져오기 실패: \\(error)")
                    }
                }
            case .randomNumberResponse(let number):
                state.count = number
                return .none
            }
        }
    }
}

import SwiftUI
import ComposableArchitecture

// MARK: - SwiftUI View
struct RandomCounterView: View {
    let store: StoreOf<RandomCounterFeature>
    
    var body: some View {
        // WithViewStore를 사용하여 store를 관찰하고 viewStore.count를 UI에 반영
        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())
                    }
                }
                
                Button(action: { viewStore.send(.fetchRandomNumber) }) {
                    Text("랜덤 숫자 가져오기")
                        .font(.title2)
                        .padding()
                        .background(Color.blue.opacity(0.7))
                        .foregroundColor(.white)
                        .clipShape(RoundedRectangle(cornerRadius: 10))
                }
            }
            .padding()
        }
    }
}

import SwiftUI
import ComposableArchitecture

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

---

🚀 결론

1. Effect는 Reducer에서 실행할 수 없는 비동기 작업을 처리하는 역할 을 한다.
   • .run {}을 사용하여 비동기 작업 실행 후 send(action)으로 Reducer에 응답을 보냄.
   • .fireAndForget {}을 사용하면 결과를 Reducer에 전달하지 않고 단순히 실행만 함.
2. DependencyValues는 최신 TCA에서 Environment를 대체하는 의존성 관리 시스템 이다.
   • @Dependency(\\.randomNumberClient)를 사용하여 네트워크 클라이언트 등 외부 의존성을 주입할 수 있음.
   • DependencyKey와 DependencyValues를 활용하면 테스트용 Mock 데이터도 쉽게 설정 가능.

➡ TCA에서 비동기 작업을 관리하려면 Effect를 사용해야 하고, 외부 의존성은 DependencyValues를 통해 관리해야 한다!

---

🧘 마치며…

이번 글에서는 API 통신을 포함한 예제를 다루면서 TCA의 Effect와 DependencyValues를 설명했는데요.

사실 다른 블로그 글에서는 Effect와 관련하여 Environment가 많이 등장해서 저 또한 처음 학습을 진행할 때 애를 많이 먹었는데요.

다음 글에서 Environment와 DependencyValuse의 차이에 대해 설명할 예정이니 봐주시면 좋을 것 같아요!