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

< Essentials - Adding Side Effects >

 

< Section 3  - 타이머 관리하기 >

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

 

 

* 개요

 - 네트워크 요청은 아마도 Side effect의 가장 공통적인 타입들 중의 하나지만, 당연히 이것만 있는게 아니겠죠.

 - CounterFeature에 새로운 기능을 추가할거에요.

   * 탭했을 때 1초씩 반복하면서 count를 1씩 증가시키는 버튼을 추가할게요.

 

* Step 1

 - 뷰 계층에서부터 시작할게요. isTimerRunning의 상태 값에 따라 'Start Timer' 혹은 'Stop timer' 를 표시하는 버튼 하나를 추가할거에요. 그리고 이 버튼을 탭했을 때 'toggleTimerButtonTapped' action을 보낼거에요.

 - NOTE)

  * 'isTimerRunning' state와 'toggleTimerButtonTapped' action은 아직 존재하지 않아요, 다음 스텝에서 추가할게요!

 

* Step 2

 - 다음으로 앞서 언급했듯, 'isTimerRunning' state와 'toggleTimerButtonTapped' action을 추가할게요.

 - action을 새롭게 추가했으니, reduce 메서드에도 새로운 action에 대한 처리를 해줘야 겠죠? 후에 타이머와 결합한 약간의 비동기 작업을 실행해야 하는데, 일단 앞서 배운 비동기 작업에 적합한 closure인 '.run'을 리턴해둘게요.

 

* Step 3

- '.run' effect 내부에 아래와 같이 선언합니다. 무한 루프 while과 Task에 1초의 sleep을 걸어주고 있어요. 사실 이 방법은 타이머를 사용하는 최고의 방법은 아니에요. 하지만 지금 당장의 목적을 위해서라면 괜찮을거에요.

 

* Step 4

 - Reducer 내에서 타이머가 작동하는 순간마다 반응하기 위해 우리는 새로운 action인 'timerTick'이 필요해요. 이 친구는 매번Task.sleep이 작동한 후에 action으로 보내질 것이고 이 action에서 우리는 state의 count를 증가시킬 거에요.

새로 추가된 action 'timerTick'

timerTick 이 작동하면 count 를 +1 씩 증가시킵니다.

Task.sleep 이 작동하고 timerTick action을 보냅니다.

 

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

 - 하지만 사실 버그가 있어요.. 눈치채신 분들도 있겠지만, 지금 보면 타이머 시작에 관한 내용은 있지만 멈추는 방법에 대해서는 구현하지 않았죠.. 다음 단계에서 살펴보죠!

 

* Step 5

 - 버그를 고치기 위해, 'effect cancellation'이라 알려진 TCA의 강력한 기능을 사용해볼게요. 

 - 어떤 effect든 우리는 이 effect를 cancellable로서 취급할 수 있어요. 이것을 위해서는 'cancellable(id:cancelInFlight:)' 메서드에 ID를 제공하여 사용합니다.  그리고 나서 후에 우리는 'cancel(id:)' 를 사용하여 effect를 취소할 수 있어요.

enum 타입으로 CancelID를 설정합니다

 

* Step 6

- Preview를 통해 구현한 기능을 작동시켜볼까요?

- 이제 구현한 기능이 예상대로 작동합니다. 타이머를 시작하고 몇 초 동안 우리는 count가 올라가는 것을 볼 수 있어요. 그리고 타이머를 멈출 수도 있죠. 이는 오랫동안 살아있는 effect를 관리하는 방법과 그 effect를 취소하는 방법을 보여주고 있어요.