[SwiftUI] 상태 관리

 

 

 

PointFree 강의 Composable Architecture
SwiftUI and State Management Part. 1 ~ Part. 3 정리

 

📚 이번 강의 목표

 

• How to manage state across an entire application
• How to model the architecture with simple units, such as value types
• How to modularize each feature of the application
• How to model side effects in the application
• How to easily write comprehensive tests for each feature

 

전체 애플리케이션에서 상태를 관리하는 방법
값 유형과 같은 간단한 단위로 아키텍처를 모델링하는 방법
애플리케이션의 각 기능을 모듈화하는 방법
애플리케이션의 부작용을 모델링하는 방법
각 기능에 대한 포괄적인 테스트를 쉽게 작성하는 방법

 

 

 

 

 

📚 개요

 

 

크게 3개의 화면이 있고, Counter demo(두 번째) 화면의 상태 변화를 다른 화면에서도 관리할 수 있는 코드를 구현한다.

 

핵심 키워드
@ObservableObject
@ObservedObject
@Binding

 

 

 

📚 코드

 

import Combine

class AppState: ObservableObject {
    @Published var count = 0
    @Published var favoritePrimes: [Int] = []
    @Published var loggedInUser: User?
    @Published var activityFeed: [Activity] = []
    
    var didChange = PassthroughSubject<Void, Never>()
    
    struct Activity {
        let timestamp: Date
        let type: ActivityType
        
        enum ActivityType {
            case addedFavoritePrime(Int)
            case removedFavoritePrime(Int)
        }
    }
    
    struct User {
        let id: Int
        let name: String
        let bio: String
    }
}

 

Combine

이벤트 처리 연산자를 결합하여 비동기 이벤트 처리를 사용자 지정할 수 있다.

Combine 프레임워크는 시간 경과에 따른 값 처리를 위한 선언적 Swift API를 제공한다.

 

Combine | Apple Developer Documentation

 

ObservableObject를 사용하기 위해서는 Combine을 import 해줘야 한다.

 

ObservableObject를 상속하는 경우 objectWillChange라는 프로퍼티가 자동 상속되고, objectWillChange.send()라는 메서드를 이용하여 상태에 변화가 있음을 알릴 수 있다.

 

@Published로 변수를 선언하는 경우 값이 변경될 때 자동으로 objectWillChange.send() 메서드를 호출한다. 

 

 

 

struct ContentView: View {
    @ObservedObject var state: AppState
    var body: some View {
        NavigationView {
            List{
                NavigationLink(destination: CounterView(state: self.state)) {
                    Text("Counter demo")
                }
                NavigationLink(
                    destination: FavoritePrimesView(
                        state: self.state,
                        favoritePrimes: self.$state.favoritePrimes,
                        activityFeed: self.$state.activityFeed
                    )
                ) {
                    Text("Favorite primes")
                }
            }
            .navigationTitle("State Management")
        }
    }
}

 

뷰 전역에서 상태관리를 하기 위해 @ObservedObject를 선언해준다.

 

 

 

 

 

struct CounterView: View {
    // @State var count: Int = 0
    // @State: 상태가 업데이트 될 때마다 뷰 랜더링
    // 화면이 바뀌면(뒤로 가거나 다른 화면으로 넘어갈 때)상태가 저장되지 않음
    
    // @ObservedObject(AppState 클래스에서 ObservableObject 프로토콜 채택해야 함)
    @ObservedObject var state: AppState
    
    // 모달 상태 추적(로컬)
    @State var isPrimeModalShown: Bool = false
    @State var alertNthPrime: Int?
    @State var isAlertShown = false
    @State var isNthPrimeButtonDisabled = false
    
    var body: some View {
        
        VStack {
            HStack {
                Button(action: {self.state.count -= 1}) {
                    Text("-")
                }
                Text("\(self.state.count)")
                Button(action: {self.state.count += 1}) {
                    Text("+")
                }
            }
            Button (action: {self.isPrimeModalShown = true}) {
                Text("Is this prime?")
            }
            Button (action: self.nthPrimeButtonAction) {
                
                //                { self.isNthPrimeButtonDisabled = true
                //                  nthPrime(self.state.count) { prime in
                //                    self.alertNthPrime = prime
                //                    self.isAlertShown = true
                //                    self.isNthPrimeButtonDisabled = false }}
                
                Text("What is the \(ordinal(self.state.count)) prime?")
            }
            .disabled(self.isNthPrimeButtonDisabled)
        }
        .font(.title)
        .navigationTitle("Counter demo")
        .sheet(isPresented: $isPrimeModalShown, onDismiss: {
            self.isPrimeModalShown = false
        }) {
            IsPrimeModalView(state: self.state)
        }
        .alert(isPresented: $isAlertShown) {
            Alert(title: Text("The \(ordinal(self.state.count)) prime is API 대체"))
        }
    }
    func nthPrimeButtonAction() {
        self.isNthPrimeButtonDisabled = true
        nthPrime(self.state.count) { prime in
            self.alertNthPrime = prime
            self.isAlertShown = true
            self.isNthPrimeButtonDisabled = false
        }
    }
}

 

뷰 전역에서 상태 관리를 할 필요가 없는 경우에는 @State(로컬 상태관리)로 선언해준다.

 

is this prime? 버튼을 누르는 경우

1. isPrimeModalShown = true

2. 모달을 내리는 경우(onDismiss) self.isPrimeModalsShown = false

3. IsPrimeModalView(state: self.state) 호출

 

 

struct IsPrimeModalView: View {
    @ObservedObject var state: AppState
    var body: some View {
        VStack {
            if isPrime(self.state.count) {
                Text("\(self.state.count) is prime😻")
                if self.state.favoritePrimes.contains(self.state.count) {
                    Button(action: { self.state.favoritePrimes.removeAll(where: { $0 == self.state.count})
                        self.state.activityFeed.append(.init(timestamp: Date(), type: .removedFavoritePrime(self.state.count)))
                    }) {
                        Text("Remove to/from favorite primes")
                    }
                } else {
                    Button(action: {self.state.favoritePrimes.append(self.state.count)
                        self.state.activityFeed.append(.init(timestamp: Date(), type: .addedFavoritePrime(self.state.count)))}) {
                            Text("Save to favorite primes")
                        }
                }
            } else {
                Text("\(self.state.count) is not prime👻")
            }
            
        }
    }
}

 

해당 변수가 소수일 때

favoritePrimes 배열에 이미 값이 있는 경우 -> 해당 값 삭제

favoritePrimes 배열에 값이 없는 경우 -> 해당 값 추가

 

 

 

 

 

struct FavoritePrimesView: View {
    @ObservedObject var state: AppState
    @Binding var favoritePrimes: [Int]
    @Binding var activityFeed: [AppState.Activity]
    
    var body: some View {
        List {
            ForEach(self.state.favoritePrimes, id: \.self) { prime in
                Text("\(prime)")
            }.onDelete { indexSet in
                for index in indexSet {
                    let prime = self.state.favoritePrimes[index]
                    self.state.favoritePrimes.remove(at: index)
                    self.state.activityFeed.append(.init(timestamp: Date(), type: .removedFavoritePrime(prime)))
                }
            }
        }
        .navigationBarTitle(Text("Favorite Primes"))
    }
}