[Booster 2기] iOS 테이블뷰로 할 수 있는 것들 알아보기

12 Mar 2020

Reading time ~4 minutes

지난 포스트에서는 iOS 어플리케이션에서 테이블뷰가 무엇인지 알아보았고, 직접 코드로 구현도 해보았습니다. 이번에는 테이블뷰를 가지고 할 수 있는 여러가지 것들에 대해 알아보도록 하겠습니다. 많은 것들이 있지만 그 중에서 뷰 재사용하기, 테이블뷰에 동적으로 데이터 추가하기 에 대해 다루어 보겠습니다.

뷰 재사용하기

지난 포스트 에 다음과 같은 코드를 다룬 적이 있습니다.

let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: self.cellIdentifier, for: indexPath)

“뷰의 재사용성에 관한 메서드” 라고 언급한 바가 있습니다.

iOS 어플리케이션은 사용자에게 정보를 보여주기 위해 뷰를 생성합니다. 한개나 두개 정도의 뷰를 생성하는 것은 문제가 없지만, 만약 어마어마한 양의 뷰를 생성해야 한다면 문제가 생깁니다. 왜냐하면 iOS 기기의 성능과 메모리는 한정적이기 때문입니다.

화면에 보이는 셀은 겨우 6개인데 만약 수백개의 셀이 사용될수도 있다고 이를 미리 만들어놓으면 메모리 손해가 엄청나겠죠?

이러한 경우 메모리의 낭비를 줄이기 위해 반복되는 뷰를 생성하지 않고 재사용하는 방법이 있습니다. iOS 가 셀을 재사용하는 원리에 대해 먼저 알아보겠습니다. 먼저 다음과 같은 테이블뷰가 있다고 가정해 보겠습니다.

5 개의 셀을 가진 테이블뷰입니다.

테이블 뷰 셀은 1, 2, 3 … 순서의 값을 가지며 스크롤을 통해 아래로 더 내려갈 수 있다고 하겠습니다. 다음과 같이 말입니다.

아래로 2칸 스크롤한 테이블뷰의 모습입니다.

셀이 재사용된다는 것은 셀이 화면에 더이상 보이지 않을 때 재사용 큐(Reuse Deque) 로 들어가고, 새로운 셀이 나타나면 재사용 큐에서 셀이 생성된다는 의미입니다. 위의 예시에서 아래로 스크롤할 때 1 과 2 의 셀은 재사용 큐에 들어가고, 6 과 7 의 셀은 재사용 큐에서 반환되어 나타나게 됩니다. 만약 다시 스크롤을 올려도 똑같이 동작합니다.

이제는 6 과 7 의 셀이 재사용 큐에 들어가게 되고, 1 과 2 의 셀이 재사용 큐에서 반환됩니다.

테이블뷰의 UITableViewDataSource 는 셀이 화면에서 나타나거나 사라질때마다 재사용 큐를 확인해서, 만약 셀이 존재하면 해당 셀을 가져오고 그렇지 않다면 새로 생성하게 됩니다. 이것이 바로 뷰의 재사용입니다.

// 셀을 새로 생성해서 사용하기
let cell: UITableViewCell = UITableViewCell()

// 셀을 재사용해서 사용하기
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: self.cellIdentifier, for: indexPath)

두 코드의 차이점에 유의하시기 바랍니다.

또 주의해야 할 것은, 재사용 큐에 들어가고 나오고 하는 것은 테이블 뷰 셀 그 자체이지 1, 2, 6, 7 과 같은 테이블뷰 셀의 값들이 아닙니다. 재사용 큐에 들어간 1 의 셀이 7 의 셀이 되어 나올 수도 있습니다.

셀 동적으로 추가하기

테이블뷰 셀의 값을 미리 정해놓는 것이 아니라 필요할 때마다 정해서 사용할 수 있습니다. 이를 동적으로 추가한다고 합니다. 이번에는 이것에 대해 알아보겠습니다. 먼저 다음과 같은 UI 를 만들었습니다.

테이블뷰 위에 하나의 테이블뷰 셀과 하나의 버튼이 있는 인터페이스입니다. 셀을 눌러서 스타일과 아이덴티파이어를 설정해줍니다. 전 Basic 으로 설정하였습니다.

여기서 버튼을 누를 때마다 새로운 셀이 추가되도록 만들어 보겠습니다. 기본적인 코드는 다음과 같습니다.

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    
    let cellIdentifier: String = "cell"
    
    // 테이블뷰 셀에 넣을 리스트 선언
    var numbers: [String] = ["1"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        // 테이블뷰를 위한 델리게이트와 데이터소스 설정
        self.tableView.delegate = self
        self.tableView.dataSource = self
    }
    
    // 섹션의 갯수 반환
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    // 테이블뷰 섹션의 행 갯수 반환
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return numbers.count
    }
    
    // 테이블뷰 셀의 값 정보 반환
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: self.cellIdentifier, for: indexPath)
        
        let text: String = numbers[indexPath.row]
        
        cell.textLabel?.text = text
        
        return cell
    }

}

지난 포스트 에서 다룬 적 있는 코드입니다.

지난번과 조금 다른 점이 있다면 섹션이 하나이고, 셀로 들어갈 리스트가 numbers 이며, “1” 이라는 값을 하나 가지고 있다는 점입니다.

여기서 추가해야 할 부분은 버튼을 눌렀을 떄 입니다. 이를 위해 다음과 같이 버튼에 대한 IBAction 을 추가했습니다.

// 버튼을 누르면 리스트에 "2" 를 추가하고 테이블뷰를 업데이트한다
@IBAction func touchUpButton(_ sender: UIButton) {
        numbers.append("2")
        
        tableView.reloadData()
    }

touchUpInside 액션에 반응하는 IBAction 메서드를 생성했습니다.

numbers.append() 는 numbers 라는 리스트에 원하는 값을 추가하는 메서드입니다. 그러나 리스트에 추가한다고 해서 테이블뷰에 바로 반영되는 것은 아닙니다. 테이블뷰에도 추가하기 위해 tableView.reloadData() 메서드를 사용해서 테이블뷰를 새로고침합니다. 결과는 다음과 같습니다.

버튼을 누를 때마다 “2” 가 추가되는 것을 알 수 있습니다.

이를 조금 응용하면 버튼을 누를 때마다 현재 시간을 보여주는 식으로 구현할 수도 있습니다. 다음과 같이 말입니다.

수정된 코드는 다음과 같습니다.

    // Date 값을 넣기 위해 String 을 Date 로 변경
    var numbers: [Date] = []
    
    // 날짜 값 형식을 위한 dateFormatter 선언
    let dateFormatter: DateFormatter = {
        let formatter: DateFormatter = DateFormatter()
        formatter.dateStyle = .medium
        formatter.timeStyle = .medium
        return formatter
    }()

    // 버튼 터치시 Date 값을 넣음
    @IBAction func touchUpButton(_ sender: UIButton) {
        numbers.append(Date())
        
        tableView.reloadData()
    }

    // dateFormatter 를 통해 정해진 형식으로 날짜 값을 테이블뷰 셀에 보여줌
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: self.cellIdentifier, for: indexPath)
        
        cell.textLabel?.text = self.dateFormatter.string(from: self.numbers[indexPath.row])
        
        return cell
    }

[다음 포스트]iOS 에서 JSON 으로 데이터 주고받기

클릭하면 처음 포스트로 돌아갑니다.