dequeueRusableCell() 을 호출하면?
dequeueReusableCell(withIdentifier:for:) 메서드를 호출하면 어떤 일이 벌어질까요?
TableView 가 처음 구성될 때는, queue 안에 재사용 가능한 셀이 없기 때문에 메서드는 새로운 셀을 생성해서 돌려줍니다.
유저의 액션(스크롤)을 통해서 일정 범위를 넘어서게 되면, 화면에서 사라진 셀들을 queue 에 넣어두었다가 이를 꺼내어 재사용합니다.
처음에는 큐에서 셀을 꺼내어(dequeue) 재사용한다는 관점이 잘 이해되지 않았습니다. 앱이 막 구동되었다면 큐에 아무 것도 없어야 할 텐데 어떻게 셀을 가져오고 재사용한다는 것일까 싶었거든요.
문서를 조금 더 읽어보고 나서야 여기에 대한 답을 얻을 수 있습니다.
This method returns an existing cell of the specified type, if one is available, or it creates and returns a new cell using the class or storyboard you provided earlier.
큐에 셀이 저장되어 있다면 내부 셀을 돌려주어 재사용하지만, 만약 재사용 가능한 셀이 없다면 새로운 셀을 생성해서 돌려준다는 것이죠.
그럼 언제 재사용할까?
궁금한 점들이 생기기 시작했습니다. 언제부터 큐에 셀이 저장이 되는지, 큐에 저장할 수 있는 데이터의 크기가 미리 지정이 되어있는 것일지 등등.
셀의 스타일을 Basic으로 두고, dequeue 메서드를 처음 불러왔을 때 한 번, 그리고 셀에 데이터를 조작했을때 또 한 번, 이렇게 총 2번의 print 를 통해 이를 확인해 보았습니다.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath)
print("셀을 가져온 직후 : ", cell.textLabel?.text as Any)
cell.textLabel?.text = sampleArray[indexPath.row]
print("셀 텍스트를 교체한 뒤 : ", cell.textLabel?.text as Any)
return cell
}
위 이미지를 보면 23번까지는 기존의 셀(옵셔널 "Title")을 생성해서 돌려주는 것을 확인할 수 있습니다. 그러다가 24번 셀부터는 스크롤하면서 사라진 셀인 1번부터 차례대로 가져와서 재사용을 하고 있습니다.
그리고 화면과 비교해보면, 기기의 상하단을 기준으로 가상의 공간을 두어 여분의 셀을 미리 그려둔다는 것을 확인할 수도 있습니다. 아래 이미지를 보시면, 화면에 노출되는 셀은 전체가 노출된 25번과, 아직 숫자가 보이지는 않지만 1/3정도가 노출된 26번까지이지만, 실제 콘솔에서는 27번 셀까지를 이미 불러와 대기해두고 있는 것을 알 수 있죠.
큐에는 얼마나 저장이 될까?
재사용되는 셀은 큐에 몇개까지 저장이 되는 것일까 궁금했습니다. 굉장히 지엽적인 궁금증이어서 그럴까요? 특별히 자료가 있지는 않더라구요. 그래서 화면을 스크롤해가면서 이런저런 추측을 해봤습니다.
이때 특이한 점을 발견할 수 있었습니다. 화면을 천천히 스크롤할 경우 큐에 저장되는 셀은 많아야 1개 정도였는데요. 화면을 급격하게 위아래로 스크롤하다보니, 어느 순간 셀을 새롭게 불러오는 경우가 생기더라구요.
같은 경우가 또 생길까 싶어서 더 격하게 스크롤해봤지만 그 이후로는 같은 현상은 발생하지 않았습니다. 이런 저런 실험을 통해 제가 얻은 결론은 아래와 같습니다.
1. 기본적으로 큐에는 가장 마지막 하나의 셀만이 저장된다.
2. 빠르게 스크롤하는 경우 순간적으로 큐에 공백이 발생해서 새로운 셀을 만들어 돌려줄 때가 있다.순간적으로 큐의 공백이 발생해서 큐에 동시에 쌓이는 셀의 갯수가 늘어날 수는 있겠지만, 크게 문제가 될 정도는 아닐 것 같습니다.
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
// 숫자를 조절해가며 셀의 높이를 변경할 수 있음
300
}참고로 위 코드와 같이 셀의 높이를 조절할 수 있는데요. 숫자를 조절해가면서 실험해보니 셀의 높이에 따라 공백이 발생하는 경우가 서로 다르더라구요.
2-1. 셀의 높이가 클수록 큐에 공백이 발생하는 경우가 줄어들고, 반대로 높이가 작을수록 큐에 공백이 발생하는 경우가 많아진다.Outro
어쩌다보니 이런저런 삽질의 결과물을 정리한 셈이 되었는데요.
