SwiftUI - TCA Tutorial 한글번역 (2023 ver) (1)

* 들어가기 전에

  - 최근 SwiftUI를 본격적으로 공부하면서 TCA라는 좋은 아키텍처에 대해 알게되어 튜토리얼을 공부할 겸 번역 정리도 함께 진행하려고 합니다. TCA에 대한 개념적인 부분은 SwiftUI TCA로 구글링을 통해 너무나 많은 분들이 잘 설명해주고 계셔서 저는 튜토리얼 번역만 진행하도록 하겠습니다. 그럼 Let's dive in TCA~

 

< Ref - https://pointfreeco.github.io/swift-composable-architecture/main/tutorials/composablearchitecture/01-01-yourfirstfeature >

 

< Essential - Your first feature >

 

* 학습 목표

 - Reducer 프로토콜을 준수하는 하나의 객체를 생성하는 방법을 배웁니다.

   * Reducer 프로토콜은 구현하고자 하는 feature의 로직과 행동을 구현합니다.

 - 구현하고자 하는 기능을 SwiftUI 뷰에 연결하는 방법을 배웁니다.

 - 이번 Your first feature 는 총 3개의 섹션으로 구성되어 있습니다.

 

< Section 1  - Reducer 생성하기 >

 

* 개요

 - TCA(The Composable Architecture, 이하 TCA)의 기초적인 단위는 Reducer입니다.

 - Reducer 프로토콜을 준수하는 것은 여러분의 앱에 기능에 대한 로직과 행위를 나타냅니다.

 - Reducer는 다음의 내용을 포함합니다.

   1. 행위(Action)가 전달되었을 때 현재의 상태(State)에서 다음의 상태로 진전되는 방법

   2. 어떻게 effects(API Request) 들이 외부 세계와 커뮤니케이션 하고 시스템으로 데이터를 피드백받는지에 대한 방법

 - 가장 중요한 것은 구현하고자 하는 feature의 핵심 로직과 행위가 완전히 분리된 상태로 작성될 수 있다는 것인데, SwiftUI View와 완전히 분리되는 것도 포함. 이는 각각을 분리하여 개발하기 더 쉽게 만들어주고, 재사용성과 테스트도 용이하게 만듬

 - 이번 Section에서는 카운터의 로직을 캡슐화하는 간단한 Reducer를 만들어 볼 예정.

 

* Step 1

  - TCA 라이브러리를 SPM 통해 내려받고, CounterFeature.swift 파일을 생성한 후, ComposableArchitecture를 import 합니다.

  - http://github.com/pointfreeco/swift-composable-architecture#Installation

 

* Next Step

 - Reducer 프로토콜을 준수하는 CounterFeature 구조체를 정의합니다.

 - Reducer 를 준수하기 위해서 State 타입의 Struct와 Action 타입의 enum을 정의합니다.

   * State : 구현하고자 하는 feature가 자신의 임무를 수행하기 위해 필요한 상태를 가지고 있는 구조체

   * Action : 구현한 feature 에서 유저가 행동할 수 있는 모든 행위를 가지고 있는 열거형

 - 이번 섹션에서는 간단한 카운터 기능을 목적으로 하고 있기 때문에 State는 단일 Int 타입의 현재 카운트를 가지는 변수 count 로 구성됩니다.

 - 그리고 Action 은 카운터 기능에서 필요한 기능은 카운트를 증가시키는 기능, 감소시키는 기능이 있을 것이고 화면에서 해당 버튼을 탭하는 것을 통해 구현하겠습니다.

 

TIP) Action의 각각의 case에 대한 이름을 구현할 때는 UI에서 실제 유저가 하는 행동으로 구현하길 추천합니다. 아래의 예제에서 incrementButtonTapped 는 Tapped(탭이 된) + incrementButton(증가 버튼) 으로 UI에서 사용자가 하는 행위를 잘 표현하고 있습니다.

 

// 3

  - 마지막으로 Reducer 프로토콜에 대한 준수를 마치기 위해서는 reduce(into:action:) 메서드를 구현해야 합니다.

   * reduce(into:action:) 메서드

     1. 사용자의 행위를 전달받아 현재의 value를 다음의 value로 진전시킵니다.

     2. effects 를 리턴합니다. effects는 구현한 기능이 외부 세계에서 실행되길 원하는 것을 의미(ex. API Request)합니다.

 

NOTE)

- reduce 메서드는 argument로 State를 가지고 inout으로 표시되어 있습니다. 이것은 개발자가 원하는 모든 변화를 상태에 바로 적용할 수 있다는 것을 의미합니다. 상태에 대한 복사본을 리턴하여 적용할 필요가 없다는 얘기죠.

 

  -  기능에 대한 로직은 꽤 간단해요. state의 count 변수에 대해 1을 더하거나 빼거나 할거에요. 여기에 Effect 값을 리턴해야만 합니다.

  -  Effect 는 결과라는 뜻으로 외부 세계에서 실행될 수 있는 것을 나타내지만, 여기서는 count 만 +/- 1 하는데 굳이 값을 리턴해줄 필요가 없는 것이죠. 그럴 때 우리는 실행하기 위한 어떠헌 effect 도 가지고 있지 않다는 걸 나타내줘야 하는데, .none 을 통해 이것을 가능하게 할 수 있습니다.

 

struct CounterFeature: Reducer {

  // 1
  struct State {
    var count = 0
  }

  // 2
  enum Action {
    case decrementButtonTapped
    case incrementButtonTapped
  }

  // 3
  func reduce(into state: inout State, action: Action) -> Effect<Action> {
    switch action {
    case .decrementButtonTapped:
      state.count -= 1
      return .none

    case .incrementButtonTapped:
      state.count += 1
      return .none
    }
  }
}

 

* Section 1 마무리

  - 아~주 기본적인 구현을 통해 TCA의 기초에 대해서 알아봤습니다. 생각보다 어렵지 않죠? 물론 점점 복잡해지면 더 어려워지겠지만 여기서 한숨 돌리도록 하죠. 

  - 다음 Section 2 에서는 이 만든 기능을 SwiftUI 와 통합하는 것에 대한 학습을 해볼게요.