[SwiftUI Essentials] Building Lists and Navigation - 2

지난 작업에서는 랜드마크들의 정보들이 저장되어 있는 json 파일을 앱의 View에서 사용하기 위해서 구조체를 만들고, 파일을 읽어오는 구문을 작성하였다. 오늘의 포스팅은 Section 2. Create the Row View에 해당하는 튜토리얼을 진행하며, 중간 중간 배운 내용을 정리하려고 한다.

이 section에서는 리스트를 구성할 row view를 작성한다.

 

LandmarkRow.swift

row view에 해당하는 SwiftUI 파일을 Views 경로 내에 생성한다. 지난 번 작업에서 코드 리팩토링의 일환으로써 model과 view에 해당하는 코드를 경로로 구분하여 저장하였다.

우선, 불러온 데이터 중 하나를 가져와서 화면을 구성하는 작업을 진행한다. 불러온 데이터를 저장하기 위해 멤버 변수로 landmark를 선언해준다.

 

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark
    
    var body: some View {
        Text("Hello, World!")
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow()
    }
}

 

이렇게 작성하면 LandmarkRow_Previews에서 에러가 뜰 것이다. 그 이유는 LandmarkRow 내에 선언한 landmark를 선언하지 않았기 때문이다. 이를 수정하기 위해서는 Preview에서 View를 선언할 때, landmark를 지정해주면 된다.

 

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark
    
    var body: some View {
        Text("Hello, World!")
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarks[0])
    }
}

 

이렇게 landmark를 지정해주면, 다시 Previews를 Xcode 내에서 확인할 수 있다. 이 작업이 끝나고 나면 화면을 구성하면 된다. 불러온 landmark의 이미지와 이름, 그리고 가로 뷰를 제공하는 HStack과 부모 view의 공간을 활용하도록 하는 Spacer를 사용해서 화면을 구성한다. 완성된 코드와 화면은 아래와 같다.

 

LandmarkRow

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark
    
    var body: some View {
        HStack {
            landmark.image
                .resizable()
                .frame(width: 50, height: 50)
            Text(landmark.name)
        
            Spacer()
        }
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarks[0])
    }
}

 

---

 

이렇게 List에서 각 랜드마크를 표시하기 위한 LandmarkRow view를 작성하는 튜토리얼이 종료되었다. 그런데 Preview를 보게 되면, 우리가 필요한 부분은 아주 소수인데 표시되는 부분은 화면 전체가 표시된다. Section 3. Customize the Row Preview에서는 SwiftUI의 Preview Provider에 대해 조작하여 원하는 대로 preview를 보는 방법에 대해서 소개하고 있다.

 

.previewLayout

previewLayout modifier를 사용하면 preview를 원하는 크기로 볼 수 있다.

Group

Group을 사용하면 여러 개의 preview를 볼 수 있다. Group은 view content의 컨테이너로써, Xcode에서는 그룹의 하위 view들을 preview에 렌더링하는 특징을 갖고 있다고 소개하고 있다.

 

이를 적용하여 코드를 작성하면 아래와 같은 결과 이미지를 얻을 수 있다.

 

완성된 결과물

 

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LandmarkRow(landmark: landmarks[0])
            LandmarkRow(landmark: landmarks[1])
        }
        .previewLayout(.fixed(width: 300, height: 70))
    }
}

 

Group으로 묶은 두 개의 서로 다른 뷰가 각각 preview로 렌더링 되는 것을 확인할 수 있다.