📱 양방향 데이터 바인딩

사용자 프로필 편집 화면을 만들어보자. 사용자가 입력한 데이터를 실시간으로 검증하고 저장하는 기능이야.

// 프로필 뷰모델
class ProfileViewModel: ObservableObject {
    @Published var username: String = ""
    @Published var email: String = ""
    @Published var bio: String = ""
    
    @Published var isUsernameValid: Bool = false
    @Published var isEmailValid: Bool = false
    @Published var canSave: Bool = false
    
    private var cancellables = Set<anycancellable>()
    
    init() {
        // 사용자 이름 유효성 검사
        $username
            .map { $0.count >= 3 }
            .assign(to: \.isUsernameValid, on: self)
            .store(in: &cancellables)
        
        // 이메일 유효성 검사
        $email
            .map { email in
                let emailRegex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
                let emailPredicate = NSPredicate(format: "SELF MATCHES %@", emailRegex)
                return emailPredicate.evaluate(with: email)
            }
            .assign(to: \.isEmailValid, on: self)
            .store(in: &cancellables)
        
        // 저장 버튼 활성화 조건
        Publishers.CombineLatest($isUsernameValid, $isEmailValid)
            .map { usernameValid, emailValid in
                return usernameValid && emailValid
            }
            .assign(to: \.canSave, on: self)
            .store(in: &cancellables)
    }
    
    func saveProfile() {
        guard canSave else { return }
        // 프로필 저장 로직...
        print("프로필 저장됨: \(username), \(email)")
    }
}</anycancellable>

이제 이 뷰모델을 사용하는 SwiftUI 뷰를 만들어보자:

struct ProfileEditView: View {
    @StateObject private var viewModel = ProfileViewModel()
    
    var body: some View {
        Form {
            Section(header: Text("프로필 정보")) {
                TextField("사용자 이름", text: $viewModel.username)
                    .autocapitalization(.none)
                if !viewModel.username.isEmpty && !viewModel.isUsernameValid {
                    Text("사용자 이름은 3글자 이상이어야 합니다")
                        .foregroundColor(.red)
                        .font(.caption)
                }
                
                TextField("이메일", text: $viewModel.email)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                if !viewModel.email.isEmpty && !viewModel.isEmailValid {
                    Text("유효한 이메일 주소를 입력해주세요")
                        .foregroundColor(.red)
                        .font(.caption)
                }
                
                TextField("자기소개", text: $viewModel.bio)
                    .lineLimit(3)
            }
            
            Button("저장") {
                viewModel.saveProfile()
            }
            .disabled(!viewModel.canSave)
        }
        .navigationTitle("프로필 편집")
    }
}

📱 타이머와 애니메이션

Combine의 타이머 Publisher를 사용해 애니메이션을 구현해보자:

struct PulsatingCircleView: View {
    @State private var scale: CGFloat = 1.0
    let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
    
    var body: some View {
        Circle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
            .scaleEffect(scale)
            .animation(.easeInOut(duration: 1), value: scale)
            .onReceive(timer) { _ in
                // 1.0과 1.5 사이를 오가는 애니메이션
                self.scale = self.scale == 1.0 ? 1.5 : 1.0
            }
    }
}

📱 검색 기능 구현하기

검색 기능은 Combine의 장점을 잘 보여주는 예제야. 사용자가 입력할 때마다 API를 호출하는 대신, debounce를 사용해 타이핑이 잠시 멈췄을 때만 검색을 수행할 수 있어:

class SearchViewModel: ObservableObject {
    @Published var searchText = ""
    @Published var searchResults: [SearchResult] = []
    @Published var isLoading = false
    @Published var errorMessage: String?
    
    private var cancellables = Set<anycancellable>()
    
    init() {
        $searchText
            .removeDuplicates()
            .debounce(for: .milliseconds(500), scheduler: RunLoop.main)
            .filter { !$0.isEmpty }
            .handleEvents(receiveOutput: { [weak self] _ in
                self?.isLoading = true
                self?.errorMessage = nil
            })
            .flatMap { [weak self] query -> AnyPublisher<[SearchResult], Error> in
                guard let self = self else {
                    return Fail(error: URLError(.badURL)).eraseToAnyPublisher()
                }
                return self.performSearch(query: query)
            }
            .receive(on: RunLoop.main)
            .sink(
                receiveCompletion: { [weak self] completion in
                    self?.isLoading = false
                    if case .failure(let error) = completion {
                        self?.errorMessage = error.localizedDescription
                    }
                },
                receiveValue: { [weak self] results in
                    self?.searchResults = results
                    self?.isLoading = false
                }
            )
            .store(in: &cancellables)
    }
    
    private func performSearch(query: String) -> AnyPublisher<[SearchResult], Error> {
        // 실제 API 호출 로직...
        // 예제를 위한 더미 데이터
        return Just([
            SearchResult(id: 1, title: "\(query) 결과 1"),
            SearchResult(id: 2, title: "\(query) 결과 2")
        ])
        .setFailureType(to: Error.self)
        .delay(for: .seconds(1), scheduler: RunLoop.main) // 네트워크 지연 시뮬레이션
        .eraseToAnyPublisher()
    }
}

struct SearchResult: Identifiable {
    let id: Int
    let title: String
}

struct SearchView: View {
    @StateObject private var viewModel = SearchViewModel()
    
    var body: some View {
        VStack {
            TextField("검색어를 입력하세요", text: $viewModel.searchText)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
            if viewModel.isLoading {
                ProgressView()
                    .padding()
            } else if let errorMessage = viewModel.errorMessage {
                Text(errorMessage)
                    .foregroundColor(.red)
                    .padding()
            } else {
                List(viewModel.searchResults) { result in
                    Text(result.title)
                }
            }
        }
        .padding()
        .navigationTitle("검색")
    }
}</anycancellable>