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

< Section 2  - SwfitUI와 통합하기  >

 

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

 

* 개요

 - 앞선 Section를 통해 Reducer로 만들어진 간단한 feature 하나를 가지게 되었어요.

 - 이제 이 feature로 부터 SwiftUI view를 작동시키는 방법에 대한 구성을 할 필요가 있어요.

 - 새로운 두 가지 컨셉트를 학습할거에요. Store와 ViewStore 입니다.

   * Store : 구현한 feature의 런타임을 나타냅니다.

   * ViewStore : 런타임에서의 관찰(Observation)을 나타냅니다.

 - 음.. 말이 어려우니까 코드로 확인해볼까요?

 

* Step 1

  - 파일 분리가 필요한 시점이 올 때까지는 하나의 파일에 작성하도록 할게요.

  - CounterFeature.swift 파일을 생성하고 SwiftUI, ComposableArchitecture 를 import 합니다.

* Step 2

  - 처음으로 해야할 일은 하나의 상수 store를 뷰에 추가해주세요.

   * 이전 Section에서 구성한 Reducer에 대한 일반적인 Store에요.

  - Store는 구현한 feature에 대한 런타임을 나타내요.

   * 즉, 이것은 하나의 object이며 state를 업데이트 하기 위해서 action을 처리할 수 있는 object이고, effect를 실행할 수 있고 이러한 effect로부터의 data를 시스템으로 피드백 받을 수 있는 object에요. 정리하면, Reducer에서 정의한 state를 action이 발생하면 state를 업데이트 할 수 있고, 앞서 Reducer에서 정의한 reducer 메서드에서 반환되는 effect에 대해 이를 실행하거나 effect 에서 실행되어 d data 결과로 받는 등의 역할을 수행할 수 있다는 얘기로 풀어볼 수 있을 것 같아요.

 

TIP) store 변수는 let으로 정의되었는데 view에 의해 관찰될 필요가 없기 때문이에요.

 

* Step 3

 - 기본적인 뷰를 구성해볼게요. 기본적인 뷰 구조는 아래와 같습니다.

 

NOTE) 

 - Store로 부터 직접적으로 state를 읽을 수 없고, action 또한 같습니다. 후에 배우는 ViewStore를 통해 제대로 구현해볼게요.

 

* 다음 단계로 넘어가기 전에..

  - 뷰를 간단히 만들어봤으니까, 이제 store 내의 state를 관찰해볼까요? 이걸 하기 위해서는 ViewStore를 사용해서 구현할 수 있고, SwiftUI View를 위해서는 WithViewStore라 불리는 편리한 뷰가 준비되어 있어요. 

  - WithViewStore ?

    * view store를 만들기 위해 경량화된 문법을 말합니다.

 

* Step 4

  - View store들은 State가 Equatable이 되도록 요구받습니다. 그렇기 때문에 Equatable을 준수하도록 하는게 첫 번째 할 일이죠. 이 튜토리얼 에서는 extension을 통해 구현하여 State가 Equatable하도록 선언했습니다. 한번 view store가 만들어지면, 우리는 구현한 feature의 state에 접근할 수 있고 유저가 버튼을 탭했을 때 action을 state에 보낼 수 있게 됩니다. 

  - Tip

    * 지금 시점에선 아래의 코드처럼 'observe: { $0 }' 을 사용함으로서 store내의 모든 state를 관찰하고 있지만, 그러나 보통 구현한 기능들은 뷰에서 요구되는 것들보다도 더 많은 state를 홀딩하게 됩니다. 뷰가 자신의 임무를 수행하기 위해 필요한 기본적인 것들을 어떻게 관찰해야 최고의 퍼포먼스를 낼 수 있을까요? Performance 문서를 통해 TCA는 이를 지원하고 있습니다.

(Performance - https://pointfreeco.github.io/swift-composable-architecture/main/documentation/composablearchitecture/performance/)

 

 

 

* Step 5

 - 자, 여기까지 구현한 내용을 프리뷰를 통해 확인해 볼까요? 일반적인 SwiftUI의 프리뷰 선언문 내에 추가되는 변수들은 다음과 같습니다.

   * CounterView()

   * StoreOf<CounterFeature> 

 - Store는 초기 State를 제공하는 방법을 통해 만들어지고 초기 값으로는 여러분이 구현하고자 하는 기능에 맞게 설정하면 됩니다.

 - 아래의 코드에서 trailing closure 부분은 무엇일까요? 이것 또한 여러분이 구현한 기능이 작동할 수 있게 해줄, 우리가 처음에 배웠던!! Reducer 를 선언해주면 됩니다. 그러면 초기 State 와 State와 Action을 가진 Reducer까지, 앞서 섹션에서 배운 TCA에 필요한 기본적인 요소들이 추가되었음을 알 수 있어요.

 - 프리뷰를 작동시켜 덧셈 뺄셈 버튼을 누르면서 UI가 어떻게 변하는지 확인해보세요!

 

* 다음 단계로 넘어가기 전에..

  - 섹션 진행 전, 빠르게 우리의 슈퍼 파워 CounterFeature()를 주석처리 해주세요. 구현하고자 하는 기능의 모든 로직과 행동은 Reducer에 포함되기 때문에, 주석을 한 상태로 프리뷰를 돌려보면 Reducer의 소중함을 알 수 있어요.

 

* Step 6

 - 앞서 언급한 것처럼, CounterFeature Reducer를 주석처리하고 store가 주어진다면 Reducer는 어떤 state의 변화 또는 effect를 실행하지 않게 됩니다. 이렇게 되어 우리가 확인할 수 있는 장점은 구현한 기능의 디자인을 기능의 로직과 행동에 대한 걱정 없이 프리뷰를 진행할 수 있다는 것이죠. UI 그 자체를 확인하고 싶을 때 말이에요.

* Step 7

 - 주석처리했던 CounterFeature()를 원래대로 돌려주세요.  

 

* Section 2 마무리하며..

  - 여기까지가 TCA의 기본 기능에 대한 구현의 전부입니다. 아주 단순한 기능이지만 side effect와 같은 흥미로운 것들을 다루고 있지는 않아요. 앞으로 이런 흥미로운 것들도 함께 다뤄볼게요. 수고했습니다!