Codable Protocol을 이용해서 복잡한 JSON Parsing 하기

제가 예전에 진행했던 한양대학교 iOS 앱에서, 메뉴 화면 그릴 때 URLSession을 통해 다음과 같은 JSON을 Parsing 해야합니다.

Swift4부터 Codable Protocol이 도입돼서, JSON을 굉장히 편리하게 처리할 수 있습니다.

우선 제가 서버와 통신 할 JSON 규격은 다음처럼 복잡하게 되어 있어요.

{
    "result": {
        "totalCount": 9,
        "list": [
            {
                "ACT_URL": null,
                "HOCHUL_GB": "L",
                "ICON_NM": "ic_hanyang_sogae_l",
                "MENU_NM": "한양소개",
                "MENU_SEQ": 1,
                "MENU_ID": "911",
                "MENU_ID2": "M319378"
            },
            {
                "MENU_SEQ": 2,
                "MENU_ID2": "M319362",
                "ACT_URL": null,
                "HOCHUL_GB": "L",
                "ICON_NM": "ic_seoul_campus_l",
                "MENU_ID": "912",
                "MENU_NM": "서울캠퍼스"
            },
            {
                "MENU_ID2": "M319363",
                "MENU_ID": "913",
                "MENU_SEQ": 3,
                "ICON_NM": "ic_erica_campus_l",
                "HOCHUL_GB": "L",
                "ACT_URL": null,
                "MENU_NM": "ERICA캠퍼스"
            },
            {
                "ACT_URL": "https://go.hanyang.ac.kr/new/mobile/main.html",
                "MENU_ID2": null,
                "MENU_SEQ": 4,
                "ICON_NM": "ic_iphak_anne_l",
                "HOCHUL_GB": "U",
                "MENU_ID": "914",
                "MENU_NM": "입학안내"
            },
            {
                "MENU_SEQ": 5,
                "ICON_NM": "ic_brain_hanyang_l",
                "ACT_URL": null,
                "MENU_ID2": "M008388",
                "MENU_NM": "브레인한양",
                "HOCHUL_GB": "L",
                "MENU_ID": "915"
            },
            {
                "MENU_NM": "발전기금",
                "MENU_SEQ": 6,
                "MENU_ID": "916",
                "MENU_ID2": "M008301",
                "ACT_URL": null,
                "ICON_NM": "ic_baljeon_gigeum_l",
                "HOCHUL_GB": "L"
            },
            {
                "HOCHUL_GB": "U",
                "MENU_SEQ": 7,
                "MENU_ID": "917",
                "ICON_NM": "ic_parking_l",
                "MENU_ID2": null,
                "ACT_URL": "https://parking.hanyang.ac.kr/",
                "MENU_NM": "주차관리"
            },
            {
                "ACT_URL": "https://portal.hanyang.ac.kr/applink/lib.html",
                "MENU_ID2": null,
                "MENU_SEQ": 8,
                "MENU_ID": "918",
                "HOCHUL_GB": "A",
                "ICON_NM": "ic_doseogwan_l",
                "MENU_NM": "도서관"
            },
            {
                "HOCHUL_GB": "U",
                "MENU_ID": "919",
                "ICON_NM": "ic_haksik_l",
                "MENU_ID2": null,
                "MENU_NM": "학교식단",
                "MENU_SEQ": 9,
                "ACT_URL": "https://www.hanyang.ac.kr/web/www/re1"
            }
        ]
    },
    "nowDate": {
        "dd": "15",
        "mm": "04",
        "yoil": "5",
        "yyyy": "2021"
    },
    "resultMessage": {
        "service": "/COMM/A202100004",
        "code": 200,
        "msg": ""
    }
}

우선 가장 상단에 키 값이 "result", "resultMessage", "nowDate"

이 세가지가 있기 때문에 이를 포함하는 Root를 만들어주고, 그 아래 녀석들을 하나씩 추가합니다.

그러면 다음과 같이 4가지 모델이 필요해요. 

struct Root<T: Codable>: Codable {
    var result: Result<T>?
    var nowDate: [String:String]?
    var resultMessage: ResultMessage?
}

struct Result<T: Codable>: Codable{
    var list: [T]?
    var totalCount: Int?
}

struct ResultMessage: Codable {
    let code:Int?
    let msg:String?
    let service: String?
}

struct MenuItem: Codable {
    let MENU_NM: String?
    let ICON_NM: String?
    let ACT_URL: String?
    let HOCHUL_GB: String?
    let MENU_ID: String?
    let MENU_ID2: String?
    let MENU_SEQ: Int?
    let DEL_POSSIBLE_YN: String?
}

이 경우에는 Generic을 사용하면, 편하게 파싱할 수 있습니다.

이렇게 구조체를 만들었으면, 파싱하는 방법은
URLSession으로 request를 날리고, JSONDecoder를 이용하면 됩니다.
API 요청은 주로 App Lifecycle에서 viewWillAppear에서 주로 합니다. 

     override func viewWillAppear(_ animated: Bool) {
        if loadingIndicator.isAnimating {
            guard let url = URL(string: "비공개URL") else { return }
            var req = URLRequest(url: url)
            req.httpMethod = "GET"
            req.setValue("application/x-www-form-urlencoded; charset=utf-8", forHTTPHeaderField: "Content-Type")
            let task = URLSession.shared.dataTask(with: req) { data, response, error in
                let root = try! JSONDecoder().decode(Root<MenuItem>.self, from: data!)
                self.menuItems = root.result!.list!
            }
            task.resume()
        }
    }

로딩 indicator가 돌고있으면, Request를 날립니다.
그리고 성공적으로 파싱을 하면 self.menuItems에 list를 설정해줍니다.

URLSession은 기본적으로 백그라운드 큐에서 실행 되기 때문에 UI를 수정하는 부분은 메인 쓰레드에서 해줘야 합니다.
다음과 같이 값이 설정되면, CollectionView를 Reload해주고, Loading Indicator를 멈추면 됩니다.

    var menuItems:[MenuItem] = [] {
        didSet {
            DispatchQueue.main.async {
                self.menuCollectionView.reloadData()
                self.loadingIndicator.stopAnimating()
            }
        }
    }

이후 올바르게 화면이 갱신됨을 확인할 수 있습니다 ㅎㅎ