[SwiftUI] How to add dynamic items to the List

• How to add dynamic items to the List
• 1. 데이터 모델 생성
• 2. List Row Item View 생성
• 3. 목록 생성
• 4. 미리보기
• 5. 테스트 전체 소스

---

How to add dynamic items to the List

 App에서 가장 많이 쓰이는 게 List입니다. (전적으로 제 기준). 보통 정적 리스트는 메뉴의 성격을 띠는 변하지 않는 시스템 메뉴에 많이 사용되고, 그 외의 대부분은 동적으로 리스트를 할당하여 사용하게 됩니다.

만약 위와 같이 제목과 내용으로 이루어진 화면을 만든다고 가정한다면

---

1. 데이터 모델 생성

struct Board: Identifiable {
    let id = UUID()
    let title   : String
    let content : String
}

 각각의 게시글을 담기 위한 모델인 Board에 제목(title)과 내용(content) 변수를 생성하여줍니다. 여기서 id는 중복되지 않는 단일 객체로 분류하기 위해 선언해 줍니다.

---

2. List Row Item View 생성

struct BoardRowView: View {
    var board: Board

    var body: some View {
        Section {
            Text("title \(board.title)")
            Text(board.content)
        }
    }
}

 생성된 데이터 모델을 가지고 리스트의 각 Row별로 어떻게 보여줄지를 정하는 부분입니다. 이를 위해 board라는 Board 객체를 선언하여 전달받아, body부분에 View를 생성해 줍니다.

 

Section : 각 row를 그룹핑하기 위한 View

Text : 단순 TextView

---

3. 목록 생성

struct DynamicItems: View {
    let list = [
        Board(title: "게시글 제목입니다 #1", content:"게시글 내용입니다.#1"),
        Board(title: "게시글 제목입니다 #2", content:"게시글 내용입니다.#2"),
        Board(title: "게시글 제목입니다 #3", content:"게시글 내용입니다.#3")
    ]

    var body: some View {
        List(list) { item in
            BoardRowView(board: item)
        }
    }
}

 목록을 보여주기 위해 테스트로 Array목록을 list로 생성해 줍니다.

 이를 List의 변수로 담아 forEach loop를 수행하게 하면, list의 개수(count)만큼 각 게시글 목록의 게시물을 탐색하여 출력하게 됩니다.

---

4. 미리보기

struct DynamicItems_Previews: PreviewProvider {
    static var previews: some View {
        DynamicItems()
    }
}

 반드시 선언되어야 하는 부분은 아니고, 작성한 내용을 화면 실행 없이 미리 확인하기 위해 위와 같이 선언해 주면 미리보기를 아래와 같이 확인 가능합니다.

미리보기 결과

---

5. 테스트 전체 소스

import SwiftUI

// 데이터 모델 생성
struct Board: Identifiable {
    let id = UUID()
    let title   : String
    let content : String
}

// 리스트 Row Item View 생성
struct BoardRowView: View {
    var board: Board

    var body: some View {
        Section {
            Text("title \(board.title)")
            Text(board.content)
        }
    }
}

// 메인 페이지
struct DynamicItems: View {
    let list = [
        Board(title: "게시글 제목입니다 #1", content:"게시글 내용입니다.#1"),
        Board(title: "게시글 제목입니다 #2", content:"게시글 내용입니다.#2"),
        Board(title: "게시글 제목입니다 #3", content:"게시글 내용입니다.#3")
    ]

    var body: some View {
        List(list) { item in
            BoardRowView(board: item)
        }
    }
}

// 화면 미리보기
struct DynamicItems_Previews: PreviewProvider {
    static var previews: some View {
        DynamicItems()
    }
}

테스트 소스 결과