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