[Booster 2기] iOS 에서 JSON 으로 데이터 주고받기

[부스트코스]iOS 프로그래밍 강좌에 대한 정리글입니다.

[부스트코스]iOS 프로그래밍 Booster 2기 활동 글입니다.

[이전 포스트]iOS 테이블뷰로 할 수 있는 것들 알아보기

JSON 이란?

프로그램 사이에 데이터를 주고받아야 하는 경우가 분명히 존재합니다. 웹 사이트에서 영화 정보를 가져올 수도 있고 회원정보를 다른 프로그램에 전송해야 할 수도 있습니다. 이 때 데이터 교환을 위해 사용하는 방법 중 하나로 JSON 이 있습니다.

아주 심플하게 생긴 JSON 홈페이지

JSON 이란 웹이나 응용프로그램이 서로 데이터를 주고 받기 위해 정한 형식입니다. JSON 은 프로그래밍 언어에 의존하지 않는 텍스트이기 때문에 swift 언어에는 물론 C, C++, Java, Python 등에서도 사용할 수 있습니다. 다음과 같이 생겼습니다.

{
	"name":"주현",
	"age":34
}

JSON 은 기본적으로 키-값 으로 이루어져 있습니다. name 과 age 는 키 이고, 주현과 34는 값 입니다. 콤마를 통해서 데이터를 병렬적으로 나타낼 수 있습니다.

{
	"address_info": {
		"country":"대한민국",
		"city":"김해"
	}
}

위 코드와 같이 값으로 중괄호를 사용해서 다시 키-값 을 할당하는 것도 가능합니다.

이번 포스트에서는 iOS 어플리케이션에서 JSON 형식의 파일을 가져오는 방법과 JSON 으로 내보내는 방법에 대해 다루어 보겠습니다.

iOS 에서 jSON 으로 데이터 주고받기

먼저 사용할 JSON 파일을 정해야 합니다. 전 Edwith 의 iOS 프로그래밍 강좌 에서 사용하는 “friends” 데이터 에셋을 가져오도록 하겠습니다.

데이터 에셋 파일

해당 JSON 데이터는 다음과 같은 형식을 가지고 있습니다.

{
	"name":"하나",
	"age":22,
	"address_info": {
		"country":"대한민국",
		"city":"울산"
	}
}

이제 새로운 Xcode 프로젝트를 생성해보도록 하겠습니다.

먼저 위의 데이터 에셋 파일을 추가해줍니다. 추가하는 방법은 Assets.xcassets 에서 Import 메뉴를 누르면 됩니다.

정상적으로 추가된 모습

이제 JSON 데이터 에셋으로부터 데이터를 가져오기 위해 새로운 swift 파일을 하나 생성합니다. JSON 파일 이름이 friends 이므로 저는 Friend.swift 라는 이름으로 하나 생성하도록 하겠습니다.

swift 언어에서 JSON 을 사용하기 위해서는 인코딩과 디코딩이라는 개념이 필요합니다. 인코딩의 사전적 의미는 정보를 다른 형태로 변환하는 것 이며, 디코딩의 의미는 인코딩의 반대입니다. iOS 에서는 swift 의 인스턴스를 JSON 형식으로 변환하거나 반대로 가져올 때 인코딩과 디코딩을 통해 변환을 거친 후 사용해야 합니다. 복잡하게 들리지만, 이를 편하게 사용할 수 있도록 해주는 프로토콜이 있습니다. 바로 Codable 입니다.

Codable 프로토콜은 인코딩 기능을 하는 Encodable 프로토콜과 디코딩 기능을 하는 Decodable 프로토콜이 합친 타입입니다. JSON 데이터 형식을 사용하기 위해서는 구조체를 생성해야 하는데 이 때 간단하게 이 프로토콜을 상속받아서 선언하면 됩니다. 코드는 다음과 같습니다.

/*
 {
     "name":"하나",
     "age":22
 }
*/

struct Friend: Codable {
    let name: String
    let age: Int
}

