테이블 뷰

DEVJUN·2022년 7월 30일
0

iOS 면접 준비

목록 보기
6/6
post-thumbnail

1. 테이블 뷰 컨트롤러

테이블 뷰 컨트롤러의 표면적 역할은 목록 형태의 콘텐츠를 화면에 표현해주는 것이다. 더 자세히 이야기하면 계층 구조를 이루는 콘텐츠의 상위 카테고리를 정렬하여 표현함으로써 방대한 콘텐츠 속에서 사용자가 원하는 항목에 쉽게 접근할 수 있게 해 주는 역할이다.

테이블 뷰 컨트롤러와 내비게이션 컨트롤러는 계층적 성격의 콘텐츠를 표시해주기 위해 상호 보완적인 역할을 한다.

아래 이미지는 테이블 뷰 컨트롤러와 내비게이션 뷰 컨트롤러가 상호 보완적으로 수직, 수평적 데이터 구조를 구성하고 있음을 보여준다.

테이블 뷰 컨트롤러는 다음과 같은 계층 구조를 갖는다. _하나의 화면을 의미하는(Scene)은 보통 하나의 뷰 컨트롤러로 구성되는데 위 이미지에서는 테이블 뷰 컨트롤러가 씬을 담당한다.

테이블 뷰는 최상위 루트 뷰이다. 테이블 뷰 컨트롤러에서 모든 컨텐츠는 테이블 뷰를 통해 표현된다.

여러개의 행을 테이블 뷰 셀이라고 한다. 테이블 뷰 셀은 다시 내부에 콘텐츠 뷰를 갖고 각 행의 내용은 저 콘텐츠 뷰 내부에 적절히 라벨이나 버튼, 이미지 뷰 등으로 구성되어 다음과 같은 결과가 나오게 되는 것이다.


2. 데이터 소스

테이블 뷰를 이용하여 화면에 콘텐츠를 표시하는 방법에는 두 가지가 있다. 정적인 방법과 동적인 방법인데 정적인 경우는 데이터가 갱신될 필요가 없어 스토리보드에서 직접 구성한 것이고, 동적인 경우는 데이터가 계속해서 갱신되어 셀의 수가 고정이 아닌 수시로 변하는 경우이다.

동적인 방법으로 구성하기 위해서는 데이터 소스가 필요하다. 데이터 소스를 테이블 뷰 각 행에 연결하는 과정을 데이터 바인딩(Data Binding)이라고 한다.


3. 데이터 소스 연동을 위한 핵심 메소드❗️

테이블 뷰에 데이터 소스를 연동할 때 필요한 핵심 내용은 두가지이다.

1) 테이블이 몇 개의 행으로 구성되는가?
2) 각 행의 내용은 어떻게 구성되는가?

1. tableView(:numberOfRowsInSection)_

이 메소드는 테이블 뷰가 생성해야 할 행(row)의 개수를 반환한다. 몇 개의 행을 생성해야 할지 iOS 시스템에게 알려주기 위해 작성하는 메소드이다. iOS가 이 메소드를 호출할 때는 두 개의 인자값을 전달하는데

첫 번째 인자값은 이 메소드를 호출한 테이블 뷰 객체에 대한 정보를 나타낸다. 하나의 뷰 컨트롤러 내에 두 개 이상의 테이블 뷰가 존재할 수 있기 때문이다. 이때 호출되는 메소드 입장에서는 어느 테이블 뷰에서 자신을 호출하는지를 알 필요가 있어 첫 번째 인자값으로 사용된다.

두 번째 인자값은 섹션에 대한 정보이다. 테이블 뷰는 일종의 행 그룹의 개념인 섹션으로 이루어질 수 있고, 그 하위에 개별 행이 추가된다. 섹션별로 행의 수를 다르게 구성할 수 있기 때문에 섹션에 따라 구분하여 행의 개수를 반환해야 할 때도 있다.


2. tableView(:cellForRowAt:)_

이 메소드는 각 행이 화면에 표현해야 할 내용을 구성하는 데에 사용된다. 하지만 이 메소드가 반환하는 값은 전체 테이블 뷰의 목록이 아니라 하나하나의 개별적인 셀 객체인데, 이는 화면에 표현해야 할 목록의 수만큼 이 메소드가 반복적으로 호출된다는 것을 의미한다. iOS 시스템은 두 개의 인자값을 사용하여 이 메소드를 호출한다. 하나는 구성할 테이블 뷰 객체에 대한 참조이고, 두 번째는 구성할 행에 대한 참조 정보이다. 이 두 번째 매개변수인 indexPath를 통해 몇 번째 행을 구성하기 위한 호출인지를 구분할 수 있다.


4. 테이블 뷰의 동작원리❗️

테이블 뷰는 만약 tableView(_:numberOfRowsInSection)메소드가 반환하는 값이 30이라면 테이블 뷰의 셀 역시 한꺼번에 서른개가 만들어질 것으로 우리는 기대하겠지만 그렇지 않다.

테이블 뷰는 화면에 표시할 만큼만 셀을 구성하고, 나머지는 대기 상태로 두고 스크롤을 하여 나머지 셀을 마저 화면에 표시해야 하는 순간이 되면 그때마다 필요한 만큼 다시 메소드를 호출하여 추가적으로 셀을 구성한다.

이 부분을 더 자세히 이해하기 위해서는 재사용 메커니즘에 대한 이해가 필요하다. 재사용 메커니즘은 iOS특유의 부드러운 화면을 위해 사용되는 몇가지 메커니즘 중 하나이다.

위 코드에서 114번째 줄이 핵심이다.

	let cell = tableView.dequeueReusableCell(withIdentifier: "ListCell") as! MovieCell

이 메소드를 통해 재사용 큐에 있는 셀들은 재사용 식별자를 구별할 수 있는데, 속성값으로 입력된 "ListCell"이 재사용 식별자에 해당한다.

정리해보면 📝...

화면에 나타내야 할 데이터가 아무리 많아도 테이블 뷰는 화면에 당장 표시할 만큼의 셀만 만들고, 나머지는 필요할 때마다 생성한다. 여기서 필요할 때는 스크롤로 인해 화면에 새로운 셀이 나타나야 할 때이다.

반면 스크롤로 인해 현재 화면을 벗어나게 된 기존 셀들은 테이블 뷰에서 제거한 후 재사용을 위해 큐에 저장❗️한다.

이후 새로운 셀이 필요해지는 시점이 되면 큐에 저장된 셀을 꺼내어 재사용하고, 저장된 셀이 없을 경우 새로 생성한다.

주의할 점은❗️ 재사용 큐에 저장된 셀 자체는 재사용하지만, 셀의 콘텐츠는 tableView(_:cellForRowAt:) 메소드를 통하여 매번 새롭게 구성된다.

다시 말해서 화면에 새로운 셀을 표시할 때마다 tableView(_:cellForRowAt:)메소드는 매번 다시 실행되고 이미 만들어져 화면에 노출된 셀이라도 일단 화면을 벗어나 테이블 뷰에서 제거되고 나면 이 셀을 다시 화면에 표시하기 위해서는 해당 메소드를 거쳐야 한다.

참고문헌: http://www.yes24.com/Product/Goods/60638047?pid=123487&cosemkid=go15259260058493601&gclid=CjwKCAjwrZOXBhACEiwA0EoRD3kxIAFG7dtRvQJomdYWf3y2QYoXHEmbOUEMMglir1a-s5KgkxKzFRoCuPYQAvD_BwE

profile
🧑🏻‍💻iOS

0개의 댓글