[TCA] Overriding Dependencies (feat. Dependency Injection)

TCA를 공부하다 보니 SwiftUI 뿐만 아니라 UIKit에서도 사용할 수 있는 Dependency를 제공하길래 따로 글을 적어야 겠더라구요!

의존성을 관리하기 위한 Swinject, Niddle, Factory 등의 라이브러리가 있는데 TCA의 Depdency도 훌륭하고 사용하기 편리한 의존성 관리를 제공합니다. 

 

공식 문서의 공식 번역은 아래 사이트에서 확인할 수 있어요

Chapter 5. Dependency | Built with Notion

공식 문서를 보시려면 이 사이트로 이동하시면 됩니다.

Documentation

---

 

TCA에서는 DI(Dependency Injection)를 위한 @Dependency 프로퍼티 래퍼와 DependencyKey, DependencyValues를 제공합니다. Environment에서 사용한 EnvironmentKey와 EnvironmentValues와 동일한 형태를 갖고 있는 걸 알 수 있는데, Dependency 또한 같은 구현 방식으로 dependency를 전역에서 사용할 수 있도록 만들어 줍니다. 

 

우선은 전역으로 사용할 의존성을 만들어 주어야 해요!!

 

Dependency 생성

struct ProductClient {
    typealias Products = [Product]
    var fetch: @Sendable (_ offset: Int, _ limit: Int) async throws -> [Product]
}

 

그 후 Environment와 동일하게 DepdencyKey를 등록하고 DependencyValues에 등록해 의존성을 접근하고 사용할 수 있도록 해주면 됩니다. 

ProductClient는 remote 서버로 부터 product 목록을 가져옵니다. 실제 api를 request하는 코드는 DepdencyKey를 등록할 때 작성해 주면 됩니다.

 

DependencyKeh 등록

extension ProductClient: DependencyKey {
    static let liveValue = Self { offset, limit in
        let (data, _) = try await URLSession.shared.data(from: URL(string: "[api path 생략]?offset=\(offset)&limit=\(limit)")!)
        return try JSONDecoder().decode(Products.self, from: data)
    }
    
    static var previewValue = ProductClient { offset, limit in
        let products = [
            Product(id: 0, title: "맥북 에어 2022", price: 1000, description: "", images: [""], creationAt: "", updatedAt: "", category: Category(id: 0, name: "", image: "", creationAt: "", updatedAt: "")),
            // 생략..
        ]
        
        return products
    }
}

 

TCA에서는 DependencyKey를 제공해서 전역으로 사용하기 위한 Depdency를 관리할 수 있어요. 여기서 dependency overriding을 제공합니다. 

static var liveValue: Value { get }
static var previewValue: Value { get }
static var testValue: Value { get }

 

TCA의 DependencyKey 내부를 확인해 보면 liveValue, previewValue, testValue를 제공하고 있어요. 각각 상황에 따라 적절한 dependency를 지정한 후 주입해 줄 수 있습니다. 

시뮬레이터나 실제 기기에서는 liveValue를 사용해 dependency를 주입하고, preview에서는 preview에서 UI를 확인 하기 위한 용도로  여러 mock 데이터나 실제 api request 코드 등을 넣을 수도 있어요

PointFree 강의를 보니 실제 기기에서 권한 받아오는 것은 문제가 없지만 프리뷰에서는 정상 동작하지 않아 이를 Dependency를 사용해서 각 상황에 맞게 대응해 주고 있었습니다.

 

의존성을 약하게 만드는 것이 왜 중요한지는 SwiftUI의 Preview를 생각해보면 쉽게 이해할 수 있습니다. SwiftUI는 Canvas에 SwiftUI의 View를 빌드하기 전 미리 보여줍니다. 시뮬레이터와 앱에서 실행하는 코드들과 달리 Preview는 현재 View에서 시작합니다. View가 외부로 부터 필요로 하는 값이 있다면 Preview에서 initializer나 dependency를 주입하는 방식(for example: Environment)을 사용해 주면 됩니다. 

 

이때 View가 필요로 하는 값 중 UserDefault의 값이 있다면 어떻게 해야 할까요? Preview에서 기기에 저장된 값이 있을까요? Preview 뿐만 아니라 Unit Test시 필요로 하는 값은 어떻게 설정해 주어야 할까요? 

실제 작동하는 앱 뿐만 아니라 Preview, Test 코드 등에서 이 dependency를 주입해야 하고 이 의존성을 약하고 유현하게 만드는 것이 중요합니다. 

 

