[SwiftUI] 간단한 메모앱을 만들면서 알아가보자 ( feat.TCA )

SwiftUI가 처음 나왔을 때, 아주 조금 UI와 관련된 내용들을 학습했던 적이 있다.

시간이 얼마나 지났는지

이제는 채용 공고들을 보면

SwiftUI와 Combine 그리고 TCA가 기술스택에 들어가 있는 것을

생각보다 자주 볼 수 있다.

그렇다. 미뤄뒀던 SwiftUI를 학습해야할 때다.

 

---

 

우선

과거에 학습했던 것들 중에 기억에 남는 것이 전혀 없다.

역시, 일단은 뭐라도 만들어봐야 될 것 같다.

UIkit을 학습하면서 간단한 메모앱을 만들었었는데

이번에도 만들어 봐야겠다.

 

메모앱 구조

간단하다.

기본화면

- 생성된 메모들이 리스트 형태로 보이는 화면 + 메모를 검색할 수 있는 SearchBar

수정 및 추가 화면

- 리스트에 있는 아이템을 클릭해서 들어오게되면 수정

- 상단의 Toolbar에서 추가하기 버튼으로 들어오게 되면 추가

 

아키텍처 

GitHub - pointfreeco/swift-composable-architecture: A library for building applications in a consistent and understandable way,

TCA는 SwifUI에서 UIKit의 MVVM 만큼 주류가 된 아키텍처인 것 같다.

대세에는 이유가 있다고 생각한다.

 

일단 사용해보면서 느낀 건 UIKit에서 사용했던 ReactorKit과 거의 유사한 것 같다.

아니, 차이점을 그다지 느끼지 못했다.

 

간단하게 이해한대로 설명해 보면

단방향 플로우의 아키텍처로 액션 - 상태 변경 - UI 변경 사이클로 이루어진다고 보면 된다.

[아키텍처] ReactorKit에 대해서(feat.Flux)

 

구현

1. 일단 List에 넣을 메모 아이템이 필요하다.

struct Memo: Identifiable, Equatable {
    var id = UUID()
    var title: String
    var description: String
    var date: Date
}

List의 아이템은 Identifiable 해야 한다.

 

2. List의 Row에 들어갈 메모뷰가 필요하다.

struct MemoView: View {
    
    var memo: Memo
    
    init(memo: Memo) {
        self.memo = memo
    }
    
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 12) {
                Text(memo.title)
                    .font(.system(size: 18, weight: .bold))
                    .lineLimit(2)
                    .foregroundStyle(.white)
                Text(memo.description)
                    .font(.system(size: 16, weight: .regular))
                    .lineLimit(2)
                    .foregroundStyle(.white)
            }
            .padding()
            .background(.black)
        }
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
        .background(.black)
        .cornerRadius(12)
    }
}

아직 UI를 구성하는 방식이 복잡하고, 어렵게 느껴진다.

처음 MemoView를 리스트에 적용했을 때, Width가 화면너비에 절반도 표시되지 않았었다.

UIKit을 사용했던 유저라면 .frame() 코드를 잘 봐두면 좋다.

최소 너비를 0, 최대 너비를 .infinity로 설정하게 되면

UIkit의 UITableView에서 Cell에 꽉 차게 Constraint를 주었던 것처럼 만들 수 있다.

 

3. List에는 Memo 배열을 전달해야 한다. 따라서 이 Memo 배열을 상태로 가지고 있는 Memos Reducer를 만들면 된다.

struct Memos: Reducer {
    
    struct State: Equatable {
        var memos: [Memo] = []
        var searchedMemos: [Memo] = []
        var selectedMemo: Memo? = nil
    }
    
    enum Action: Equatable {
        case findMemo(_ content: String)
        case addMemo(_ memo: Memo)
        case deleteMemo(_ id: UUID)
        case updateMemo(id: UUID, title: String, description: String)
    }
    
    var body: some Reducer<State, Action> {
        Reduce { state, action in
            switch action {
            case .findMemo(let content):
                state.searchedMemos = state.memos.filter { $0.description.contains("\(content)") || $0.title.contains("\(content)") }
                return .none
            case .addMemo(let memo):
                state.memos.append(memo)
                return .none
            case .deleteMemo(let id):
                state.memos = state.memos.filter { $0.id != id }
                return .none
            case .updateMemo(id: let id, title: let title, description: let description):
                if let index = state.memos.firstIndex(where: { $0.id == id }) {
                    state.memos[index].title = title
                    state.memos[index].description = description
                    state.memos[index].date = Date()
                }
                return .none
            }
        }
    }
}

 

State를 보면