JSON 의 name 과 age 키들을 가져오기 위해 구조체 Friend 를 선언한 모습입니다. 이 떄 주의해야 할 점은 반드시 같은 이름을 사용해야 한다는 점입니다. name 은 name, age 는 age 처럼 말입니다. 그런데 JSON 에는 다음과 같은 경우도 있었습니다.

{
    "address_info": {
        "country":"대한민국",
        "city":"울산"
    }
}

바로 JSON 오브젝트 내에 중괄호로 또 오브젝트가 있었던 경우입니다. 이 경우 중괄호 안에 중괄호가 있었던 것처럼, 구조체 안의 구조체로 선언해 주어야 합니다. 코드로는 다음과 같습니다.

/*{
    "address_info": {
        "country":"대한민국",
        "city":"울산"
    }
}
*/

struct Friend: Codable {
    let address_info: Address
    
    struct Address: Codable {
        let country: String
        let city: String
    }
}

그런데 만약에 JSON 의 데이터를 원하는대로 사용하고 싶다면 어떻게 해야 할까요? 즉 위의 코드에서 address_info 의 _ 가 너무 보기 싫어서 addressInfo 로 변경하지 않으면 코딩을 더 이상 진행할 수 없을 떄 가 분명 존재합니다. 이 때는 열거형인 CodingKey 를 통해 변경할 수 있습니다. 다음 코드를 참조하시기 바랍니다.

import Foundation

/*
 {
     "name":"하나",
     "age":22,
     "address_info": {
         "country":"대한민국",
         "city":"울산"
     }
 }
*/
struct Friend: Codable {
    let name: String
    let age: Int
    let addressInfo: Address
    
    struct Address: Codable {
        let country: String
        let city: String
    }
    
    enum CodingKeys: String, CodingKey {
        case addressInfo = "address_info"
        case name, age
    }
}

JSON 에 address_info 키를 구조체에서는 addressInfo 로 선언한 것이 보입니다. 그러나 CodingKey 를 상속받는 CodingKeys 라는 열거형을 선언하고 그 안에서 값을 할당해서 사용자가 원하는대로 변경할 수 있습니다. 만약 변경을 원하지 않는 경우는 그냥 값 할당없이 그대로 써주면 됩니다.

최종 코드는 다음과 같습니다.

이제 스토리보드로 이동해서 기본적인 인터페이스를 생성하도록 하겠습니다. 이 포스트에서 만들어 볼 것은 JSON 의 데이터를 가져와서 테이블뷰 형식으로 보여주는 것입니다.

최종 목표

이를 위해 테이블뷰(TableView)를 생성하겠습니다. UI 는 우측 상단의 + 버튼이나 라이브러리 버튼을 눌러 추가할 수 있습니다.

오토레이아웃을 적용해서 상하좌우 여백을 줄였습니다.

테이블뷰 셀(TableView Cell)도 하나 추가해줍니다.

테이블뷰 셀의 스타일은 subtitle 로, Reuse Identifier 는 Cell 로 설정해줍니다.

기본적인 UI 설정이 모두 끝났다면 ViewController.swift 를 수정해야 합니다. 테이블뷰의 데이터를 보여주므로 UITableViewDataSource 를 추가하고, IBOutlet 과 연결합니다. 이 때 IBOutlet 은 당연히 방금 추가한 테이블뷰가 됩니다.

import UIKit

class ViewController: UIViewController, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    var friends: [Friend] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // add dataSource for tableView
        self.tableView.dataSource = self
    }
}

테이블뷰 셀에 들어갈 데이터를 위한 friends 배열도 선언해 주었습니다. 타입은 이전에 Friend.swift 파일에서 선언한 구조체를 따르도록 하였습니다.

이제는 JSON 의 데이터를 디코당을 통해 가져오는 작업을 해보도록 하겠습니다. 저는 ViewDiDLoad 함수안에 선언하도록 하겠습니다. 먼저 JSON 을 디코딩해야 하므로 JSONDecoder 타입의 프로퍼티를 하나 선언합니다.

