본문 바로가기
iOS

[iOS][Swift UI] List View 사용하기

by teamnova 2023. 4. 4.
728x90

SwiftUI는 iOS 앱 개발에서 많이 사용되는 프레임워크 중 하나입니다. SwiftUI를 사용하면 기존에 UIKit으로 개발하던 방식과는 다르게 선언적인 방식으로 더 쉽게 앱을 개발할 수 있습니다.

이번 글에서는 SwiftUI에서 List View를 작성하는 방법에 대해 알아보겠습니다. List View는 iOS 앱에서 데이터를 표시하기 위해 가장 많이 사용되는 뷰 중 하나입니다.

 

1.

2List View 생성하기 List View를 생성하기 위해서는 SwiftUI에서 제공하는 List View를 사용하면 됩니다. 아래와 같이 코드를 작성하면 기본적인 List View를 생성할 수 있습니다.

List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

2. 

List View에 데이터 바인딩하기 List View에서는 데이터를 표시하기 위해 ForEach 구문을 사용합니다. ForEach 구문은 배열 또는 Range 데이터를 가져와서 각 데이터에 대해 반복적으로 뷰를 생성합니다. 아래와 같이 코드를 작성하면 List View에 배열 데이터를 바인딩할 수 있습니다.

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
        }
    }
}

3.

List View에 행 추가하기 List View에 행을 추가하기 위해서는 List View 내부에 원하는 뷰를 추가하면 됩니다. 아래와 같이 코드를 작성하면 List View에 행을 추가할 수 있습니다.

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            Text("New Item")
        }
    }
}

4.

List View에서 선택된 항목 처리하기 List View에서 항목을 선택했을 때 처리하기 위해서는 onTapGesture를 사용합니다. onTapGesture는 사용자가 뷰를 탭했을 때 실행할 액션을 정의할 수 있습니다. 아래와 같이 코드를 작성하면 List View에서 항목을 선택할 수 있습니다.

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
                    .onTapGesture {
                        print("Selected item: \(item)")
                    }
            }
        }
    }
}

이처럼 SwiftUI에서 List View를 작성하는 방법에 대해 알아보았습니다. List View를 사용하면 iOS 앱에서 데이터를 표시하는 작업을 쉽게 처리할 수 있습니다.

'iOS' 카테고리의 다른 글

[iOS][SwiftUI] 메모장 만들기  (0) 2023.05.07
[iOS][Swift UI] 계산기 예제  (0) 2023.04.20
[iOS][Swift UI] iPages  (0) 2023.03.22
[iOS][Swift UI] 뷰 강제닫기  (0) 2023.03.07
[iOS][Swift UI] 로딩 화면 구현하기  (0) 2023.02.20