테이블 뷰의 구조
![](https://velog.velcdn.com/images/rudin_/post/9a2d6382-261d-49c7-abdf-7bdac8c8ed81/image.png)
테이블 뷰 UI 구현
Table View Styles
![](https://velog.velcdn.com/images/rudin_/post/8b8d9c82-64f3-41bf-b594-8e10b39b7b49/image.png)
Plain
![](https://velog.velcdn.com/images/rudin_/post/58e116f1-c4e0-4423-adf7-7decec98f448/image.png)
- 섹션 별 구분성이 없다.
- 만약 cell Style을
Custom
으로 할 경우 Plain으로 하는 것이 좋다.
- 나머지 스타일은 여백을 자동으로 추가해주기 때문.
Grouped
![](https://velog.velcdn.com/images/rudin_/post/e2485b8d-7824-45d5-9934-d0a80d7e2ded/image.png)
Inset Grouped
![](https://velog.velcdn.com/images/rudin_/post/b17394b8-59e9-453f-87f3-8a4459a576b3/image.png)
- 섹션 별로 상자로 구분되어 있다.
- cell Style을
Basic
으로 할 경우 추천
Cell Style
Basic
![](https://velog.velcdn.com/images/rudin_/post/537150bd-06a0-44d0-94cd-5b5b94e62465/image.png)
Right Detail
![](https://velog.velcdn.com/images/rudin_/post/2d9cf5d8-b678-4a1d-9510-c8bfe6e37e3c/image.png)
Left Detail
![](https://velog.velcdn.com/images/rudin_/post/1d997011-033d-4536-8131-f0a227a447c5/image.png)
Subtitle
![](https://velog.velcdn.com/images/rudin_/post/408fe8b4-0435-4cc8-a374-75b06d852db4/image.png)
Cell Identifier
![](https://velog.velcdn.com/images/rudin_/post/26cf3b09-77c3-48e4-8f15-078bc4939e24/image.png)
- cell을 구분하는 값.
- 데이터를 채워 리턴할 때 필요하다.
Label
![](https://velog.velcdn.com/images/rudin_/post/da6d52b8-636c-4c1c-b9c9-c7b4b6081263/image.png)
- 기본 값으로 Font의 크기가 System 0.0으로 되어있다.
- 그대로 둬도 레이블 표시는 되지만, 가능하다면 설정해주는 것이 바람직하다.
TableView DataSource
![](https://velog.velcdn.com/images/rudin_/post/b379284b-995b-48da-81aa-6c817ff0040a/image.png)
- 테이블 뷰를 오른쪽 클릭- dataSource를 해당 씬의 VC와 연결
UITableViewDataSource
![](https://velog.velcdn.com/images/rudin_/post/ebb3f5dd-7938-49a1-826b-31e71b5f32f0/image.png)
- 연결한 VC에서 DataSource 프로토콜을 채택해야 함