Code로 TableView 구현하기

저번 포스팅에 이어서 오늘은 Code base로
TableView를 구현해보도록 하겠습니다.
일단 ViewController에 TableView를 추가 해볼까요?

private let tableView = UITableView()

그리고 tableView의 제약조건은
SnapKit을 사용해서 잡아 보겠습니다.

view.addSubview(tableView)
tableView.snp.makeConstraints { (make) in
	make.edges.equalToSuperview()
}

이제 Delegate와 DataSource를 지정해줄 차례인데요!
Interface Builder에서 마우스로 드래그를 진행하며
지정해줬던 방식과는 다르게
Code base로 진행할 때에는
아래와 같이 간단하게 지정 가능합니다.

tableView.delegate = self
tableView.datasource = self

다음은 Cell의 UI 구현을 진행하면 되겠습니다.
UITableViewCell을 상속받는 class를 하나 생성하고
cell의 contentView에 imageView와 label을 추가해주었습니다.

Interface Builder를 사용하지 않았으니
IBOutllet이 없이 프로퍼티로 View를 가지고 있네요!

class ActorCell: UITableViewCell {
    
    let imageView = UIImageView()
    let nameLabel = UILabel()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        [imageView, nameLabel].forEach {
            contentView.addSubview($0)
        }
        
        imageView.snp.makeConstraints { (make) in
            make.top.leading.bottom.equalToSuperview().inset(10)
            make.width.height.equalTo(50)
        }
        
        nameLabel.snp.makeConstraints { (make) in
            make.centerY.equalTo(imageView)
            make.leading.equalTo(imageView.snp.trailing).offset(10)
        }
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configure(iamge: UIImage, name: String) {
    	self.imageView.image = image
        self.name.text = name
    }
    
}

그 다음 cell을 재사용하기 위한 등록 절차를 보도록 하겠습니다.
위에서 생성한 ActorCell type과 재사용 할 때 식별 할 용도로 사용되는 cellID를 넘겨주었습니다.

tableView.register(CharacterCell.self, forCellReuseIdentifier: "cellID")

그리고 register시 넘겨 주었던 cellID를 사용해서
cell을 불러 오기 위한 작업을 cellForRowAt 메소드 내부에서 처리해주었습니다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	guard let cell = tableView.dequeueReusableCell(withIdentifier: "cellID", for: indexPath) as? MyTableViewCell else { return .init() }
	cell.configure(....)
	return cell
}

완성🙌

이렇게 Code base 방식과 Interface Builder 방식으로
UI 구현을 진행해 봤습니다.
개인의 취향이나 사내의 팀 기조에 따라서
논의하에 어떤 방향으로 개발할지에 대해서 결정이 되겠죠.


각자의 장단점을 따져서 정리해보자면
Interface Builder를 통한 작업에서는
결과물을 예측하기 쉬웠던 점,
소스코드를 일일히 파악하지 않아도 UI 확인 가능하다는 점,
그리고 비교적 code를 사용한 UI 설정 로직이 없어지기 때문에
파일 볼륨이 작아질 수 있다는 점이 좋았습니다.

Code base를 통한 작업에서는
프로젝트에서 Interface Builder 파일이
차지하는 비중이 적기 때문에 가볍다는 점,
conflict 발생 가능성이 낮아지며,
conflict 해결에 큰 어려움이 없을 수 있다는 점,
협업 시 코드리뷰에 있어서 용이하다는 점이 있는 것 같아요.

어떤게 좋은 것이라고 정답은 없으니
타협점을 찾아가는 시간을 가져보면 좋을 것 같습니다.
(저는 다 좋아요)