> For the complete documentation index, see [llms.txt](https://sois-organization.gitbook.io/today-i-learned/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sois-organization.gitbook.io/today-i-learned/ios-project/undefined-1/tableview.md).

# TableView 연결하기

주간 날씨를 보여주는 Table View를 만들어보자.

#### 현재 뷰 상태

<figure><img src="https://1233758029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLoXNRsVHY9zhVVcqlekz%2Fuploads%2Foal9ov7yX4OaomkGZP1r%2Fimage.png?alt=media&amp;token=9e5d33f8-97c7-422c-9993-97e8acd4202c" alt=""><figcaption></figcaption></figure>

![](https://1233758029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLoXNRsVHY9zhVVcqlekz%2Fuploads%2FdbRqFqWZJB6A4mATRqnY%2FSimulator%20Screenshot%20-%20iPhone%2014%20Pro%20-%202023-05-06%20at%2021.58.16.png?alt=media\&token=67a1f90d-985d-4611-b4ee-88f5c1624c9e)

## TableView 설정방법

### 1. TableView Cell 생성

(Cocoa Touch Class를 이용해서 생성하며, xib도 같이 생성하자.

![](https://1233758029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLoXNRsVHY9zhVVcqlekz%2Fuploads%2F2FvASHnwSQ4PyDw3CzUW%2Fimage.png?alt=media\&token=ad187c74-bbe0-4d01-a07b-0da373c2c88a)

**class file과 xib 파일 outlet 연결**

```swift
import UIKit

class WeaklyWeatherTableViewCell: UITableViewCell {

    @IBOutlet weak var weatherIconImageView: UIImageView!
    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var weatherLabel: UILabel!
    @IBOutlet weak var maximumTeperatureLabel: UILabel!
    @IBOutlet weak var minimumTemperatureLabel: UILabel!
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    
}

```

**xib의 Attribute Controller에서 id 설정**

![](https://1233758029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLoXNRsVHY9zhVVcqlekz%2Fuploads%2F8FfLvtykHnNBMM3FmUnw%2Fimage.png?alt=media\&token=9d2f8814-3263-4052-ad54-90a546dd0803)

**Tableview datasource, delegate 설정**

[애플 공식 문서](https://developer.apple.com/documentation/uikit/uitableviewdatasource)

```swift
import UIKit

class ViewController: UIViewController {
    
    // delegate, datasource 설정
    @IBOutlet weak var weaklyWeatherTableView: UITableView! {
        didSet {
            weaklyWeatherTableView.dataSource = self
            weaklyWeatherTableView.delegate = self
        }
    }
    
    let weatherData = ["16", "24", "17", "34", "16", "24", "17"]

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // xib 설정
        weaklyWeatherTableView.register(UINib(nibName: "WeaklyWeatherTableViewCell", bundle: nil), forCellReuseIdentifier: "weatherTableViewCell")
        
    }
}


extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        weatherData.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = weaklyWeatherTableView.dequeueReusableCell(withIdentifier: "weatherTableViewCell", for: indexPath) as! WeaklyWeatherTableViewCell
        
        cell.maximumTeperatureLabel.text = weatherData[indexPath.row]
        
        return cell
    }
}

```

![](https://1233758029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLoXNRsVHY9zhVVcqlekz%2Fuploads%2FUGRel7SFLuvTT3rGlj9N%2FSimulator%20Screenshot%20-%20iPhone%2014%20Pro%20-%202023-05-06%20at%2022.25.58.png?alt=media\&token=71adbbdf-55d2-4482-a12d-6679d54dcc93)