SwiftUI에서 JSON 데이터 파싱: Codable 프로토콜 사용

SwiftUI에서 JSON 데이터를 파싱하여 애플리케이션에 통합하는 것은 강력하면서도 간단한 작업입니다. Codable 프로토콜을 활용하면 JSON 데이터와 Swift 객체 간의 변환이 매우 직관적입니다. 이번 글에서는 SwiftUI와 Codable 프로토콜을 통해 JSON 데이터를 파싱하는 과정에 대해 살펴보겠습니다.

Codable 프로토콜 이해하기

Codable 프로토콜은 Swift의 표준 라이브러리에서 널리 사용되는 프로토콜로, Encodable과 Decodable 프로토콜을 함께 결합한 형태입니다. Encodable은 객체를 JSON 등으로 인코딩 할 수 있게 하고, Decodable은 JSON 등을 객체로 디코딩 할 수 있게 합니다.

swift
struct User: Codable {
    let id: Int
    let name: String
    let email: String
}

위의 예시에서 User 구조체는 Codable 프로토콜을 채택하고 있습니다. 따라서 JSON 데이터를 이 구조체로 쉽게 디코딩 할 수 있습니다.

JSON 데이터 준비하기

먼저 디코딩 할 JSON 데이터를 준비합니다. 데이터는 보통 API 요청을 통해 받아오지만, 이번 예제에서는 로컬 JSON 파일을 사용하겠습니다.

json
{
    "id": 1,
    "name": "John Doe",
    "email": "john.doe@example.com"
}

이 JSON 데이터는 User 구조체로 변환될 것입니다.

JSON 데이터 디코딩

JSON 데이터를 디코딩 하기 위해서는 JSONDecoder 객체를 사용합니다. JSONDecoder는 JSON 데이터를 Swift 객체로 변환해주는 역할을 합니다.

swift
if let url = Bundle.main.url(forResource: "data", withExtension: "json") {
    do {
        let data = try Data(contentsOf: url)
        let decoder = JSONDecoder()
        let user = try decoder.decode(User.self, from: data)
        print(user)
    } catch {
        print("Error: \(error)")
    }
}

위 코드에서는 data.json 파일을 읽어와 User 객체로 디코딩 합니다. 디코딩 된 데이터는 user 변수에 저장됩니다.

SwiftUI에서 데이터 바인딩

JSON 데이터를 SwiftUI에서 사용하기 위해서는 @State 혹은 @StateObject를 활용하여 데이터 바인딩을 할 수 있습니다. 이를 통해 UI와 데이터가 일관성 있게 동작합니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            if let user = user {
                Text("ID: \(user.id)")
                Text("Name: \(user.name)")
                Text("Email: \(user.email)")
            } else {
                Text("Loading...")
                    .onAppear {
                        loadData()
                    }
            }
        }
    }

    private func loadData() {
        if let url = Bundle.main.url(forResource: "data", withExtension: "json") {
            do {
                let data = try Data(contentsOf: url)
                let decoder = JSONDecoder()
                self.user = try decoder.decode(User.self, from: data)
            } catch {
                print("Error: \(error)")
            }
        }
    }
}

ContentView 구조체는 JSON 데이터를 로드하고 디코딩 하여 사용자 인터페이스에 반영합니다. @State 프로퍼티 래퍼를 사용하여 user 데이터를 관리하며, 데이터가 로드되면 UI가 자동으로 갱신됩니다.

결론

SwiftUI와 Codable 프로토콜을 사용하면 JSON 데이터를 간편하게 파싱하고 사용자 인터페이스에 적용할 수 있습니다. JSONDecoder와 @State를 활용하여 데이터의 변경 사항을 반영하고, 이를 통해 사용자 인터페이스와 데이터의 일관성을 유지하는 방법을 제공했습니다. 이 방법을 통해 여러분의 SwiftUI 애플리케이션을 보다 효율적으로 개발할 수 있을 것입니다.