[iOS] 테이블 뷰 컨트롤러란? - HoonIOS

안녕하세요 HoonIOS입니다. :)

 

사용자에게 목록으로 보여주는 화면을 위해 사용되는 UITableViewController에 대해 포스팅하려고 합니다. :)

 

 

 테이블 뷰 컨트롤러에 대해, 사용하는 이유?

 

우선 이 컨트롤러에 대해 포스팅하기전에 이 컨트롤러를 왜 쓰는지 알아야겠죠? 

 

이 UI를 사용하는 이유는 방대한(엄청나게 많은) 내용을 앱을 통해 제공해야하고 사용자 입장에서는 효율적으로 내용에 접근을 할 수 있도록 해주기 위해 사용을 합니다.

 

 

테이블 뷰 컨트롤러의 특징이 뭐가 있을까요?

 

이 컨트롤러를 이용하면 수평적 관계의 카테코리나 내용을 병렬로 배열하여 앱의 전체적인 내용을 표현하도록 구성하고 있습니다.

 

또 다른 컨트롤러인 내비게이션 컨트롤러는 수직적인 관계로 되어있어 직렬로 앱을 구성하고 있습니다.

 

위 설정 앱을 보고 예를 들면 테이블 뷰는 셀들이 수평적으로 배열로 한 화면에 표현되는 반면 내비게이션 컨트롤러는 스택에 화면이 쌓이는 것으로 즉 각 테이블 셀을 누르면 새 화면을 push 해주는 것으로 직렬로 앱을 표현하고 있습니다.

 

이렇게 내비게이션 컨트롤러와 테이블 뷰 컨트롤러를 같이 사용하면 엄청나게 많은 데이터를 노출하지 않고 사용자가 원하는 필요로 하는 데이터를 쉽게 노출할수 있습니다.

 

따라서 테이블 뷰를 이용해서 화면을 구성할때 단순히 목적을 보여주려는 것이 아니라 많은 데이터를 어떻게 하면 획기적으로 원하는 값만 표현하게 접근할 수 있을까라는 질문에 대해서 고려해봐야 합니다.

 

이제는 테이블 뷰 컨트롤러에 대해 알아보겠습니다.

 

 

 테이블 뷰 컨트롤러

 

이 컨트롤러는 뷰 컨트롤러를 바탕으로 만들어진 특수한 컨트롤러입니다.

UIKit 프레임워크에 있고 UITableViewController클래스로 구현이 되어 있습니다.

 

이 클래스도 델리게이트 패턴, 데이터 소스 패턴을 기반으로 한 다양한 메서드가 정의되어 있습니다.

 

여기서 델리게이트 패턴이라 사용자의 이벤트에 발생할 메서드이고 데이터 소스는 데이터를 이용하여 목록 구성 등을 만들어주는 메서드입니다.

 

이 테이블의 형식은 목록 형태로 화면에 표현되는것입니다. 특히 이 컨트롤러는 뷰컨트롤러를 토대로 만들어져 있기 때문에 화면의 일부가 아닌 화면 전체가 목록형태로 보여주는 인터페이스로 구현되고 이것을 사용하면 됩니다.

 

대표적인 예시로 위에서 보여준 아이폰의 환경설정 앱이 있습니다.

 

이 환경설정 앱은 테이블 뷰 컨트롤러와 내비게이션 컨트롤러의 콜라보레이션이라고 할 수 있습니다. ㅎㅎ

 

 

이제 테이블 뷰 컨트롤러의 계층 구조에 대해서 알아보려고 합니다.

 

 테이블 뷰 컨트롤러의 계층구조

 

 

테이블 뷰 컨트롤러의 계층은 이렇게 씬, 테이블 뷰 컨트롤러, 테이블 뷰, 테이블 뷰 셀, 콘텐츠 뷰가 있습니다. 이제 하나씩 알아보겠습니다.

 

 씬(Scene)

 

씬은 하나의 화면을 나타내는 것입니다. 

 

 테이블 뷰 컨트롤러

 

하나의 뷰 컨트롤러가 하나의 씬을 담당을 합니다. 여기서는 테이블 뷰 컨트롤러가 씬을 담당하는 게 보이시죠?

 

 테이블 뷰

 

테이블 뷰가 바로 최상위 루트 뷰입니다. 테이블 뷰 컨트롤러에서 모든 내용은 테이블 뷰를 통해 표현이 됩니다.

 

 테이블 뷰 셀

 

테이블 뷰 안에 있는 하나하나의 행들을 테이블 뷰 셀이라고 합니다.

 

 콘텐츠 뷰

 

이제 이 테이블 뷰 셀 안에 내부의 콘텐츠를 콘텐츠 보라고 합니다.

 

 섹션

 

여기에 이제 번외로 테이블 뷰 내에 테이블 뷰 셀들을 그룹으로 묶을 수 있는 단위가 있는데요, 이것을 섹션이라고 합니다.

 

이 세션을 사용하면 섹션에 따라 예외처리를 하여 다른 분류의 데이터를 보여줄 수도 있습니다.

 

위의 계층 구조 및 섹션 부분의 위치를 확인해보겠습니다.

 

 

이렇게 테이블 뷰 컨트롤러의 계층 구조는 아래와 같습니다. 테이블 뷰를 편집하고 사용할 때 계층구조를 알아야 되니 열심히 보고 익히는 것이 중요할 것 같습니다.

 

다음에는 프로토타입 셀인 동적 셀에 대해 알아보겠습니다. :)