[iOS] UITableView 톺아보기 - 3

이번 포스팅에서는 셀의 재사용을 알아보고

 

또 다시 UITableView 를 이리저리 가지고 노는 실습을 진행해 보겠습니다.

 

뷰의 재사용

iOS 환경에서 뷰를 재사용하는 애들은 대표적으로 저희가 다룰 UITableView와 UICollectionView 가 있습니다.

 

작동 방식

• 테이블뷰 및 컬렉션뷰에서 셀을 표시하기 위해 데이터 소스에 뷰(셀) 인스턴스를 요청합니다.
• 데이터 소스는 요청마다 새로운 셀을 만드는 대신 재사용 큐 (Reuse Queue)에 재사용을 위해 대기하고있는 셀이 있는지 확인 후 있으면 그 셀에 새로운 데이터를 설정하고, 없으면 새로운 셀을 생성합니다.
• 테이블뷰 및 컬렉션뷰는 데이터 소스가 셀을 반환하면 화면에 표시합니다.
• 사용자가 스크롤을 하게 되면 일부 셀들이 화면 밖으로 사라지면서 다시 재사용 큐에 들어갑니다.
• 위의 1번부터 4번까지의 과정이 계속 반복됩니다.

 

 

 

 

전에 하던 포켓몬 도감 예시를 활용해서 이어가 보겠습니당

 

private func setCellBackgroundColor(row: Int, cell: UITableViewCell){
	if row == 1 {
		cell.backgroundColor = .red
	}
}

 

각 세션의 두번째 행(row = 1)의 background만 뻘겋게 바꾸는 함수를 하나 추가했습니다.

 

//section에 따른 cell 지정
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	print("now on \(indexPath.row) row")
    
	if indexPath.section == 0 { //doctor
		guard let cell = tableView.dequeueReusableCell(withIdentifier: "DoctorCell") else {
		return UITableViewCell()
		}

		cell.textLabel?.text = doctersWords[indexPath.row]
		//요기
		setCellBackgroundColor(row: indexPath.row, cell: cell)
		return cell
	}
	else{  //monster
		guard let cell: MonsterCell = tableView.dequeueReusableCell(withIdentifier: MonsterCellString, for: indexPath) as? MonsterCell else{
		return UITableViewCell()
		}

		let monster = monsters[indexPath.row]
		cell.monsterImageView.image = monster.imageSrc
		cell.nameLabel.text = monster.name
		//요기
		setCellBackgroundColor(row: indexPath.row, cell: cell)
		return cell
	}
}

 

기존의 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) 함수에 뻘겋게 하는 함수와

 

현재 행 값을 프린트 하는 코드 한 줄을 추가했습니다.

 

그렇다면 당연히 각 세션의 첫번째 행만 뻘건 배경색을 가져야 하지요

 

 

으응...?

 

뭔가

 

뭔가 이상하지 않나요

 

분명 한 섹션당 (박사/ 몬스터) 하나의 행만 뻘게야 하는데

 

중구난방으로 배경색이 변하는 것을 확인할 수 있습니다.

 

저희가 위에서 공부했듯이 셀을 재사용하고 있기 때문인데요

 

그래서 

 

private func setCellBackgroundColor(row: Int, cell: UITableViewCell){
	if row == 1 {
		cell.backgroundColor = .red
	}
	else{	//default 값 설정
		cell.backgroundColor = .white
	} 
}

 

이렇게 디폴트 값에 대한 설정을 해준다면 문제를 해결할 수 있습니다.

 

 

뷰를 재사용 함으로써 메모리를 아끼고 퍼포먼스를 올리는 대신 이러한 예외처리를 해줘야하는 공수는 필요한 듯 합니다.

 

 

**포켓몬 도감 프로젝트에서 개선, 수정된 사항들이 많은데 포스팅 관련 내용이 아니라 생략했습니다. 관심 있으신 분들은 k-elon 깃헙 에서 전체 코드를 확인하실 수 있습니다.

 

 

 

참고 : https://www.edwith.org/boostcourse-ios/lecture/16891/