[swift] SwiftyJSON을 사용하여 JSON 데이터를 컬렉션 뷰에 표시하기

16 Nov 2023

swift

Swift에서 JSON 데이터를 처리하고 표시하는 작업은 매우 일반적입니다. 그 중에서도 SwiftyJSON은 JSON 데이터를 다루기 위한 강력하고 직관적인 도구입니다. 이번 블로그 포스트에서는 SwiftyJSON을 사용하여 컬렉션 뷰에 JSON 데이터를 표시하는 방법을 알아보겠습니다.

1. SwiftyJSON 설치하기

SwiftyJSON은 CocoaPods을 통해 설치할 수 있습니다. Podfile에 다음과 같은 코드를 추가하고, 터미널에서 pod install 명령어를 실행하여 SwiftyJSON을 설치합니다.

pod 'SwiftyJSON'

2. JSON 데이터 가져오기

JSON 데이터를 가져오기 위해서는 해당 데이터의 URL로부터 데이터를 받아와야 합니다. 아래와 같은 코드를 사용하여 JSON 데이터를 가져올 수 있습니다.

func fetchJSONData(completion: @escaping (JSON) -> Void) {
    guard let url = URL(string: "http://example.com/data.json") else {
        return
    }
    
    URLSession.shared.dataTask(with: url) { (data, response, error) in
        if let error = error {
            print("Error fetching JSON data: \(error.localizedDescription)")
            return
        }
        
        guard let data = data else {
            return
        }
        
        do {
            let json = try JSON(data: data)
            completion(json)
        } catch {
            print("Error parsing JSON data: \(error.localizedDescription)")
        }
    }.resume()
}

위의 코드에서는 URLSession을 사용하여 지정된 URL에서 데이터를 가져옵니다. 가져온 데이터는 SwiftyJSON을 사용하여 JSON 객체로 파싱되어 메소드의 completion 클로저에 전달됩니다.

3. 컬렉션 뷰 세팅하기

JSON 데이터를 가져온 후에는 이를 컬렉션 뷰에 표시해야 합니다. 우선 컬렉션 뷰를 세팅하기 위한 준비 작업을 진행합니다. 다음과 같은 코드를 사용하여 컬렉션 뷰를 생성하고 필요한 메소드를 구현합니다.

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
    
    @IBOutlet weak var collectionView: UICollectionView!
    
    var jsonData: JSON = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 컬렉션 뷰 설정
        collectionView.delegate = self
        collectionView.dataSource = self
        
        // JSON 데이터 가져오기
        fetchJSONData { [weak self] (json) in
            self?.jsonData = json
            
            // 컬렉션 뷰 리로드
            DispatchQueue.main.async {
                self?.collectionView.reloadData()
            }
        }
    }
    
    // 컬렉션 뷰에 표시할 셀의 개수
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return jsonData.count
    }
    
    // 컬렉션 뷰에 셀 표시하기
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! MyCell
        
        let item = jsonData[indexPath.item]
        
        // 셀에 JSON 데이터 표시
        cell.titleLabel.text = item["title"].stringValue
        cell.subtitleLabel.text = item["subtitle"].stringValue
        
        return cell
    }
}

위의 코드에서는 viewDidLoad 메소드 내에서 JSON 데이터를 가져오고, 가져온 데이터를 컬렉션 뷰에 표시하기 위한 메소드를 구현합니다. JSON 데이터의 개수만큼 셀이 생성되고, 각 셀에 해당하는 JSON 데이터를 표시합니다.

결론

이제 SwiftyJSON을 사용하여 JSON 데이터를 가져와서 컬렉션 뷰에 표시하는 방법을 알아보았습니다. SwiftyJSON은 간편한 문법과 다양한 메소드를 제공하여 JSON 데이터를 쉽게 다룰 수 있도록 도와줍니다. JSON 데이터를 효율적으로 처리하고 화면에 표시하는 것이 필요한 경우, SwiftyJSON은 유용한 라이브러리입니다.

참고 문서:

SwiftyJSON GitHub 페이지