[iOS] 테이블 뷰 컨트롤러에서 데이터 소스 & 델리게이트에 대해 - HoonIOS

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

 

저번에는 테이블 뷰 컨트롤러에 대해서 그리고 테이블 뷰셀인 프로토타입 셀에 대해 포스팅을 해봤습니다.

boidevelop.tistory.com/72?category=839928

[iOS] 프로토타입 셀이란? -HoonIOS

 

이번에는 테이블 뷰 컨트롤러를 보여줘서 구성해주는 데이터 소스와 이벤트처리를 하는 델리게이트에 대해 알아보겠습니다.

 

 테이블 뷰 데이터소스

 

우선 테이블 뷰를 화면에 표현하는 방법에는 두 가지가 있습니다.

 

1. 정적인 방법
2. 동적인 방법

테이블 뷰의 표현 방법을 바꾸는 것은 테이블 뷰의 인스펙터에서 Content에 있습니다.

 

Content종류에서 Dynamic Prototypes은 동적 statics는 정적을 뜻합니다.

 

여기서 정적인 방법은 무엇일까요?

 

바로 스토리보드에서 직접 구상하는 것을 말합니다. 

따라서 프로그래밍적으로 늘어가거나 줄어드는 일이 없을 때 정적으로 구성하는 게 좋습니다.

 

테이블 뷰를 정적인 방법으로 바꾸면 기존 프로토타입 셀은 사라지고 정적인 형식의 셀이 채워지게 되는데 이것을 통해서 우리가 필요한 콘텐츠를 직접 소스코드를 통해 구현할 수 있습니다.

 

그럼 Content를 동적, 정적으로 바꿨을 때 어떻게 바뀌는지 확인해 보겠습니다.

 

* 설명

• 왼쪽은 동적인 Dynamic Prototypes를 뜻하고 오른쪽은 정적인 Statics를 뜻합니다.
• 정적인 셀을 보면 이렇게 일일이 하나씩 하나씩 셀들을 구현할 수 있습니다.

매번 갱신되는 내용을 표현하기 위해서는 데이터 소스라는 게 필요한데 데이터 소스란 테이블 뷰의 각 행마다 대응할 수 있도록 배열 형태로 만들면 이것이 데이터 소스가 됩니다.

 

이렇게 만들어진 데이터 소스를 각 행에 연결하는 과정을 데이터 바인딩이라고 합니다.

 

이제 데이터 소스와 데이터 바인딩이라는 뜻을 간단하게 알아봤으니 테이블 뷰와 한번 연동을 해보겠습니다. 

 

 테이블 뷰에 데이터 소스 연동하기

 

데이터 소스와 테이블 뷰를 연동하기 위해서는 UITableViewDataSource프로토콜에 의하여 이루어집니다.

 

이 프로토콜은 UITableViewController클래스가 이미 해당 프로토콜을 구현하고 있어서 따로 구현을 할 필요는 없습니다.

 

* 설명

• 위에 같이 UTableViewController 오픈소스를 들어가시면 이미 해당 컨트롤러에 구현이 되어있는 것을 확인할 수 있습니다.  

UITableViewDataSource 프로토콜은 테이블의 행의 개수를 구성할 때 각 행의 내용은 어떻게 구성되었는지 표현할 때 필요한 메서드들이 정의되었습니다.

 

그럼 이제 기본적으로 많이 쓰이는 DataSource메서드들을 한번 살펴보겠습니다.

1. tableView(_:numberOfRowsInSection:)
2. tableView(_:cellForRowAt:)

 

먼저 메서드들을 알아보기 전에 DataSource도 iOS 시스템에 의해 호출되는 메서드로 델리게이트 패턴하고 동일한 방식으로 동작을 합니다.

 

자바스크립트를 혹시 공부하셨으면 콜백 함수와 같은 것으로 개발자가 직접 호출하는 것이 아니라 시스템에 의해서 알아서 호출되는 방식입니다.

( 저는 자바스크립트를 공부하지 않아서 해당 메서드를 공부하다 보니 이렇게 사용된다고 해서 비유 설명을 해봤습니다.ㅎㅎ )

 

해당 메서드들도 UITableView클래스에 이 메서드가 이미 구현되어 있어 이것을 작성하려면 재정의( 오버라이드 )를 해야 됩니다.

 

그럼 이제 위 메서드들을 한번 살펴보겠습니다.

 

 tableView(_:numberOfRowsInSection:)

 

이 메서드는 두 개의 인자 값을 가지고 있습니다. 한번 살펴보겠습니다.

 

1. 첫 번째 인자 값은 테이블 뷰 객체 정보
   - 이 메서드를 호출한 테이블 뷰 객체에 대한 정보를 나타냅니다.
   - 테이블 뷰가 여러 개일 때 어느 테이블 뷰에서 사용할지 구분하기 위해서 호출을 합니다.
2. 두 번째는 섹션 정보
   - 섹션별로 이루는 행의 개수가 다르므로 이 섹션 정보로 구분해서 사용해주면 됩니다.
   - 섹션에 대한 정보가 담겨있습니다.

이 메서드는 테이블 뷰가 생성해야 할 행의 개수를 리턴해서 알려주는 역할을 합니다.

 

이것은 시스템이 개발자에게 몇 개야!라고 알려주는 게 아니라 개발자가 시스템에게 몇 개를 만들어!라고 시스템에 알려주는 메서드입니다.

 

다시 말해서 이미 구성을 다 해놨어도 이 메서드의 return값을 0으로 주면 테이블 뷰에 아무것도 나타나지 않습니다.

 

이 메서드. return값을 숫자로 지정해주는 거보다 이렇게 데이터 소스의 크기만큼 동적으로 반환해서 처리해주는 게 유지보수에서도 좋습니다.

 

