SwiftUI ListView 12 - ListView Json 연동하여 500번까지 스크롤 만들기

Json과 연동하여 데이터 불러오기

​

1. 서버프로그램에서 500번까지 데이터를 생성 (Server.js)
2. url로 데이터를 불러와서 처리하는 swift 화일 생성(​NumberListViewModel)
3. 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()

    }

}

 

 

1~500번까지 스크롤 생성