[SwiftUI] 동적으로 List에 item 추가하는 방법

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()
    }
}

 

※ 이 글은 워드프레스에 작성한 글과 동일한 작성자의 동일한 글입니다.

https://royfactory.net/2023/07/10/swiftui-a-list-of-dynamic-items/

[SwiftUI] How to add dynamic items to the List - ROY FACTORY