【SwiftUI】JSON에서 취득한 것을 List 표시하는 방법 【tutorial】

이번에 만들 앱

소개

이번에는 처음으로 SwiftUI에서 API를 두드려 JSON을 취득하고 List 표시하는 방법을 소개하고 싶습니다.
따라서 이 기사는 SwiftUI는 접한 적이 있지만, API나 JSON은 처음이라고 하는 방향 기사입니다.
덧붙여 API나 JSON은 뭐라고 말하는 것에 대해서는, 다양한 양 기사가 많이 있으므로 그쪽을 참조해 주세요.

환경

·/macOS Big Sur 11.3
· Xcode : 12.4

샘플 JSON

이번은 처음으로 JSON을 취득해, List로 표시시키기 위해, 전통적인 날씨 API라든지가 아니고, 다양한 JSON의 샘플이 준비되어 있다 jsonplaceholder 를 사용해 옵니다.
또 왜 이런 샘플을 사용하는가 하면, 필자가 날씨 API 등의 tutorial에서는 좀처럼 사용하는 방법을 이해할 수 없고, 이쪽의 샘플을 사용하는 것으로, 이해를 깊게 할 수 있었기 때문에 그와 같은 분도 있는 것은 아닐까 생각하고, 이번은 이쪽의 샘플을 사용한 사용 방법을 소개해 가고 싶다고 생각 쓰고 있는 소존입니다.

jsonplaceholder

먼저 이 링크를 클릭하면 이와 같은 화면이 표시됩니다.
이번에는 이 사이트에서는 다양한 JSON 샘플이 준비되어 있으므로 여기/posts를 사용하여 List 표시합니다.

jsonplaceholder를 사용합니다.

jsonplaceholder는/posts,/comments,/albums,/photos,/todos,/users로 나누어져 있으며, 각각에 적합한 데이터가 준비되어 있으며, post라면 텍스트, 그 외에는 이미지나 사람의 사진 등이 준비 되었습니다. 이번에는 텍스트를 추출하고 싶기 때문에 post를 사용해 간다. 사용 방법은 아래와 같은 동영상대로 진행해 가서 post URL을 취득해 갑니다.


우선, posts에서는 userid, id,title,body가 있어, 이번 id,title,body를 사용해 나가기 때문에 이하의 구조체를 만듭니다.

struct Post: Codable, Identifiable {
    var id = UUID()
    var title: String
    var body: String
}

그런 다음 Api의 클래스를 만듭니다.

class Api {
    func getPosts(completion: @escaping ([Post]) -> ()) {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else { return }
        URLSession.shared.dataTask(with: url) { (data, _, _) in
            let posts = try! JSONDecoder().decode([Post].self, from: data!)
            DispatchQueue.main.async {
                completion(posts)
            }
        }
        .resume()
    }
}

마지막으로 View를 다음과 같이 만듭니다.

struct JsonTestView: View {
    @State var posts: [Post] = []
    var body: some View {
        List(posts) { post in
            VStack(alignment: .leading) {
                Text(post.title)
                    .font(.system(.title, design: .rounded)).bold()
                Text(post.body)
            }
        }.onAppear{
                Api().getPosts { (posts) in
                    self.posts = posts
                }
            }
        }
    }

이상으로 얻을 수 있습니다!

요약

우선 입문적인 기사가 되면 좋을까라고 생각했기 때문에 어려운 곳은 접혔습니다만, 꼭 여기에서 image를 url로 취득해 표시하려면 어떻게 하면 좋은 것일까? 라든지 스스로 DB 세우고, API 두드리려면 어떻게 하면 좋은 것일까? 등에 연결해 가는 계기가 되어 주셨으면 합니다!