SwiftUI에서 옵저버 패턴 적용하기

 

SwiftUI에서 옵저버 패턴(Observer Pattern)은 상태 변화에 따라 UI를 자동으로 업데이트하도록 구현할 때 매우 유용합니다. SwiftUI는 ObservableObject, @Published, @StateObject, @ObservedObject 등을 통해 옵저버 패턴을 쉽게 적용할 수 있도록 지원합니다.

이번 글에서는 SwiftUI에서 옵저버 패턴을 구현하는 방법과 예제를 통해 이를 활용하는 방법을 살펴보겠습니다.

1. 옵저버 패턴이란?

옵저버 패턴은 객체의 상태 변화를 관찰하는 객체(Observer)들이 변경 사항을 자동으로 감지하고 반응하도록 하는 디자인 패턴입니다. 이 패턴을 사용하면 객체 간의 느슨한 결합(loose coupling)을 유지하면서도 데이터 변경에 동적으로 대응할 수 있습니다.

옵저버 패턴의 장점

• 자동 업데이트: 데이터 변경 시 UI가 자동으로 갱신됨
• 느슨한 결합: 객체 간 의존성이 줄어들어 코드의 유연성 증가
• 확장성: 새로운 옵저버를 쉽게 추가 가능

2. SwiftUI에서 옵저버 패턴 활용 예제

목표

• 사용자 입력에 따라 데이터 변경 사항을 감지하고 UI를 업데이트
• ObservableObject와 @Published를 사용해 옵저버 패턴 구현

1) 모델 정의하기

import SwiftUI
import Combine

// ObservableObject를 채택해 데이터 변경을 감지
class User: ObservableObject {
    @Published var name: String
    
    init(name: String) {
        self.name = name
    }
}

2) View에서 ObservableObject 사용하기

struct ContentView: View {
    @StateObject private var user = User(name: "홍길동")

    var body: some View {
        VStack {
            Text("사용자 이름: \(user.name)")
                .font(.title)

            TextField("이름을 입력하세요", text: $user.name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Spacer()
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3) 다른 View에서 데이터 공유하기

struct DetailView: View {
    @ObservedObject var user: User

    var body: some View {
        VStack {
            Text("상세 화면")
                .font(.largeTitle)

            Text("사용자 이름: \(user.name)")
                .font(.title)
        }
        .padding()
    }
}

// ContentView에서 DetailView로 데이터 전달
struct ContentView: View {
    @StateObject private var user = User(name: "홍길동")

    var body: some View {
        NavigationView {
            VStack {
                Text("메인 화면")
                    .font(.largeTitle)

                NavigationLink("상세 화면으로 이동") {
                    DetailView(user: user)
                }
            }
            .padding()
        }
    }
}

3. 옵저버 패턴 적용의 장점

1. 자동화된 UI 업데이트: 데이터 변경 시 수동으로 UI를 갱신할 필요 없음
2. 중앙 집중적 데이터 관리: 여러 View에서 동일한 데이터 참조 가능
3. 유연한 확장성: 새로운 View를 쉽게 추가하고 데이터 변경을 감지하도록 구현

4. 정리

SwiftUI에서 옵저버 패턴은 ObservableObject와 @Published를 사용해 손쉽게 구현할 수 있습니다. 이를 활용하면 데이터 변경 사항을 실시간으로 감지하고 UI에 반영할 수 있어 더 직관적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

다양한 패턴을 SwiftUI에 적용해 보면서 더 나은 사용자 경험을 제공하는 앱을 만들어 보세요!