iOS | Codable 을 활용해서 가져온 데이터를 SwiftUI 를 활용해서 표시해보자.

안녕하세용 !
이번 글에서는 Codable 을 이용해 간단한 데이터를 서버에서 가져와서
SwiftUI로 표시해보는걸 공유해보려고 해요.

Codable 을 활용해 model 만들기.

REST API 샘플
https://developer.github.com/v3/users/#get-a-single-user

struct User: Codable {
    let name: String
    let accountName: String
    let avatarURL: String
    let followers: Int
    let following: Int

    enum CodingKeys: String, CodingKey {
        case name
        case accountName = "login"
        case avatarURL = "avatar_url"
        case followers
        case following
    }
}

– 그대로 변수명으로 쓰기 애매한 것들이 있어서 Swift 스타일에 맞게 조금 변형했어요.
– CodingKey 를 활용해 JSON 의 key 와 다른 부분을 명시해주었어요.

서버에 request 하는 메소드 추가하기

struct ContentView: View {
    @State private var user: User? // ✔️ 나중에 Text에서 표시하기 위해서 @State

    private func requestData() {
        guard let url = URL(string: "https://api.github.com/users/unnnyong") else {
            print("Please check URL")
            return
        }

        let request = URLRequest(url: url)

        URLSession.shared.dataTask(with: request) { data, response, error in
            if let data = data,
                let decodedData = try? JSONDecoder().decode(User.self, from: data) { // ✔️ Codable 로 만들어두었던 User 로 파싱.

                self.user = decodedData

                return
            }

            print(error?.localizedDescription ?? "ERROR !")
        }.resume()
    }
}

SwiftUI 의 화면에 서버에서 받아온 정보를 표시하기.

    var body: some View {
        VStack(alignment: .center, spacing: 5.0) {
            Text(user?.name ?? "")
            Text(user?.accountName ?? "")
            Text(user?.avatarURL ?? "")
            Text("\(user?.followers ?? 0)")
            Text("\(user?.following ?? 0)")
        }.onAppear(perform: requestData)
    }

• VStack 을 활용해서 Text를 만들고, 각각의 property를 표시합니다.
  
  
  

Check Simulator

전체 코드

// Model
struct User: Codable {
    let name: String
    let accountName: String
    let avatarURL: String
    let followers: Int
    let following: Int

    enum CodingKeys: String, CodingKey {
        case name
        case accountName = "login"
        case avatarURL = "avatar_url"
        case followers
        case following
    }
}

// View
struct ContentView: View {
    @State private var user: User?

    var body: some View {
        VStack(alignment: .center, spacing: 5.0) {
            Text(user?.name ?? "")
            Text(user?.accountName ?? "")
            Text(user?.avatarURL ?? "")
            Text("\(user?.followers ?? 0)")
            Text("\(user?.following ?? 0)")
        }.onAppear(perform: requestData)
    }

    // request method
    private func requestData() {
        guard let url = URL(string: "https://api.github.com/users/unnnyong") else {
            print("Please check URL")
            return
        }

        let request = URLRequest(url: url)

        URLSession.shared.dataTask(with: request) { data, response, error in
            if let data = data,
                let decodedData = try? JSONDecoder().decode(User.self, from: data) {

                self.user = decodedData

                return
            }

            print(error?.localizedDescription ?? "ERROR !")
        }.resume()
    }
}

---

아직 SwiftUI 의 경험이 적어서 @State 를 사용한게 적절한지 모르겠네요 ㅠ
조금 더 활용해보고 @State 에 대해서도 한 번 글 남겨보도록 할게요 ~

글을 쓰는 지금은 비가 많이 오네요 ,, 그럼 ! 즐거운 iOS 개발되세용 🤓