소개

이번에는 여러분도 사용한 적이 있을 UITableView의 이야기를 합니다.
UITableView의 셀은 메모리 관계로 재사용됩니다. 그러므로 생각한 대로의 거동이 되어 주지 않는 것이 자주 있습니다.

처음 10개의 셀의 배경을 적색으로 바꾸는 처리를 써 보았습니다만, 셀이 재이용되고 있기 때문에, 셀을 추가해 스크롤하면 백색의 셀의 확실성이 적색이 되어 버립니다.



이것의 대처법을 소개합니다.

구현

우선 셀의 배경을 붉게 하는 곳까지 씁니다.

ViewController

final class ViewController: UIViewController {

    @IBOutlet private weak var tableView: UITableView!
    private var testModels = [String]()

    override func viewDidLoad() {
        super.viewDidLoad()

        setData()
        setupTableView()

    }

    private func setData() {
        (1...20).forEach { i in
            testModels.append("Test \(i)")
        }
    }

    private func setupTableView() {
        tableView.dataSource = self
        tableView.register(CustomTableViewCell.nib,
                           forCellReuseIdentifier: CustomTableViewCell.identifier)
        tableView.tableFooterView = UIView()
    }

    @IBAction private func addButtonDidTapped(_ sender: Any) {
        testModels.append("Added Text")
        tableView.reloadData()
    }

}

extension ViewController: UITableViewDataSource {

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: CustomTableViewCell.identifier,
                                                 for: indexPath) as! CustomTableViewCell
        let text = testModels[indexPath.row]
        cell.configure(text: text)
        if indexPath.row < 10 {
            cell.backgroundColor = .red
        }
        return cell
    }

}

CustomTableViewCell

final class CustomTableViewCell: UITableViewCell {

    static var identifier: String { String(describing: self) }
    static var nib: UINib { UINib(nibName: String(describing: self), bundle: nil) }

    @IBOutlet private weak var label: UILabel!

    func configure(text: String) {
        label.text = text
    }

}

여기까지의 코드라면 방금전과 같은 거동이 되어 버립니다.

다음으로 커스텀 셀에 다음과 같이 작성해 보겠습니다.

CustomTableViewCell

    override func prepareForReuse() {
        super.prepareForReuse()

        backgroundColor = .white

    }

prepareForReuse 은 재사용 가능한 셀을 준비할 때 호출됩니다. 이 타이밍에서 조금 거동이 이상했던 배경색을 흰색으로 합니다. 셀을 추가해도 처음 10개의 셀만 배경색이 빨간색인지 확인해 보세요.

결론

끝입니다.