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

< Essentials - Adding Side Effects >

< Introduction >

- 구현한 기능과 외부 세계가 커뮤니케이션 하는 방법을 배웁니다.

- 구현한 기능으로 외부 세계로부터 데이터를 피드백 받는 방법을 배웁니다.

 

< Section 1  - Side effect란 무엇인가?  >

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

 

 

* 개요

 - Side effect는 지금까지도 기능 개발에서 가장 중요한 부분입니다.

 - Side effect는 API Request를 만들거나, 파일 시스템과 상호작용하거나 시간 기반의 비동기 작업을 실행하는 것과 같은 외부 세계와의 커뮤니케이션을 할 수 있게 만들어주는 것들이죠. Side effect없이 우리가 만드는 애플리케이션은 사용자를 위한 값을 제공하는데 있어 아무 것도 할 수 없게 됩니다.

 - 하지만 Side effect는 또한 기능의 가장 복잡한 부분입니다. 상태 변화는 단순한 프로세스입니다. 만약 여러분이 같은 State와 같은 Action을 가진 Reducer를 작동시킨다면, 여러분은 항상 같은 결과를 얻게 될거에요. 하지만 effect는 외부 세계의 엉뚱한 요소들의 영향을 받을 수 있습니다. 예를 들면 네트워크 연결, 디스트 권한 등등이죠. effect를 실행하는 매 순간, 여러분은 완전히 다른 대답을 얻게 될 수 있어요.

- 먼저 Reducer 적합성에서 직접적으로 효과적인 작업을 수행할 수 없는 이유를 살펴보고, 그런 다음 라이브러리가 effect 수행을 위해 어떤 도구를 제공하는지 살펴보겠습니다.

 

* Step 1

  - 앞선 Your First Feature에서 만든 counter 기능에 약간의 새로운 요소를 추가해볼게요.

  - 버튼 하나를 추가할게요. 이 버튼이 눌렸을 때, 현재 표시되는 숫자에 대한 사실을 가져오기 위한 네트워크 요청을 수행합니다.

  - 위의 내용에 접근하는 두 가지 방법이 있습니다.

   # 때때로 사람들은 Reducer를 첫번째로 수행하고 그 다음 뷰를 수행하는 것을 원할 수 있어요.

   # 또 다른 사람들은 그 반대의 순서로 수행하길 원할 수 있죠. 이번 튜토리얼에서는 이 방식으로 진행할게요.

   # CounterView의 하단에 추가적인 버튼을 추가하고, 이 버튼이 눌릴 때마다 'factButtonTapped' action을 보낼 것입니다. 이 부분을 진행하면서 구현해볼게요.

 

 

* Step 2

 - 하단에 ProgressView를 추가해 fact(카운팅한 숫자에 대한 설명을 알려줘요)를 를 로딩하는 동안 로딩상태를 표시할게요. 그리고 또한 전달받은 fact를 표시하기 위해 옵셔널 바인딩을 사용할게요.

 - isLoading과 fact state를 조건문으로 사용할거에요. Counter feature에는 아직 아무것도 작성되어 있지 않아 에러가 뜨겠지만 곧 해결해볼거에요.

 

* Step 3

 - CounterFeature Reducer로 다시 돌아올게요.

 - 간단한 State와 Action타입을 가지고 있고 Reducer는 단순히 count state를 action에 따라 증가시키거나 감소시키고 있어요.

 

* Step 4

 -  추가적인 State와 Action을 넣어볼게요.

 -  앞서 뷰에서 fact를 옵셔널 바인딩해서 사용해주었고, isLoading의 상태에 따라 ProgressView를 보여줄건지의 아닐지의 여부를 작성했었죠? Step 2 에서요!

 - 그리고 이 fact를 외부세계로부터 전달받기 위해서 fact를 요청하는 버튼에 대한 action이 있어야겠죠? 그래서 factButtonTapped라는 action을 추가해줄게요. 

 - 그리고 reduce 메서드를 볼게요. factButtonTapped action이 발생하면 우리는 어떤 처리를 해야할까요?

   * 새로운 fact를 요청하기 위해서 기존의 fact가 있다면, fact값을 비워줘야 해요.

   * 이 action은 결국 API Request를 통해 결과를 받게 될 것이기 때문에, 기다리는 동안 뷰 처리를 위해 isLoading의 값을 true로 바꿔주어야 해요. 

   * 그리고 일단 effect로 전달되는 것이 없으니 'return .none'을 작성합니다.

 - decrementButtonTapped action과 incrementButtonTapped action이 발생하면 우리는 어떤 처리를 해야할까요?

   * API Request를 통해 전달받은 fact는 그 숫자가 설정되어 있는 경우에만 의미가 있겠죠? 그렇기 때문에 fact에 nil을 부여해 숫자가 변경되는 동안 변경되기 전의 숫자로 전달받은 fact가 화면에 출력되지 않게 해야해요.

 

* Step 5

 - 이제 주제에 대한 질문을 다시 한번 생각해봐야 해요. 우리는 어떻게 side-effect를 실행할 수 있을까요?

 - state의 현재 count에 대한 fact를 가져오기 위해 numbersapi.com을 사용해요. 일단 URLSession을 reducer 내에서 바로 사용해 비동기 작업을 실행할거에요. 하지만 운이 없게도 이는 허용되지 않아요.

 

 

* Section 마무리 

  - TCA는 복잡하고 거대한 side effect들을 단순하고 퓨어한 state의 변형을 통해 분리합니다.

  - 이것은 TCA의 핵심의 하나이고 이렇게 하면 많은 베네핏을 가질 수 있어요. 

  - 운이 좋게도 TCA는 side effect를 실행하기 위한 적절한 도구를 우리에게 제공하는데 그것이 바로 Effect에요. 이 Effect에 대해 다음 글에서 다뤄보도록 할게요.