[iOS/Swift] 테이블뷰 셀에 API 연결하기 (GET통신, Alamofire이용)

서버 개발자분이 만들어주신 트위터 트윗리스트 API를 이용해 tableview 셀과 데이터들을 연결시켜보도록 하겠습니다!

 

 

---

Request header와 Response Body를 확인해 Response를 어떻게 받을 수 있는지 확인합니다!

 

- API 명세서 확인하기

Postman을 통해 확인해보니, 트윗 리스트가 JSON 형태로 잘 전달되는 것을 확인 가능합니다!

---

1. API 명세서에 맞게, response를 받을 객체를 생성한다.

[Model/Twitt.swift]

import Foundation

struct TwittResponse : Codable {
    let isLike : Bool
    let isRetwit : Bool
    let twitId : String
    let content : String
    let likeCount : Int
    let writer : YJWriter
    
    enum CodingKeys : String, CodingKey {
        case twitId = "_id"
        case content
        case writer
        case likeCount
        case isLike
        case isRetwit
    }
}

 

2. Router 객체에서 경로와 HTTP Method 설정을 해줍니다.

 

import Foundation
import Alamofire
import UIKit

enum YJUserRouter {
    case getUser
    case getList
    case postLike(postId : String)
}

extension Router : BaseRouter {
    
    var method: HTTPMethod {
        switch self{
        case .getUser, .getList:
            return .get
        case .postLike:
            return .post
        }
    }
    
    var parameters: RequestParams {
        switch self {
        case .getList, .getUser, .postLike:
            return .requestPlain
        }
    }
    
    var header: HeaderType {
        return .auth
    }
    
    var path : String {
        switch self {
        case .getUser:
            return "/user"
        case .getList:
            return "/twit"
        case .postLike(let postId):
            return "/like/\(postId)"
        }
    }
}

 

3. Service파일을 만들어줍니다.

서비스 파일안에선, API 명세서에 맞게 내용들을 준비합니다. 서버에 request를 보내고, response를 받습니다.

 

import UIKit
import Alamofire

class TwittService : BaseService {
    
    static let shared = TwittService()
    
    private override init() { }
    
    func getList(completion : @escaping (NetworkResult<Any>) -> (Void)) {
        
        AFmanager.request(Router.getList)
            .validate(statusCode: 200...500)
            .responseData { response in
                switch response.result {
                    
                case .success:
                    guard let statusCode = response.response?.statusCode
                    else {return}
                    guard let data = response.data else {return}
                    let networkResult = self.judgeStatus(by: statusCode, data,[TwittResponse].self)
                    completion(networkResult)
                    
                case .failure(let err):
                    print(err.localizedDescription)
                }
            }
    }

}

 

request의 매개변수로 Router.getList가 들어가있습니다.

Router안에는 url, 통신할 API주소, HTTP Method, 요청방식, 인코딩 방식, 요청 헤더의 정보가 들어가게 됩니다. 

 

[BaseService.swift]

    func judgeStatus<T: Codable>(by statusCode: Int, _ data: Data, _ type: T.Type) -> NetworkResult<Any> {
        let decoder = JSONDecoder()
        guard let decodedData = try? decoder.decode(GeneralResponse<T>.self, from: data)
        else { return .pathErr }
        print(decodedData)
        switch statusCode {
        case 200:
            return .success(decodedData.data ?? "None-Data")
        case 201..<300:
            return .success(decodedData.data as Any)
        case 400..<500:
            return .requestErr(decodedData.status)
        case 500:
            return .serverErr
        default:
            return .networkFail
        }
    }

 

networkResult는 위에 만들어준 [TwittResponse] 배열의 형태로 데이터를 decode해줍니다.

 

 

배열안의 indexPath.row와 cell의 각 데이터를 연결시켜줍니다.

extension YujinStoryboard2ViewController : UITableViewDataSource{
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if twittDataList[indexPath.row].isRetwit == false {
            guard let cell = tableView.dequeueReusableCell(withIdentifier: TwitterMyTwittTableViewCell.identifier) as? TwitterMyTwittTableViewCell else {return UITableViewCell() }
            cell.setData(twittDataList[indexPath.row])
            cell.postId = twittDataList[indexPath.row].twitId
            return cell
        } else {
            guard let cell = tableView.dequeueReusableCell(withIdentifier: TwitterRetwittTableViewCell.identifier) as? TwitterRetwittTableViewCell else {return UITableViewCell() }
            cell.setData(twittDataList[indexPath.row])
            
            cell.postId = twittDataList[indexPath.row].twitId
            return cell
        }
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return twittDataList.count
    }
}

 

 

4. ViewController 작성하기

[ViewController.swift]

 

( 1 ) ViewController안에  트윗Response를 담을 수 있는 배열을 만듭니다.

 

⭐️ ( 2 ) 테이블 뷰는 화면이 다시 appear할때마다, 서버의 데이터를 가져와야합니다! 처음 화면이 생성될때, 데이터를 호출하게 되면, 테이블 뷰의 데이터가 바뀌지 않습니다.

따라서 viewWillAppear부분에 트윗리스트 요청을 보내는 서비스 메소드를 작성해주어야합니다!

Service객체에서 만들어놓은 리스트를 가져오는 response의 result에 success가 돌아오면, 배열객체에 response로 돌아온 데이터를 집어넣어 줍니다. 

 

( 3 ) 테이블 뷰에 셀을 등록해줍니다~ 해당 셀에 데이터를 넣어줍니다. 

indexPath.row로 배열의index를 넣어줍니다!

 

( 4 ) reloadData() 호출

reloadData()는 테이블뷰의 인스턴스 메서드입니다. 테이블뷰 인스턴스에서 접근해서 사용합니다.

reloadData() 메서드는 테이블 뷰의 현재 보이는 전체 열(row), 섹션(section) 업데이트를 할 때 사용합니다.

 

reloadData() 메서드는 특정 열, 섹션의 부분적 업데이트가 아닌, 테이블 뷰의 보이는 영역 전체를 업데이트 해줄 때 효율적입니다.

    // MARK: - TableView
    // (1)
    var twittDataList : [TwittResponse] = []
    // (2)
	override func viewWillAppear(_ animated: Bool) {
        getTwittList()
    }
    // (3)
    func getTwittList() {
        TwittService.shared.getList {
            result in
            switch result {
            case .success(let data):
                guard let twittList = data as? [TwittResponse] else {return}
                self.twittDataList = twittList
	// (4)
                self.mainTableView.reloadData()
            case .requestErr:
                print("requestErr")
            case .pathErr:
                print("pathErr")
            case .serverErr:
                print("serverErr")
            case .networkFail:
                print("networkFail")
            }
        }
    }