프로토콜 활용하기 (테이블 뷰 셀, Nib등록)

재사용되는 테이블 뷰 셀을 만들 때 각각의 테이블 뷰 셀을 생성하는 것이 아닌

Xib파일을 만들어서 재사용되는 다른 곳에서 사용할 수 있도록 하면 훨씬 더 편리하고 효율적으로 사용할 수 있습니다.

 

Xib파일을 생성하는 방법은 아래와 같이 테이블 뷰 셀 클래스를 생성할 때,

also create XIB file의 체크박스도 체크해주면 됩니다.

저는 예시를 위해 간단하게 클래스명을 TableViewCell로 지정해보겠습니다.

테이블 뷰 셀을 생성하면 아래와 같이 나옵니다.

여기서 테이블 뷰 셀의 identifier을 테이블 뷰 셀 파일명과 동일하게 줍니다.

(파일명과 동일하게 하는 이유는 CellReusable프로토콜을 활용하기 위해서입니다.)

https://hyerios.tistory.com/61

이전 포스팅에 소개했지만 간단하게 CellReusable프로토콜의 코드는 아래와 같이 이루어져 있습니다.

보시다시피 자신을 스트링으로 변환한 값을 내보냅니다.

예를 들어 내 파일명이 TableViewCell이다 그럼 스트링으로 "TableViewCell"이 리턴되므로,

테이블 뷰 셀의 identifier을 파일명과 동일하게 하는 이유입니다. 

protocol CellReusable: class {
    static var reuseIdentifier: String { get }
}

extension CellReusable {
    static var reuseIdentifier: String {
        return String(describing: self)
    }
}

왜 파일명과 동일하게 테이블 뷰 셀의 identifier을 작성하는지 생각할 수 있겠지만,

테이블 뷰 셀의 개수가 많아지면 많아질수록 동일한 규칙으로 identifier을 작성하면 셀을 관리하기 편해집니다.

또한 테이블 뷰 셀의 identifier을 파일명과 동일하게 하여 어떤 셀이 사용되는지 직관적으로 확인도 가능하게 됩니다.

 

프로토콜로 reuseIdentifier프로퍼티를 생성한 이유는 직접 테이블 뷰 셀의 identifier을 작성하게 되면 

오타를 내도 컴파일시에는 잘못된 점을 확인할 수가 없습니다. 또 어디에 오타가 났는지 이를 찾아내는 작업도 만만치 않습니다.

그래서 테이블 뷰 셀의 identifier을 작성하는 것이 아닌.(dot)을 통해 자신의 reuseIdentifier를 리턴 받아 문자열을 사용하도록 합니다.

 

그럼 여기까지 사용할 테이블 뷰 셀에 대한 세팅을 해줬습니다.

 

이제 테이블 뷰 셀을 사용하기 위한 작업이 필요합니다.

 

이제는 사용할 테이블 뷰가 있는 뷰컨트롤러에 사용할 닙을 생성해주고 테이블 뷰에 등록해주는 작업이 필요합니다.

아래 코드는 사용할 닙을 생성해주고 테이블 뷰에 등록해주는 코드입니다.

let nib = UINib(nibName: "TableViewCell", bundle: nil)
tableView.register(nib, forCellReuseIdentifier: "TableViewCell")

 

하지만 이렇게 코드를 작성하면,

사용되는 닙이 많으면 많아질수록 각각을 다 등록하기 때문에 복잡해집니다.

아래와 같이 만약에 4개의 테이블 뷰 셀 닙을 생성하고 테이블 뷰에 등록해준다고 가정하면 각각을 아래와 같이 등록해줘야겠죠. 

let nib1 = UINib(nibName: "TableViewCell1", bundle: nil)
tableView.register(nib1, forCellReuseIdentifier: "TableViewCell1")
        
let nib2 = UINib(nibName: "TableViewCell2", bundle: nil)
tableView.register(nib2, forCellReuseIdentifier: "TableViewCell2")

let nib3 = UINib(nibName: "TableViewCell3", bundle: nil)
tableView.register(nib3, forCellReuseIdentifier: "TableViewCell3")

let nib4 = UINib(nibName: "TableViewCell4", bundle: nil)
tableView.register(nib4, forCellReuseIdentifier: "TableViewCell4")

 

사용할 닙을 생성하고, 테이블 뷰에 등록해주는 작업을 간단화 시켜봅니다.

프로토콜을 만들어줍니다. 

 

프로토콜 이름을 NibLoadable이라고 만들었습니다.

nibName 정적 변수를 생성해줍니다.

nibName은 자신의 이름을 문자열로 리턴해줍니다.

(reuseIdentifier과 동일한 방식입니다.) 

protocol NibLoadable: class {
    static var nibName: String { get }
}

extension NibLoadable where Self: UIView {
    static var nibName: String {
        return String(describing: self)
    }
}

이제 테이블 뷰를 extension 시켜줍니다.

새롭게 만든 register(_:) 메서드는 제네릭 T를 활용해 uitableviecell이어야 한다는 조건을 주며,

파라미터는 T.Type을 받습니다. 즉 UITableViewCell.Type을 전달해주게 됩니다.

그리고 이전에 했던 작업인 닙을 생성하고 테이블 뷰에 등록해주는 작업을 그대로 적어줍니다.

 

extension UITableView {
// 닙등록
    func register<T: UITableViewCell>(_: T.Type) {
        let nib = UINib(nibName: T.nibName, bundle: nil)
        register(nib, forCellReuseIdentifier: T.reuseIdentifier)
    }
}

extension UITableViewCell: CellReusable, NibLoadable {}

 

 

UITableViewCell이 CellReusable, NibLoadable을 사용했기 때문에 reuseIdentifier과 nibName을 사용할 수 있게 됩니다. 

위와 같이 최종적으로 register이라는 함수를 생성해 닙을 생성하고 테이블 뷰에 닙을 등록해주는 작업을 처리해줍니다.

결국 일일이 다 적어주지 않아도 되기 때문에 중복되는 코드를 줄일 수 있습니다. 

 

동일하게 테이블 뷰에 셀 4개를 등록하지만 훨씬 간단하고 명확해 보이지 않나요.

tableView.register(TableViewCell1.self)
tableView.register(TableViewCell2.self)
tableView.register(TableViewCell3.self)
tableView.register(TableViewCell4.self)

여기까지 제가 테이블 뷰 셀들을 어떻게 관리하는지 공유해보았습니다.