[SwiftUI] List, Observable 객체 활용 예시

Example

• List에 Observable 객체 리스트를 이용하여 구성하고 아이템 추가, property 변경 등을 테스트 한다.
• State 프로퍼티로 선언된 list 배열이 아이템 추가, 삭제 등을 observe하고 ObservableObject로 선언된 ListItem이 게시된 프로퍼티의 변경을 감지해 ListItemView를 다시 그리게 해준다.
• ListItem: ObservableObject, Identifiable
  • name: @Published
  • age: @Published
• ListItemView: ListItem의 내용을 보여주는 뷰
• list: @State인 ListItem 배열

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
    
    @State var list: [ListItem] = [ListItem(name: "Park", age: 20), ListItem(name: "Kim", age: 22), ListItem(name: "Choi", age: 25)]
    
    var body: some View {
        VStack (spacing: 20) {
            List(list) { item in
                ListItemView(item: item)
            }
            
            //첫 번째 항목의 name 변경
            Button(action: {
                list[0].name = "Name Changed"
            }, label: {
                Text("Change Name")
            })
            
            //첫 번째 항목 삭제
            Button(action: {
                list.removeFirst()
            }, label: {
                Text("Remove First")
            })
            
            //마지막 항목 삭제
            Button(action: {
                list.popLast()
            }, label: {
                Text("Pop")
            })
            
            //새로운 항목 추가
            Button(action: {
                list.append(ListItem(name: "New Man", age: 30))
            }, label: {
                Text("Append")
            })
        }
    }
}

//ListItem의 내용을 보여주는 View
struct ListItemView: View {
    @ObservedObject var item: ListItem
    
    var body: some View {
        HStack {
            Text(item.name)
            Text(item.age.description)
        }
    }
}

class ListItem: ObservableObject, Identifiable {
    @Published var name: String
    @Published var age: Int
    var id: UUID = UUID()
    
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 11")
            .previewDisplayName("아이폰 11")
    }
}