[iOS] UITableView를 사용해서 화면에 Cell 나타내기

UITableView

TableView는 하나의 열을 사용해서 데이터를 뷰에 나타내는 View 입니다.

또한 UITableView는 UIScrollView를 상속받고 있고, 수직 스크롤만 지원합니다.

TableView는 어디에 사용될까요?

아이폰의 연락처, 설정, 메시지, 카카오톡 친구 목록, 인스타그램 등에 사용됩니다.

설정 앱을 한번 보실까요?

비슷하게 생긴 컴포넌트를 하나의 Cell이라고 표현하고, 수직 방향으로 나열할 수 있도록 도와주는 것이 TableView의 역할 입니다.

StackView나 View로 만들어도 상관없지 않을까? 하는 생각이 드실 수 있습니다.

그렇다면 1000개의 Cell이 있다면 어떨까요?

StackView로 만든다면 1000개를 다 만들어줘야 하고, 맨 마지막에 있는 Cell을 사용하지 않을 것이여도 메모리에 올라가게 될 것입니다.

하지만 TableView로 만든다면 하나의 Cell만 만들어주면 될 것이에요, 또한 TableViewCell은 재사용이 되므로 메모리 관리 측면에서도 훨씬 좋습니다.

그렇다면 TableViwe를 한번 만들러 가보시죠.

TableView 구현

스토리보드로 구현을 해보겠습니다!

먼저, ViewController에 UITableView를 추가하고 Constraint를 SuperView와 동일하게 주겠습니다.

이제 TableViewCell을 TableView안에 넣어줍시다!

저는 TableView 셀에 일정의 제목을 보여줄 UILabel, 일정을 완료했는지 체크할 수 있는 UISwitch를 넣어줄게요.

그리고 이 TableViewCell에는 Identifier라는 프로퍼티가 있는데,
이는 재사용될 Cell을 식별하기 위한 문자열 입니다.
저는 PlanCell 이라고 작성하겠습니다!

자 이제 이 TableView를 ViewController와 IBOutlet으로 연결을 해주겠습니다.

아직 끝나지 않았습니다. TableView에 UITableViewDatasource를 채택해야 합니다.

UITableViewDatasource는 테이블 뷰에 셀을 제공하기 위해 채택해야하는 프로토콜 입니다.

채택했다면 필수적으로 2가지 메서드를 작성해야합니다.

• TableView의 Section 및 row의 수를 작성
• 테이블의 각 row에 대한 Cell을 제공

UITableViewDatasource를 채택해볼까요?

UITableViewDatasource를 채택했는데, 필수적인 메서드를 작성하지 않아서 에러가 발생한 모습입니다.

빨간 점을 클릭하면 알아서 작성해줍니다!

UITableViewDatasource

첫 번째 메서드는 반환 타입이 Int네요.
이 메서드는 section별로 행 수를 반환합니다.

저는 section을 1개만 사용할 것이므로 section 별로 나누어서 행 수를 반환하지 않고, 20개의 행을 반환하도록 작성하겠습니다.

두 번째 메서드는 반환 타입이 UITableViewCell 입니다.

이제 저희가 아까 작성한 Identifier를 통해 Cell을 찾아올 수 있습니다.
tableView.deqeueResableCell(withIdentifier: 셀 identifier)을 통해서 TableViewCell을 가져올 수 있어요.

이제 실행을 해보면... 아무런 변화가 없네요.
왜 그럴까요?

지금은 ViewController가 처리해야 할 부분을 TableViewDatasource가 처리를 해주고 있죠?
이것을 tableView가 하겠다~ 라고 작성을 해주어야 합니다.

viewDidLoad() 함수 안에 작성해주겠습니다.

이제 실행해보면..!

아까만들어준 20개의 Cell이 보여지는 것을 확인할 수 있습니다!

이제 Cell별로 UILabel에 일정 제목을 나타내도록 해야겠죠?

다음포스팅에서 이어서 작성하겠습니다.

지적댓글 환영입니다!