안녕하세용 !
이번 글에서는 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 개발되세용 🤓