👁️ @Observable State Management

The new Observation framework in iOS 17. Modern state management that completely replaces ObservableObject.

⭐ Difficulty: ⭐ ⏱️ Est. Time: 1h 📂 App Frameworks

✨ @Observable is?

Swift macro-based state management introduced in iOS 17+. Replaces @Published, @StateObject, @ObservedObject with a simpler, more performant approach.

🆚 Before & After Comparison

Before (ObservableObject).swift

// iOS 16 이하: ObservableObject
class CounterViewModel: ObservableObject {
    @Published var count = 0
    @Published var message = ""

    func increment() {
        count += 1
        message = "Count: \(count)"
    }
}

struct ContentView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        Text("\(viewModel.count)")
    }
}

After (@Observable).swift

// iOS 17+: @Observable
import Observation

@Observable
class CounterViewModel {
    var count = 0
    var message = ""

    func increment() {
        count += 1
        message = "Count: \(count)"
    }
}

struct ContentView: View {
    var viewModel = CounterViewModel()

    var body: some View {
        Text("\(viewModel.count)")
    }
}

🎯 Basic Usage

TodoViewModel.swift

import Observation
import Foundation

@Observable
class TodoViewModel {
    var todos: [Todo] = []
    var isLoading = false
    var errorMessage: String?

    func addTodo(_ title: String) {
        let todo = Todo(title: title)
        todos.append(todo)
    }

    func loadTodos() async {
        isLoading = true
        defer { isLoading = false }

        do {
            // API 호출
            try await Task.sleep(for: .seconds(1))
            todos = [Todo(title: "샘플 할 일")]
        } catch {
            errorMessage = error.localizedDescription
        }
    }
}

struct Todo: Identifiable {
    let id = UUID()
    var title: String
}

📱 SwiftUI Integration

ContentView.swift

import SwiftUI

struct ContentView: View {
    var viewModel = TodoViewModel()

    var body: some View {
        NavigationStack {
            List(viewModel.todos) { todo in
                Text(todo.title)
            }
            .overlay {
                if viewModel.isLoading {
                    ProgressView("로딩 중...")
                }
            }
            .navigationTitle("할 일")
            .toolbar {
                Button("Add") {
                    viewModel.addTodo("새 할 일")
                }
            }
            .task {
                await viewModel.loadTodos()
            }
        }
    }
}

🔄 @State vs Regular Properties

With @Observable, you don't need @State. Regular properties are automatically observed.

StateComparison.swift

struct ContentView: View {
    // ❌ 불필요 (iOS 17+)
    // @State private var viewModel = TodoViewModel()

    // ✅ 이렇게만 해도 Automatically 업데이트
    var viewModel = TodoViewModel()

    var body: some View {
        Text("\(viewModel.count)")
    }
}

🎯 @ObservationIgnored

특정 프로퍼티를 관찰 대상에서 제외 is possible.

IgnoredProperty.swift

import Observation

@Observable
class ViewModel {
    var count = 0  // 관찰됨 (UI 업데이트)

    @ObservationIgnored
    var internalCache: [String: Any] = [:]  // 관찰 안 됨 (성능 최적화)

    func increment() {
        count += 1
        internalCache["lastIncrement"] = Date()  // UI 업데이트 안 함
    }
}

🔗 Using in Environment

EnvironmentUsage.swift

import SwiftUI

@Observable
class AppState {
    var isLoggedIn = false
    var username = ""
}

@main
struct MyApp: App {
    @State private var appState = AppState()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(appState)
        }
    }
}

struct ContentView: View {
    @Environment(AppState.self) private var appState

    var body: some View {
        if appState.isLoggedIn {
            Text("안녕하세요, \(appState.username)")
        } else {
            LoginView()
        }
    }
}

🧪 Computed Property

연산 프로퍼티도 Automatically 관찰.

ComputedProperty.swift

@Observable
class CartViewModel {
    var items: [CartItem] = []

    // 연산 프로퍼티도 Automatically 관찰됨
    var totalPrice: Double {
        items.reduce(0) { $0 + $1.price }
    }

    var itemCount: Int {
        items.count
    }

    func addItem(_ item: CartItem) {
        items.append(item)
        // totalPrice와 itemCount가 Automatically 업데이트됨
    }
}

struct CartView: View {
    var viewModel = CartViewModel()

    var body: some View {
        VStack {
            Text("총 \(viewModel.itemCount)개")
            Text("합계: \(viewModel.totalPrice)원")
        }
    }
}

⚡ Performance Optimization

@Observable only observes properties actually in use.

Performance.swift

@Observable
class ViewModel {
    var name = ""
    var age = 0
    var email = ""
}

struct NameView: View {
    var viewModel: ViewModel

    var body: some View {
        Text(viewModel.name)  // name만 관찰, age/email 변경 시 업데이트 안 함
    }
}

// ObservableObject는 @Published가 붙은 all 프로퍼티 변경 시 업데이트
// @Observable은 실제로 body에서 사용하는 프로퍼티만 관찰 (더 효율적!)

🔄 withObservationTracking

SwiftUI 밖에서도 변경 감지가 is possible.

ManualTracking.swift

import Observation

@Observable
class Counter {
    var value = 0
}

let counter = Counter()

// 변경 감지
withObservationTracking {
    print("Current value: \(counter.value)")
} onChange: {
    print("값이 변경되었습니다!")
}

counter.value = 10  // onChange 실행됨

📊 Migration Guide

Migration.swift

// BEFORE (iOS 13-16)
class OldViewModel: ObservableObject {
    @Published var name = ""
    @Published var age = 0
}

struct OldView: View {
    @StateObject var vm = OldViewModel()
    // or @ObservedObject var vm: OldViewModel

    var body: some View {
        Text(vm.name)
    }
}

// AFTER (iOS 17+)
@Observable
class NewViewModel {
    var name = ""
    var age = 0
}

struct NewView: View {
    var vm = NewViewModel()

    var body: some View {
        Text(vm.name)
    }
}

// 변경 사항 요약:
// 1. ObservableObject → @Observable
// 2. @Published 삭제
// 3. @StateObject/@ObservedObject → 일반 프로퍼티

💡 @Observable의 장점
✅ 코드가 80% 간결해짐
✅ 사용하는 프로퍼티만 관찰 (성능 향상)
✅ No need for @Published or @StateObject
✅ 타입 안전성 향상
✅ 컴파일 타임에 에러 검출

📦 Learning Resources

📎 Apple Official Resources

📘 Documentation 🎬 WWDC Sessions