[SwiftUI/TCA] TCA 기본 개념에 대해 알아보기

참고 사이트 

https://axiomatic-fuschia-666.notion.site/Chapter-1-Hello-TCA-70c56437681547d4b85cd1363a157356

Chapter 1. Hello, TCA

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

Episode #243: Tour of the Composable Architecture: The Basics

 

참고 사이트 부터 적는 이유는 TCA를 배우기 가장 좋은 사이트는 아무래도 TCA를 만든 pointfree와 이를 토대로 만든 전자책이지 않을까 싶습니다! 

 

ViewModel

• 기존 UIKit에서의 ViewModel
  • RxSwift + ViewModel => 데이터 바인딩을 책임짐. Reactive Programing
• SwiftUI에서의 ViewModel 
  • SwiftUI에서는 View 레벨에서 비동기 처리를 위한 데이터 바인딩 가능
  • ViewModel이 수행하는 일을 View가 처리할 수 있게 됨

 

TCA의 특징

• 값 타입 기반
• 애플리케이션 전체 상태를 일관적으로 관리할 수 있는 표준 제안
• 최소 기능 단위 -> 객체 간 결합 및 분리, 재사용성 쉬워짐
• 테스트 유연성 확보

 

SwiftUI에서의 MVVM

• SwiftUI는 양방향 데이터 바인딩을 지원하는 프레임워크
• View가 ViewModel의 요청을 받아온 후 추가 작업이 필요한 경우가 발생

 

Reducer 생성

struct ProductDetailFeature: Reducer {
    struct State: Equatable {
    	// 생략
    }
    
    enum Action: Equatable {
	    // 생략
    }
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
                // 생략
            }
        }
    }
}

• State, Action, body property(혹은 reduce(into:action:) 함수)를 구현해야 함
• 주어진 Action을 바탕으로 현재 State를 어떻게 다음 상태로 바꿀 것인지 정의

 

View와 Reducer 연결

struct ProductDetailView: View {
    let store: StoreOf<ProductDetailFeature>
    
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            // 생략
        }
    }
}

• StoreOf<ProductDetailFeature>의 이전 방식은 Store<ProductDetailFeature.State, ProductDetailFeature.Action>

State

    struct State: Equatable {
        let productId = 4
        var product: Product?
        var isLike: Bool = false
    }

• View에 필요한 상태값이며 현재 상태를 가지는 구조체
• 이 상태값이 변경되면 이를 View에 반영
• 값타입
• 변동을 추적하고 의도하지 않은 변경에서 지켜내야 할 상태
• Single Source Of Truth

Action

    enum Action: Equatable {
        case likeButtonTapped
        case productResponse(Product)
        case getProductDetail
    }

• 사용자 인터렉션을 받아오기 위한 타입
• 사용자가 View를 통해 어떤 작업이나 알림, 이벤트를 정의
• Action을 네이밍 할 때에는 사용자가 UI에서 수행한 작업의 이름을 따서 짓는 것이 추천됨

Effect

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .likeButtonTapped:
                state.isLike.toggle()
                return .none
            case .productResponse(let product):
                state.product = product
                return .none
            case .getProductDetail:
                return .run { [id = state.productId] send in
                    let (data, _) = try await URLSession.shared.data(from: URL(string: "https://api/v1/products/\(id)")!)
                    do {
                        let product = try JSONDecoder().decode(Product.self, from: data)
                        print(product)
                        await send(.productResponse(product))
                    } catch {
                        // TODO: error handling
                    }
                }
            }
        }
    }

• Action이 State를 변화시키는 Effect를 반환
• 상태를 변화시키거나 네트워크 통신 같은 비동기 작업을 수행함
• body 속성을 사용하면 직접 상태 변경 또는 효과 로직을 수행하지 않음
  • body 속성의 반환 값이 some Reducer인 opaque type이기 때문에 다른 리듀서와 조합할 수 있음
  • 앱의 복잡도가 증가했을 때 용이
• 작은 단위의 리듀서로 구현할 때 용이

    func reduce(into state: inout State, action: Action) -> Effect<Action> {
        switch action {
            // 생략
        }
    }

• 기본적인 방법
• 리듀서의 로직을 직접 메서드 내부에 구현
• 다른 리듀서와의 결합이 필요 없는 경우에 사용

Equatable

• WithViewStore의 이니셜라이저에서 State가 Equatable 프로토콜을 준수하도록 요구
• 상태 변화를 감지하기 위해 이전 상태와 현재 상태를 비교하게 됨. 이 과정을 통해 불필요한 렌더링을 방지할 수 있음
• 만약 참조 타입의 State의 경우 객체 내부의 값이 변경되면 이 변경을 알 수 없기 때문에 변화를 인지하지 못할 수 있음

struct Product: Codable, Identifiable, Equatable {
    let id: Int
    let title: String
    let price: Int
    let description: String
    let images: [String]
    let creationAt, updatedAt: String
    let category: Category
    
    static func == (lhs: Product, rhs: Product) -> Bool {
        lhs.id == rhs.id
    }
}

• State의 변화를 알기 위해 Equatable을 준수해야 한다.
• 상태 관리를 간소화하고 버그를 줄이는 방식

 

Effect & Side Effect

• 작업에 대한 결과를 의미
  • 작업에 성공한 경우 Effect
  • 작업이 예상치 못한 실패를 하는 경우 Side Effect 
• effect와 side effect에 따라 다시 Action을 선택해 Sate를 변경하고 이 State는 다시 뷰에 영향을 주게 되는 단방향 흐름을 가짐

https://pixabay.com/ko/photos/%EB%B9%B5-%ED%86%A0%EC%8A%A4%ED%84%B0%EC%97%90-%EC%9D%8C%EC%8B%9D-%ED%86%A0%EC%8A%A4%ED%8A%B8-1077984/