let jsonDecoder: JSONDecoder = JSONDecoder()

다음으로 데이터 에셋에 해당 JSON 파일이 있는지 검사해야 합니다. 만약 해당 데이터 에셋이 존재하지 않으면 디코딩을 할 수 없으므로 guard-else 구문을 사용해서 처리해줍니다. 해당 데이터 에셋 이름이 friends 이었으므로 다음과 같이 선언하였습니다.

guard let dataAsset: NSDataAsset = NSDataAsset.init(name: "friends") else {return}

이 코드는 “이름이 friends 인 데이터에셋이 존재하면(nil 이 아니면) 넘어가고, 그렇지 않으면 종료하라” 는 의미입니다.

이제 decode 메서드를 통해 데이터를 디코딩한 후 이를 위에서 선언했던 friends 배열에 넣도록 합니다. 이 때 try-catch 구문을 통해 혹시나 발생할 수도 있는 에러들을 처리해주었습니다.

do {
  self.friends = try jsonDecoder.decode([Friend].self, from: dataAsset.data)
} catch {
  print(error.localizedDescription)
}

결과를 적용시키기 위해서는 다음과 같이 테이블뷰를 새로고침해 주어야 합니다.

self.tableView.reloadData()

이렇게 하면 데이터 에셋의 JSON 파일 데이터가 ViewController.swift 에서 선언한 friends 배열에 들어가게 됩니다. 이제 이 데이터를 테이블뷰에 표현하도록 하겠습니다. 먼저 섹션당 행의 갯수를 반환하는 함수를 작성합니다. 섹션은 하나이고 행은 friends 배열의 갯수가 되므로 다음과 같이 선언하면 됩니다.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return self.friends.count
}

다음은 테이블뷰 셀의 정보를 표현하도록 하겠습니다. 이전에 Friend.swift 파일에서 다음과 같이 선언했었습니다.

이 코드에 의하면 정보를 가져올 떄 사용할 이름은 name, age, AddressInfo.country, AddressInfo.city 가 될 것입니다. 테이블뷰 셀의 스타일이 subtitle 이었으므로 textLabel 에는 name 과 age, detailTextLabel 에는 country 와 city 를 넣도록 설정합니다. 코드는 다음과 같습니다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  // 셀을 선언한다.
  let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
  
  // 해당 테이블뷰 셀에 들어갈 friends 배열의 값을 찾는다.
  let friend: Friend = self.friends[indexPath.row]
        
  // 셀의 textLabel 과 detailTextLabel 의 값을 설정한다.
  cell.textLabel?.text = friend.name + "(\(friend.age))"
  cell.detailTextLabel?.text = friend.addressInfo.city + ", " + friend.addressInfo.country
        
  // 셀을 반환한다.
  return cell
}

이 메서드에 대해서는 이전 포스트 를 참조하시기 바랍니다.

그리고 빌드를 하면 다음과 같이 정상적으로 실행됩니다.

여기까지 iOS 에서 JSON 파일로부터 데이터를 가져오는 방법에 대해 다루어 보았습니다. 반대로 iOS 에서 사용한 프로퍼티들을 JSON 으로 변환하는 것은 encode 메서드를 사용해서 수행하면 됩니다. friends 배열 중 첫번째 정보를 JSON 데이터로 출력해보도록 하겠습니다. 코드는 다음과 같습니다.

let friend = friends[0]

let encoder = JSONEncoder()
encoder.outputFormatting = .prettyPrinted // 인코딩시 가독성을 높인다.

do {
  let data = try encoder.encode(friend)
  print(String(data: data, encoding: .utf8)!)
} catch {
  print(error.localizedDescription)
}

디코딩 코드와 매우 유사합니다.

실행하면 다음처럼 JSON 포맷으로 출력해주는 것을 확인할 수 있습니다.

여기까지 iOS 에서 JSON 으로 데이터를 주고받는 방법에 대해 다루어 보았습니다.