How to create a list of dynamic items

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-a-list-of-dynamic-items]

 

How to create a list of dynamic items

[동영상 강좌 : https://youtu.be/ffyJXfZCd4c]

동적인 항목들을 처리하기 위해서, 먼저 SwiftUI에게 어떤 항목이 식별할 수 있는 것인지 반드시 알려줘야 합니다. 하나의 요구사항만을 가진Identifiable 프로토콜을 사용합니다: 일종의 id값은 SwiftUI가 어떤 항목인지 확인하는데 사용할 수 있습니다.

 

예를들어, 식당에 ID와 이름을 가진 Restaurent 구조체를 만들수 있으며, ID는 랜덤 식별자이므로 SwiftUI는 어떤 것인지 알고 있습니다.

struct RestaurantRow: View {
    var restaurant: Restaurant

    var body: some View {
        Text("Come and eat at \(restaurant.name)")
    }
}

 

다음으로 목록 행의 모양을 정의할 것입니다. 하나의 식당을 저장하고 텍스트 뷰로 이름을 출력하는 RestaurantRow 뷰를 정의할 것입니다.

struct RestaurantRow: View {
    var restaurant: Restaurant

    var body: some View {
        Text("Come and eat at \(restaurant.name)")
    }
}

 

마지막으로 모든것을 보여주는 목록 뷰를 만들 수 있습니다. 이는 약간의 예제 데이터를 만드는 것을 의미하고, 배열 안에 집어넣고, 그려야되는 목록 안으로 전달합니다.

struct ContentView: View {
    var body: some View {
        let first = Restaurant(name: "Joe's Original")
        let second = Restaurant(name: "The Real Joe's Original")
        let third = Restaurant(name: "Original Joe's")
        let restaurants = [first, second, third]

        return List(restaurants) { restaurant in
            RestaurantRow(restaurant: restaurant)
        }
    }
}

 

이는 데이터를 만드는게 대부분입니다 - 마지막 부분은 실제 동작하는 곳입니다.

return List(restaurants) { restaurant in
    RestaurantRow(restaurant: restaurant)
}

 

restaurants 배열로부터 목록을 만들고, 배열의 각 항목에 대해 한번씩 클로져를 실행합니다. 매번 그 클로져는 restaurant에 배열에서 하나의 항목으로 채워지기에, RestaurantRow를 만드는데 사용할 수 있습니다. 

사실상, 이처럼 사소한 경우에 코드를 더 짧게 만들 수 있습니다.

return List(restaurants, rowContent: RestaurantRow.init)