[SwiftUI] List에 Row 노출시키기

July 27, 2022

튜토리얼 페이지

Row를 만들었으니 이제 리스트 화면을 만들어 Row들을 노출시켜보자

Create the List of Landmarks

LandmarkList.swift 파일 생성

리스트 화면 노출을 위해 LandmarkList 파일을 만든다. (SwiftUI View)

이후 Text 부분을 List로 바꿔주고 List 내부에 만들어둔 Row를 넣어본다.

wow.. 그저 List를 선언하고 그 안에 row를 넣어주었을 뿐인데 테이블뷰 쓴것마냥 리스트가 딱 만들어졌다.

새로운 Swift 파일 추가 (Landmark.swift)

이번에는 랜드마크 모델 코드가 들어갈 Landmark.swift 파일을 생성한다. SwiftUI View가 아니라 Swift File 을 선택해야한다!
생성한 파일 안에 json을 파싱해올 수 있도록 코드를 추가한다. (json 파일의 키값들로 프로퍼티를 추가)
- Codable을 채택한 이유는 후에 json 파일로부터 데이터를 읽어오기 위함이므로 추후에 사용할 때 다시 들춰본다.

struct Landmark: Hashable, Codable {
    var id: Int
    var name: String
    var park: String
    var state: String
    var description: String
}

Make the List Dynamic

하지만 우리가 원하는 건 이렇게 모델 데이터를 하나씩 직접 추가하는 게 아닌 landmakrs의 데이터를 dynamic하게 노출해주는 것!! 그래야 내부의 데이터가 바뀌어도 자동으로 업데이트 될 수 있기 때문에 동적으로 List가 완성되도록 고쳐본다.

List 초기화 코드 변경

처음에 넣었던 Row 코드를 지우고 아래 코드로 대체한다.

        List(landmarks, id: \.id) { landmark in
            
        }

List는 identifiable한 데이터들로 동작하기 때문에 각 row의 데이터는 식별 가능해야한다. 그럴 수 있는 방법이 두 가지가 있는데,

넘겨줄 데이터와 함께 식별가능한 고유의 keyPath를 전달해주는 방법

데이터가 Identifiable 프로토콜을 준수하는 방법이 있다.

우리는 위 두가지 방법중 1번 방법인 keyPath를 전달해주는 방법을 사용한다. (아마도..)

json 데이터에 고유 번호인 id가 있으므로 구분 가능하도록 id를 넘겨준다.

List 클로저 내부 코드 추가

클로저 내부에 이제 표현하고 싶은 row 코드를 추가해준다.

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

landmarks에서 각 landmark에 접근할 수 있게 되었으므로 LandmarkRow(landmark: landmark) 로 코드를 넣을 수 있다.

한방에 모든 랜드마크가 다 나온다..! 👍

Landmark에서 Identifiable 채택해보기

위에 설명했듯이 List가 데이터들의 고유한 id를 확인해서 데이터를 뿌려주는데 2번 방법인 Identifiable을 채택한 방식으로 하지는 않았다. landmark 구조체에서 Identifiable을 채택해보자.

Landmark 데이터에는 Identifierable(식별 가능) 프로토콜에 필요한 id 속성이 이미 있습니다. 데이터를 읽을 때 디코딩하는 속성만 추가하면 됩니다.

는 설명이 있다. 그래서 id 값을 지워봤더니..?

id를 판별할 수 있는 게 없으니까 id를 추가하라고 한다. 그래서 조용히 다시 id를 복구 시켰다. (이름만 id면 되는건가..?ㅎ)

Identifiable을 채택했으니 이제 List에서 id로 판별한다는 말을 해주지 않아도 된다.

지워주어도 잘 동작한다 ~_~

마무리

List를 띄우는것조차 이렇게 간단하다니.. 신기하다…

하지만 궁금한 점이 몇 개 있어서 아래에 적어두고 나중에 찾아보아야 할 것 같다.

Identifiable을 채택후 사용하는 방법
Codable과 Decodable을 만족하는 방법

다음 포스팅은 디테일뷰로 들어가도록 navigating 하는 걸 정리해봐야겠다.