[SwiftUI Essentials] Building Lists and Navigation - 3

지난 작업에서는 landmark 리스트를 구성하기 위한 view인 LandmarkRow.swift를 만드는 작업을 했었다.

지난 작업을 통해 만든 view를 토대로 list view를 작성하는 방법을 다룬 튜토리얼을 따라하려고 한다.

 

우선, SwiftUI에서는 List를 통해 list view를 지원하고 있다. 이 때, 정적(static)으로 구성하는 방법과 동적(dynamic)하게 구성하는 두 가지 방법이 있다.

정적으로 list view 구성하기

정적이라는 말은 일종의 하드코딩을 한다는 뜻으로 생각하면 된다. 불러온 데이터 전체를 사용하는 것이 아닌 불러온 데이터를 일일히 붙여주는 방식을 사용한다.

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List {
            LandmarkRow(landmark: landmarks[0])
            LandmarkRow(landmark: landmarks[1])
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

 

아래 코드와 같이 지난 작업을 통해 만든 LandmarkRow view에 원하는 데이터를 각각 넣어 화면을 구성하는 방법이 있다. 표시해야 하는 데이터의 수가 적은 경우에는 이 방법이 유용하게 쓰일 수 있을 것 같다는 생각이 들었다.

하지만 표시해야 하는 데이터의 수가 많은 경우에는 이렇게 작성하면 동일한 코드가 반복되게 된다. 이럴 때 사용할 수 있는 방법이 바로 동적인 list view 만드는 방법이다.

동적으로 list view 구성하기

우리는 튜토리얼을 따라오며 각각의 landmark 데이터를 배열의 형태로 작성하였다. 이 배열을 사용하면 동적으로 list view를 구성할 수 있다. 동적으로 list view를 구성하기 위해서는 2가지 방법을 사용할 수 있다. 

 

첫 번째 방법은 여러 데이터들 사이에서 중복되지 않는, 유일한 값을 속성을 지정해주는 방법이다. 우리가 갖고 있는 데이터는 id라는 유일한 값을 갖고 있다. 이런 유일한 값을 지정함으로써 동적으로 list view를 구성하는 방법이 있다.

 

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List(landmarks, id: \.id) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}

 

데이터의 유일한 값인 id를 사용하여 화면을 구성하였다. 이 때 list view에서 받은 landmarks closure를 사용하여 각 데이터의 화면을 구성할 수 있다.

 

두 번째 방법은 데이터에 `Identifiable` 속성을 지정하는 것이다. 이전 튜토리얼에서 작성했던 `models/Landmark.swift`에 돌아가서 Identifiable 속성을 지정해준다.

 

import Foundation
import SwiftUI
import CoreLocation

struct Landmark: Hashable, Codable, Identifiable {
    var id: Int
    var name: String
    var park: String
    
    // ...
    
}

 

그리고 나서 다시 views/LandmarkList.swift로 돌아와서 이전에 작성했던 id 속성을 제거하면 동일하게 동작하는 것을 확인할 수 있다.

 

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List(landmarks) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}

 

---

결과물

 

이번 포스팅에서는 SwiftUI Essential tutorial의 Section 4, 5에 해당하는 내용에 대해서 정리해보았다.

이번 튜토리얼을 통해 SwiftUI를 사용하여 list view를 구현하는 2가지 큰 방법(정적인 방법, 동적인 방법)과 동적인 방법의 2가지 방법(유일한 속성 지정, identifiable를 데이터에 추가)하는 방법에 대해서 배울 수 있었다.