SwiftUI Tutorials_ Json Parsing

• KavSoft의 튜토리얼 : Json Parsing

 

KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다.

따라서 이 글은 위 튜토리얼에 대한 정리 글입니다.

 

• Xcode 14.0.1
• iOS 16.0

 

이번 내용은 json 데이터를 읽어 리스트 형태로 보여주는 것을 학습한다.

이번 내용에 사용되는 데이터와 관련 패키지는 다음과 같다.

• 실습 json 데이터
• SCWebImageSwiftUI

** 코드는 일부 수정하여 영상과 조금 다를 수 있다.

 

json 데이터로 부터 받아올 데이터 모델을 먼저 정의한다.

** Identifiable을 사용하는 경우 id 속성이 반드시 필요하며, 이 경우 List에서 id 값을 전달하지 않아도 된다.

** 받아진 데이터 타입을 디코딩하기 위해서는 Decodable 을 채택하고 각 속성의 이름을 json 데이터의 키 값과 동일하거나 CodingKey를 정의해주어야 한다.

struct Data: Identifiable, Decodable {    
    var id: Int
    var login: String
    var node_id: String
    var avatar_url: String
}


// 만약 변수명을 json key와 다르게 하고 싶다면 다음과 같이 구현할 수 있다.

struct Data: Identifiable, Decodable {
    
    var id: Int
    var login: String
    var nodeID: String
    var avatarURL: String
    
    enum CodingKeys: String, CodingKey {
        case id, login
        case nodeID = "node_id"
        case avatarURL = "avatar_url"
    }
}

 

이번 예제에 사용할 json 파일의 데이터를 읽어 [Data] 타입으로 변환하는 클래스이다.

ObservableObject 프로토콜을 채택하면 해당 클래스의 인스턴스를 관찰하고 있다가 값이 변경되면 뷰를 업데이트 한다.

** 이때 ObservableObject는 클래스에서만 사용할 수 있다.

Published를 사용하면 해당 속성이 변경되는 경우 뷰가 업데이트 된다.

class DataParser: ObservableObject {
    
    @Published var jsonData = [Data]()
    
    private let url = "https://api.github.com/users/hadley/orgs"
    
    init() {
        let session = URLSession(configuration: .default)
        
        session.dataTask(with: URL(string: url)!) { (data, _, _) in
            do {
                let fetch = try JSONDecoder().decode([Data].self, from: data!)
                
                DispatchQueue.main.async {
                    self.jsonData = fetch
                }
            }
            catch {
                print(error.localizedDescription)
            }
        }.resume()
    }
}

 

ListView에 보여질 Row뷰를 정의한다.

AnimatedImage는 SDWebImageSwiftUI SDWebImage를 베이스로 하는 이미지 로딩 프레임워크에서 제공하는 기능이다.

말 그대로 gif 같은 움직이는 이미지를 가져와 보여줄 때 사용할 수 있다. 

** 자세한 사용법은 위 링크되어 있는 깃헙에 들어가 확인가능하다.

import SDWebImageSwiftUI

struct ListRow: View {
    
    var url: String
    var name: String
    
    var body: some View {
        HStack {
            AnimatedImage(url: URL(string: url))
                .resizable()
                .frame(width: 60, height: 60)
                .clipShape(Circle())
                .shadow(radius: 20)
            
            Text(name)
                .fontWeight(.heavy)
                .padding(.leading, 10)
        }
    }
}

 

이제 최종적으로 json 데이터를 읽은 뒤 해당 데이터를 List 뷰로 보여줄 수 있다.

** ObservedObject는 ObservableObject를 구독하고 값이 업데이트될 때 마다 뷰를 갱신하는 propertyWrapper이다.

struct JsonParse: View {
    
    @ObservedObject var parser = DataParser()
    
    var body: some View {
        NavigationView {
            List(parser.jsonData) { data in
                ListRow(url: data.avatarURL, name: data.login)
            }
        }
    }
}