화면에 보여줄 Memo 배열을 가지고 있다. 또, List의 Row를 클릭해 수정을 원할 때 사용할 SelectedMemo 프로퍼티와 검색 시 사용할 Memo 배열도 가지고 있다. ( Realm이나 SQLite와 같은 DB관련 코드가 없기 때문에 Memo 배열에서 필터링해서 가져와야 한다. )

1. findMemo(_ content: String) - description에 해당 String을 포함하는 메모가 있다면 searchedMemos에 저장하기

2. addMemo(_ memo: Memo) - memos 배열에 메모 추가

3. deleteMemo(_ id: UUID) - id가 동일한 메모를 찾아 제거

4. updateMemo(id: UUID, title: String, description: String) - id가 일치하는 메모를 찾고 내용 업데이트

 

4. 여기까지 구성했다면 MemosView만 구현하면 된다.

struct MemosView: View {
    
    let store: StoreOf<Memos>
    @State private var isShowingBottomSheet = false
    @State private var bottomSheetType: BottomSheetType = .add(.fail)
    @State private var searchedText: String = ""
    @State private var isSearching: Bool = false
    
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            ZStack {
                NavigationStack {
                    List {
                        ForEach(memoList(for: viewStore), id: \.id) { memo in
                            NavigationLink {
                                MemoEditor(memo: memo, memoEditType: .update) { memo in
                                    viewStore.send(.updateMemo(id: memo.id, title: memo.title, description: memo.description))
                                    bottomSheetType = .update(.success)
                                    isShowingBottomSheet.toggle()
                                }
                            } label: {
                                MemoView(memo: memo)
                            }
                        }
                        .onDelete(perform: { indexSet in
                            let index = indexSet[indexSet.startIndex]
                            let id = viewStore.state.memos[index].id
                            viewStore.send(.deleteMemo(id))
                            bottomSheetType = .delete(.success)
                            isShowingBottomSheet.toggle()
                        })
                        .listRowSeparator(.hidden)
                        .listRowBackground(Color.clear)
                    }
                    .listStyle(.grouped)
                    .navigationTitle("메모")
                    .toolbar {
                        NavigationLink(destination: {
                            MemoEditor(memo: nil, memoEditType: .add) { memo in
                                viewStore.send(.addMemo(memo))
                                bottomSheetType = .add(.success)
                                isShowingBottomSheet.toggle()
                            }
                        }, label: {
                            Text("추가하기")
                                .font(.system(size: 18, weight: .regular))
                                .foregroundStyle(.black)
                        })
                    }
                }
                .modifier(NavigationBarStyleModifier())
                .searchable(text: $searchedText, placement: .navigationBarDrawer, prompt: "메모를 검색해보세요.")
                .onChange(of: searchedText) {
                    isSearching = !searchedText.isEmpty
                    viewStore.send(.findMemo(searchedText))
                }
                
                BottomSheet(isShowing: $isShowingBottomSheet, bottomSheetType: $bottomSheetType)
            }
        }
    }
    
    private func memoList(for viewStore: ViewStore<Memos.State, Memos.Action>) -> [Memo] {
        if isSearching {
            return viewStore.state.searchedMemos
        } else {
            return viewStore.state.memos
        }
    }
}

처음 작성해 봐서 그런지 조금은 어설퍼 보일 수 있다. 아니 어설프다.

중간중간 modifier나 BottomSheet 같은 경우에는 따로 포스팅할 예정이다.

 

코드 설명

1. ZStack을 사용한 이유는 BottomSheet의 hierarchy 때문이다. 다음 포스팅에서 해당 내용에 대해 자세하게 작성해야겠다.

2. TCA에서 제공하는 WithViewStore를 통해 위에서 작성했던 Memos Reducer를 관리하는 Store를 인자로 넣고, 상태를 observe 하면 된다. ( 정확하진 않지만 store는 커맨드센터라고 보면 될 것 같다. )

3. List의 아이템을 넘겨줄 때, memoList라는 메서드의 반환값을 넣어준다. 검색 중일 경우에는 검색된 메모만 보여주기 위해서이다. 검색 중이 아니라면 기존의 memo 배열을 보여주면 된다.

4. List의 삭제는 onDelete를 통해서 이루어진다. 여기서 제거하고자 했던 인덱스를 가지고 와 action(.delete(id))을 보내면 상태가 바뀌게 되고 View가 업데이트된다.

 

정리

TCA에 대해 조금은 알게 된 것 같고, 기존보다 UI를 구현할 때, 조금은 감이 생긴 것 같기도 하다.

그래도 여전히 갈길이 멀다. 조금 더 복잡한 로직을 구현해야 하는 앱에서는 헤맬 수도 있을 것 같다.

3월 전후로 앱을 하나 제대로 만들어봐야겠다.