10.1 테이블 뷰를 스크롤할 때 발생하는 일들

[yoogail105]

10.1 테이블 뷰를 스크롤할 때 발생하는 일들

• 메소드가 반환하는 값이 30개라면, cellForRowAt함수가 서른 번 실행되어서 30개의 셀을 만들 것으로 기대. 여기에서 30번이 실행되는 것은 맞지만, 처음부터 30개의 셀을 만드는 것은 아니다.\
• 화면에 표시해야하는 만큼만 메소드를 실행한다.
• 화면의 스크롤이나 기타 다른 이벤트에 의해서, 현재 화면에서 보이지 않는 셀이 보여야할 때 메소드가 호출
• 한 번 만들어진 셀이라도, 화면에서 사라졌다가 다시 보여야할 때 메소드가 호출
  

10.1.1 재사용 메커니즘(Reuse Mechanism)

• iOS 특유의 부드러운 화면을 위해 사용되는 몇 가지 메커니즘 중 하나
• 테이블뷰터 데이터 소스의 양만큼 셀을 생성 → 스크롤 시 움직여야 할 셀의 수와 이때 사용되는 메모리 많아짐
• → 재사용 메커니즘을 사용
  

재사용 메커니즘의 동작

1. 테이블 뷰가 화면에 나타낼 셀 객체를 자신의 데이터소스에 요청: tableView(_:cellForRowAt:)
2. 데이터 소스는 테이블 뷰의 재사용 큐에서 사용가능한 셀이 있는지 확인: tableView.dequeueReusableCell(withIdentifier:for:) → 있으면 그 중 하나를 꺼내 전달
   → 없으면 새로운 셀 생성
3. tableView(_:cellForRowAt:) 메소드가 셀의 콘텐츠를 구성 후 반환 → 테이블뷰는 이를 받아 화면에 표시
4. 사용자가 테이블 뷰를 스크롤함에 따라 화면을 벗어나면, 사라진 셀을 테이블 뷰에서 제거 → 재사용 큐에 추가
5. 사용자의 스크롤에 따라 위의 과정을 반복
   

tableView(_:cellForRowAt:)

guard let cell = tableView.dequeueReusableCell(withIdentifier: BookTableViewCell.identifier, for: indexPath) as? BookTableViewCell else {
            return UITableViewCell()
}

• tableView.dequeueReusableCell(withIdentifier:for:)
  • 재사용 큐에서 사용 가능한 셀을 확인하고, 없으면 새로운 셀을 생성하여 반환
  • dequeueReusableCell: 재사용 큐에 있는 셀들은 식별자identifier를 통해서 서로 구별
• 재사용 큐에 저장된 셀 자체는 재사용 but 셀의 콘텐츠는 tableView(_:cellForRowAt:)를 통해 매번 새롭게 구성
  • 재사용 메커니즘을 사용하지 않으면, 스크롤을 할 때마다 tableView(_:cellForRowAt:)실행을 통해 매번 셀의 콘텐츠를 구성
    → 매번 섬네일 이미지를 웹 서버에서 내려받는 등의 로직
    → 메모리에 저장된 데이터를 읽어들이는 것은 찰나의 시간, 네트워크 통신을 통해 매번 데이터를 가져오면 셀 구성에 시간 소요 ⇒ 부드러운 스크롤 X
    

iOS 프로그래밍 원칙

• 반복적으로 호출되는 메소드의 내부에는 네트워크 통신 등 처리 시간이 긴 로직 포함X
• 네트워크 통신을 통해 읽어온 데이터는 재사용할 수 있도록 캐싱(caching)처리(Memoization) → 네트워크 통신 횟수 줄이기
• 네트워크 통신 등 시간이 오래 걸리는 코드 사용 → 비동기(asynchronize)처리\
• 메모이제이션(Memoization)기법
  • 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장하여 반복 수행 제거, 실행 빠르게
• 이 원칙을 지키려면, 네트워크 통신을 하는 코드를 tableView(_:cellForRowAt:)이 아닌 다른 곳으로 옮겨야 함. 네트워크 통신의 결과를 배열에 저장하고, 해당 함수에서는 배열에서 가져다가 사용.
• 블로킹(Blocking)
  • 하나의 긴 요청을 처리하는 동안 다른 요청은 처리할 수 없게 되어 앞의 처리가 끝날 때까지 대기 상태가 발생하는 경우
  • ex. 이미지를 다운로드 받는 동안 스크롤이 매끄럽지 못한 상황
  • 해결: 비동기 처리
    

10.1.2 이미지 비동기 처리하기

• 동기와 비동기 #10
• 비동기 기법: 이미지를 내려받을 때를 위한 처리
• 메모이제이션 기법: 테이블 뷰에서 제거된 셀이 재사용 큐에 의해서 다시 구성될 때를 위한 처리
• DispatchQueue.main.async() 사용

  DispatchQueue.main.async {
          // 비동기 실행 처리를 위한 코드
          cell.imageView.image = self.getImage(indexPath.row)
  }

  • 클로저의 특성상 연관된 외부 변수를 그대로 사용할 수 있으므로, 인자값으로 전달되지 않은 cell 객체 내부에서 참조 가능
  • tableView(_:cellForRowAt:) 메소드의 실행이 종료된 후에도 cell 객체가 제거되지 않고 계속 살아있을 수 있음.
  • 비동기로 getImage(indexPath.row) 함수를 호출한 후, 이의 완료를 기다리지 않고 다음 행 이동하여, 셀을 반환하는 것으로 메소드를 종료시킴.
  • 내부함수인 클로저는 외부 함수가 종료되어도 영향을 받지 않음
  • 주의 실행 순서를 보장받지 못함
    

🔖 출처

• 꼼꼼한 재은씨의 swift: 기본편