SwiftUI ListView 12 - ListView Json 연동하여 500번까지 스크롤 만들기
Json과 연동하여 데이터 불러오기
- 서버프로그램에서 500번까지 데이터를 생성 (Server.js)
- url로 데이터를 불러와서 처리하는 swift 화일 생성(NumberListViewModel)
- ListView에서 처리(ContentView)
#1. Server.js
app.get(‘/data’, (req, res) => {
let page = req.query.page
let numbers = []
for(let index = 1 ; index <= 500; index++){
numbers.push(index)
}
const pageSize = 20
res.json(numbers.slice((page -1 ) * pageSize, pageSize * page))
})
#2. NumberListViewModel.swift
import SwiftUI
class NumberListViewModel: ObservableObject {
@Published var numbers : [Int] = []
func populateData(page: Int){
guard let url = URL(string: "https://island-bramble.glitch.me/data?page=\(page)") else {
return
}
URLSession.shared.dataTask(with: url){ (data, _, error) in
guard let data = data, error == nil else {
return
}
let numbers = try? JSONDecoder().decode([Int].self, from: data)
DispatchQueue.main.async {
self.numbers.append(contentsOf: numbers ?? [])
}
}.resume()
}
func shouldLoadData(id: Int) -> Bool {
return id == numbers.count - 2
}
}
#3. ContentView
import SwiftUI
struct ContentView: View {
@StateObject private var numberListVM = NumberListViewModel()
@State private var currentPage : Int = 1
var body: some View {
List(numberListVM.numbers, id: \.self){ number in
Text("\(number)")
.onAppear(perform: {
if numberListVM.shouldLoadData(id: number){
currentPage += 1
numberListVM.populateData(page: currentPage)
}
})
}.onAppear(perform: {
numberListVM.populateData(page: 1)
})
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
