TCA 튜토리얼 따라해보는중 01-Your first feature

https://swiftpackageindex.com/pointfreeco/swift-composable-architecture/1.23.1/tutorials/composablearchitecture/01-01-yourfirstfeature

튜토리얼 링크 저장해둔지도 좀 됐거같은데 

이제라도 맛이라도 보고자 시작

 

...

일단 TCA에 대해 이야기해보자면

이게 나온지도 좀 됐는데 그때당시에는 "the" 라는걸 큼지막하게 붙여놔서 봤던거같은데 지금은 Composable Architecture 라고 제목으로 되어있는 

"T"he "C"omposable "A"rchitecture라 이름지어서 TCA다 

처음봤을땐 그냥 일종의 패턴형식으로 이렇게 하면 좋지않을까 하는 개발론 이야기로만 있는 줄 알았는데

어느샌가 프레임워크로 배포되고 스위프트 공식홈페이지에서 안내해주고있더라

아직 내용 자체는 잘 이해가 안간다. 

소개 페이지를 읽어본 느낌으로는 모든 실행방향이 한방향으로만 돌아가서 테스트하고 쉽고 사이드이펙트가 적다 뭐 이런 설명으로 보인다 

뭐 아무튼 시작은 이했고 이제 튜토리얼을 시작하고 후기를 적어볼거다

....

 

 

예상시간도 나와주는 친절함과 스크롤하면 할수록 마치 진짜 진행된마냥 보여주는 애니메이션효과가 엄청 신기하다

 

 

게임 사이트에서 이런걸 봤던거같은데 코딩하는걸 이렇게 보여주니 엄청 신선하게 느껴진다

 

신기한건 신기한거고...

이번 첫 시간에 만드는건 CounterFeature라는 부분인데 

@Reducer
struct CounterFeature {
    
    @ObservableState
    struct State {
        var count = 0
    }
    
    enum Action {
        case decrementButtonTapped
        case incrementButtonTapped
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .decrementButtonTapped:
                state.count -= 1
                return .none
                
            case .incrementButtonTapped:
                state.count += 1
                return .none
            }
        }
    }
}

솔직히 아직까진 이게 TCA! 라는 느낌보단 그냥 action -> reduce 부분을 만들어준 swfitui라는 느낌이라 

그닥 잘 모르겠다

그리고 이상하게 내 xcode에서는 해당부분이 에러로 빌드가 되지않는데....

나와 같은 사람도 찾았지만 해결은 못찾았다

https://github.com/pointfreeco/swift-composable-architecture/discussions/3733

"Your first feature" tutorial doesn't compile · pointfreeco swift-composable-architecture · Discussion #3733

 

어처피 개념익히는 부분에선 필요없을거같아서 해당 패키지에서 원하는데로 프로토콜을 집어넣어주고 자동생성으로 생기는 reduce함수를 정의해줬다

struct CounterFeature: Reducer {
    
    @ObservableState
    struct State {
        var count = 0
    }
    
    enum Action {
        case decrementButtonTapped
        case incrementButtonTapped
    }
    
    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
        }
    }
}

 

 

뭐 결국 reduce가 받아서 state값이 변화하고 이게 view로 갈거다

뷰는 따로 타이핑하지않고 복사

import SwiftUI
import ComposableArchitecture

struct CounterView: View {
  let store: StoreOf<CounterFeature>
  
  var body: some View {
    VStack {
      Text("\(store.count)")
        .font(.largeTitle)
        .padding()
        .background(Color.black.opacity(0.1))
        .cornerRadius(10)
      HStack {
        Button("-") {
          store.send(.decrementButtonTapped)
        }
        .font(.largeTitle)
        .padding()
        .background(Color.black.opacity(0.1))
        .cornerRadius(10)
        
        Button("+") {
          store.send(.incrementButtonTapped)
        }
        .font(.largeTitle)
        .padding()
        .background(Color.black.opacity(0.1))
        .cornerRadius(10)
      }
    }
  }
}

#Preview {
  CounterView(
    store: Store(initialState: CounterFeature.State()) {
      CounterFeature()
    }
  )
}

 

지금까지한 부분은 결국 ObservableState 개념익힐때 썻던 예제랑 비슷하다는 생각말곤 안드네 

 

다음 부분 02는 내일 이어서