[iOS/Swift] TableView 만들기

정말 많은 앱에서 자주 쓰이는 TableView... 전에 시계앱을 클론코딩할 때 어느정도 공부했다고 생각했는데 안쓰다보니 내 기억속에서 사라져버렸다..ㅎㅎ🤣

그래서 미래의 나를 위해... 이번에 제대로 정리해보고자 한다!

먼저 TableView는 Table View, Table View Controller 2가지가 있다.

 

두사진이 똑같은 구성처럼 보이지만.. 좌측은 ViewController에 Table View와 Table View Cell을 넣은 것이고 우측은 그냥 Table View Controller이다.

 

내가 책에서 봤던 예제에서는 우측 Table View Controller를 사용했었는데 찾아보니 좌측처럼 ViewController에 TableView와 TableViewCell을 넣는 것을 더 많이 사용하는것 같다. 

이유는 그렇게하면 Table View의 영역을 조절할 수 있어 커스텀이 더 자유롭게 가능하다!

 

코드를 작성중이였어서,, 코드는 무시하구 ViewController를 선택하고 우측 Custom Class에서 원하는 ViewController로 설정한다.

 

우측에서 셀을 선택하고 identifier을 변경한다! 나는 "myCell"로 설정했당

 

그 다음에 dataSource와 delegate를 연결한다!

 

다른 방법으로 코드로 적어 설정해주는 방법도 있다!

 

🤔  처음 dataSource와 delegate를 연결해주는걸 배웠을때 이걸 해주지 않으면 오류가 나기 때문에 설정을 했었는데.. 좀 더 자세히 보면 dataSource는 데이터를 받아서 뷰를 그려주는 역할을 한다!

그리고 delegate는 사용자가 view에 대한 행동(클릭..)을 했을 때 그 행동을 수행한다.

이게 MVC와 관련이 있는 내용인데.. 

먼저 Model은 데이터와 관련된 부분으로 여기서 DataSource와 유사하고,

Controller는 Model과 View를 이어주는 부분으로 Delegate와 유사하며,

View는 사용자에게 보여지는 부분으로 tableView와 유사하다고 볼 수 있다.

 

그래서 tableView는 말 그래도 뷰니까 사용자에게 보여지는 부분이겠다는건 이해가 잘 되는데..

delegate는 위에서 말했듯이 사용자의 view에 대한 행동이다.

즉 테이블뷰의 모양과 동작을 관리하는것이기 때문에 특정 cell이 선택되면 어떤 행동을 하는지, 행의 높이는 얼마인지와 같은것을 구성한다.

 

그리고 datasource는 데이터와 관련된 부분이므로, 특정 행에 어떤 내용을 보여줄 것인지, 섹션의 타이틀은 무엇인지, 섹션의 행이 몇개인지와 같은것들을 구성해주는 것을 의미한다.

 

좀 헷갈리지만 어쨋들 TableView를 사용하기 위해 꼭 필요한 것이라고 이해했다!🥺🥺

 

그다음 위처럼 cell을 커스텀 해준다. 나는 라벨 하나만 넣어줬지만 높이조절, 이미지 추가 등 다양하게 구성 가능하다!

myCell이라는 이름을 가지는 UITableViewCell을 추가해준다.

그게 아니라면 TableViewCell파일을 추가해주어 cell에 대한 내용을 담을 파일을 추가시켜준다.

클래스 파일이 아닌 일반 스위프트 파일로 만들어도 무방하다!

Cell의 코드 내용이 길어질 경우에는 분리시켜 나타내어주는것이 더 깔끔한 코드를 작성할 수 있을것 같다.

 

셀을 선택하고, 클래스 이름을 변경해줍니다.

 

라벨을 outlet으로 선언해준다.

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return contentText.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = myTableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! myCell
        cell.myLabel.text = contentText[indexPath.row]
        return cell
    }
}

다음으로 위와같이 테이블 뷰를 구성해준다.

첫번째 numberOfSections는 섹션의 개수를 의미하고,

두번째 numberOfRowInSection은 섹션의 내용의 개수를 의미하고,

세번째 CellForRowAt은 셀의 내부 내용을 의미한다고 해석 가능하다.

dequeueReusableCell은 재사용할수있는 셀을 테이블뷰에 넣어주겠다는 의미이며, withIdentifier은 셀의 identifier을 의미한다.

이때 as! myCell을 코드 뒤에 추가적으로 적어주었는데 이를 적어주지 않으면 myCell의 변수를 사용할 수 없기 때문에 적어준다.

그리고 위에서 만들었던 라벨에 내용을 나타내어준다.

 

잘 나온다..^_^ 핳