DepdencyValues

extension DependencyValues {
    var productClient: ProductClient {
        get { self[ProductClient.self] }
        set { self[ProductClient.self] = newValue }
    }
}

 

@Depdency 프로퍼티 래퍼를 사용해서 의존성에 접근하고 사용하기 위해 get, set을 통해 코드를 작성해 주면 됩니다. 이로서 모든 준비가 끝났으니 실제 사용하는 방법을 확인해 봅시다. 

 

---

MainViewModel

final class MainViewModel: ObservableObject {
    var offset = 0
    var limit = 10
    @Published var products: [Product] = []
    
    @Dependency(\.productClient) var productClient
    
    @MainActor
    func fetchProduct() async {
        self.products = try! await productClient.fetch(offset, limit)
    }
}

 

MainViewModel은 productClient라는 depdency를 가지고 있고 fetchProduct가 실행되면 이 depdency로 부터 데이터를 fetch 해 옵니다.

MainViewModel이 생성될 때 이 dependency 를 주입해 줄 수 있어요

 

OnboardingView

struct OnboardingView: View {
    @ObservedObject var viewModel: OnboardingViewModel
    
    var body: some View {
        ZStack {
            Button {
                viewModel.startButtonTapped()
            } label: {
                Text("시작하기")
            }
            .buttonStyle(.borderedProminent)
            if viewModel.isShowMain {
                AMainView(viewModel: withDependencies {
                    $0.productClient = .liveValue
                  } operation: {
                    MainViewModel()
                  })
            }
        }
    }
}

 

AMainView는 MainViewModel을 필요로 합니다. viewModel을 생성할 때 dependency였던 productClient를 주입해 줘야 합니다. 코드를 자세히 살펴 보면

 

AMainView(viewModel: withDependencies {
    $0.productClient = .liveValue
  } operation: {
    MainViewModel()
  })

 

withDependecies를 사용해서 depdency를 지정해 주고 있어요. 

static var liveValue: Value { get }
static var previewValue: Value { get }
static var testValue: Value { get }

 

이때 liveValue는 바로 위에서 DepdencyKey를 구현해 줄 때 적어 주었던 값입니다. liveValue는 무조건 적어 주어야 하는 값이고 실제 동작시 사용할 dependency를 정의해 놓기 때문에 Dependency 주입시 liveValue를 사용했습니다.

그렇다면 preview는 어떻게 해야 할까요? 앱을 실제 실행할 때는 liveValue가 필요하지만 preview에서는 실제 데이터가 필요하지 않을 수 있어요. 예를 들어 로그인 뒤에 조회 할 수 있는 api라면 현재 화면 부터 보여주는 preview의 경우 실제 api로 부터 값을 받아 오기 힘들 수도 있습니다. 

 

#Preview {
    AMainView(viewModel: withDependencies {
        $0.productClient = .previewValue
      } operation: {
        MainViewModel()
      })
}

 

preview도 withDependencies를 사용해서 Dependency의 값을 주입해 주면 됩니다. 이때는 .previewValue를 사용해서 mock 데이터를 보여주면 됩니다. 

 

왼쪽은 Preview 이고, 오른쪽 사진은 실제 시뮬레이터에서 돌렸을 때 나오는 화면입니다. (아니 누가 api 에 있는 값 리셋해놨나봐... 원래 10개 받아와야 하는데 데이터가 진짜 한개밖에 없다.. 누가 건드려쒀... ㅠㅠㅠ)

 

TCA는 SwiftUI 아키텍처로 사용되는데, DI를 위한 Dependency는 UIKit에서도 적용 가능합니다!

 

참고 사이트 및 도서

https://pointfreeco.github.io/swift-dependencies/main/documentation/dependencies/overridingdependencies/

https://pointfreeco.github.io/swift-dependencies/main/documentation/dependencies/designingdependencies/

https://pointfreeco.github.io/swift-dependencies/main/documentation/dependencies/overridingdependencies/#Scoping-dependencies

https://www.pointfree.co/collections/tours/composable-architecture-1-0/ep248-tour-of-the-composable-architecture-1-0-dependencies

https://github.com/pointfreeco/isowords/blob/isowords-deploy-v117/Sources/SettingsFeature/Settings.swift

https://github.com/pointfreeco/isowords/tree/main

https://axiomatic-fuschia-666.notion.site/Chapter-5-Dependency-de90da4e19554625af3ffc005ab13ed9