따라서 필요에 따라 테이블 뷰 정보와 섹션 정보를 바탕으로 반환 값을 다르게 줄 수도 있습니다. 이 테이블은 이만큼 주고 이 테이블의 이 섹션은 이만큼 주겠다 이런 식으로 말이죠

 

  tableView(_:cellForRowAt:)

 

이 메서드는 두 개의 인자 값이 있습니다. 한번 살펴보겠습니다.

1. 첫 번째는 구성할 테이블 뷰 객체에 대한 참조
   - 하나의 뷰컨에 테이블 뷰가 두 개 이상일 경우 어느 테이블 뷰가 사용되는지 구분할 때 사용됩니다.
2. 두 번째는 구성할 행에 대한 참조
   - indexPath를 통해 몇 번째 행을 구성하기 위한 호출인지 구분할 수 있습니다.
   - 행 번호는 0부터 시작합니다.
   - 선택된 행에 대한 관련 속성들을 모두 제공합니다.
   - 예를 들어. row속성이 있는데 몇 번째 행인지 알려주는 역할을 합니다.

이 메서드는 각 행이 화면에 표현해야 할 내용을 구성할 때 사용이 됩니다. 단 이 메서드의 반환 값은 전체 테이블 뷰가 아니라 하나하나의 테이블 셀을 반환하므로 화면에 표현할 목록의 수만큼 메서드가 반복해서 호출합니다.

(DataSource메서드인 numberOfSection을 통해 받은 행의 개수만큼 이 메서드가 호출이 됩니다.)

 

즉 해당 메서드에서 테이블 뷰 셀 객체를 구성하고 결괏값을 반환하여 iOS 시스템은 이 객체를 받아 각행에 채워 넣는 방식입니다.

 

따라서 몇 번째 행에 무엇을 넣을지 구성을 한 다음에 테이블 뷰 셀 객체로 리턴을 해주면 됩니다.

 

이제 DataSource를 알아봤으니 특정 이벤트를 구성하기 위해서 테이블 뷰 델리게이트를 알아보겠습니다.

 

 테이블 뷰 델리게이트

 

이 메서드는 이벤트에 대한 처리를 할 때 많이 사용되며 예를 들어서 테이블을 셀을 선택했을 때 메서드를 실행시킨다거나 테이블 셀의 높이를 설정해줄 때 사용합니다.

 

오 2개의 손가락으로 테이블 뷰의 복수 아이템을 선택했을 때 사용하는 메서드도 있네요... 이건 이번에 공부하면서 안 사실입니다... 개린이로서 신기하네요 ㅎㅎ

 

 

테이블 뷰 델리게이트의 대표적인 메서드는 다음과 같습니다.

 

1. tableView(_:didSelectRowAt:)
2. tableView(_:heightForRowAt:)

우선 델리게이트 메서드는 더 많습니다. 아래 애플 문서에 델리게이트 메서드가 있으니 한번 읽어보시길 바랍니다.

developer.apple.com/documentation/uikit/uitableviewdelegate/

Apple Developer Documentation

 tableView(_:didSeletRowAt:)

 

이 메서드의 인자 값은 총두 개입니다.

1. 첫 번째는 테이블 뷰에 대한 참조입니다.
   - 그냥 테이블 뷰가 아니라 사용자가 터치에 대해 해당하는 테이블 뷰의 참조값입니다.
2. 두 번째는 터치된 행에 대한 정보입니다.
   - 따라서 이 인자 값을 통해 어느 행을 선택했는지 확인을 할 수 있고 해당 행에 대한 특별한 작업( 다른 페이지로 이동한다든지 )도 수행을 할 수가 있습니다.
   - indexPath 행에 대한 정보라고 생각을 하시면 됩니다.

이 메서드는 사용자가 테이블 뷰 행을 선택했을 때 발생하는 메서드입니다. 

따라서 이 메서드를 통해서 새로운 화면으로 이동을 한다던가 혹은 상세 내용을 팝업으로 보여줄 때 사용할 때 유용하게 쓰입니다.

 

이 메서드 또한 델리게이트 시스템에 의해 호출이 됩니다.

 

 

 tableView(_:heightForRowAt:)

 

이 메서드의 인자 값은 총두 개입니다.

1. 첫 번째는 테이블 뷰에 대한 정보입니다.
   - 이 테이블 뷰를 통해 특정 테이블 뷰만 행의 높이를 다르게 지정해주는 것을 할 수 있습니다.
2. 두 번째는 행에 대한 정보입니다.
   - 따라서 이 인자 값을 통해 행에 따라 높이를 다르게 지정을 해줄 수도 있습니다.

이 메서드는 행의 높이를 지정해주는 것으로 각 행의 높이 값을 return 합니다. return값은 CGFloat으로 되어 있기 때문에 타입을 잘 고려해서 사용을 해야 합니다.

 

만약에 테이블 뷰의 행을 모두 같은 높이로 할 거면 이 메서드를 사용할 필요는 없습니다. UITableView의 rowHeight속성을 통해 조절해도 됩니다.

 

그렇지만 저는 구현해보기에서 이 메서드를 통해 높이를 일괄되게 해 보겠습니다 ㅎ

 

 

우선 대표적인 테이블 뷰의 델리게이트와 데이터 소스의 메서드에 대해 알아봤습니다 ㅎㅎ

 

그렇게 많은 메서드를 다루지 않고 대표적인 것만 다뤄본 만큼 추후에 테이블 뷰 델리게이트 메서드를 구현하게 되면 따로 포스팅을 하겠습니다. :)

 

다음에는 이제 이 메서드와 테이블 뷰 컨트롤러를 통해 한번 구현을 해보겠습니다.