📘 TIL: 테이블 뷰 UI 구현과 더미 데이터 활용

오늘은 iOS 개발에서 UITableView를 사용해 기본적인 UI를 구현하고, 더미 데이터를 활용하여 화면을 테스트하는 방법을 배웠다. 이를 통해 테이블 뷰의 동작을 빠르게 확인할 수 있었다.

---

🚀 학습 내용

1️⃣ UITableView 기본 구성

• UITableView는 리스트 형태의 데이터를 화면에 표시할 때 사용하는 기본 컴포넌트이다.
• 테이블 뷰를 사용하려면 UITableViewDataSource 프로토콜을 채택하고 필수 메서드를 구현해야 한다.
  • numberOfRowsInSection: 섹션의 행 개수를 반환.
  • cellForRowAt: 각 행에 표시할 셀을 반환.

2️⃣ SnapKit으로 레이아웃 설정

• SnapKit을 사용해 테이블 뷰와 다른 UI 요소의 제약 조건을 간단하게 설정했다.
• 테이블 뷰가 화면 전체를 채우도록 top, leading, trailing, bottom 제약 조건을 추가했다.

tableView.snp.makeConstraints { make in
    make.top.equalTo(titleLabel.snp.bottom).offset(16)
    make.leading.trailing.bottom.equalToSuperview()
}

3️⃣ 더미 데이터 활용

• 테이블 뷰의 UI를 확인하기 위해 간단한 문자열 배열을 사용하여 데이터를 표시했다.
• 더미 데이터는 임시로 데이터를 넣고 UI를 테스트하는 데 매우 유용하다.

private let dummyData = ["피카츄", "꼬부기", "파이리", "이상해씨", "라이츄"]

• 데이터는 UITableViewDataSource의 cellForRowAt 메서드에서 사용하여 각 셀에 표시했다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
    cell.textLabel?.text = dummyData[indexPath.row]
    return cell
}

4️⃣ 데이터 소스 연결

• 테이블 뷰가 데이터를 표시하려면 반드시 dataSource를 설정해야 한다.
• viewDidLoad에서 tableView.dataSource = self를 추가하여 연결했다.

override func viewDidLoad() {
    super.viewDidLoad()
    setupUI()
    
    tableView.dataSource = self
}

5️⃣ 결과

• 더미 데이터를 통해 테이블 뷰가 정상적으로 작동하는지 확인할 수 있었다.
• 화면에는 아래와 같은 리스트가 표시되었다:
  • 피카츄
  • 꼬부기
  • 파이리
  • 이상해씨
  • 라이츄

---

💡 배운 점

1. 더미 데이터 활용: 간단한 배열을 사용해 테이블 뷰 UI를 빠르게 확인할 수 있다.
2. SnapKit의 유용성: 제약 조건을 코드로 작성할 때 SnapKit이 매우 직관적이고 간편하다.
3. UITableViewDataSource의 중요성: 테이블 뷰는 데이터 소스와의 연결이 필수적이다.

---

🛠️ 개선 아이디어

• 더미 데이터를 단순 문자열 배열이 아니라 객체 배열로 확장하여 데이터 구조를 이해하는 연습을 할 것.
• 커스텀 셀을 만들어 더 복잡한 UI를 테스트해 볼 것.

---

🔗 코드 스니펫

private let dummyData = ["피카츄", "꼬부기", "파이리", "이상해씨", "라이츄"]

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dummyData.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
        cell.textLabel?.text = dummyData[indexPath.row]
        return cell
    }
}

---

✍️ 느낀 점

테이블 뷰는 iOS 앱 개발에서 가장 기본적이면서도 중요한 컴포넌트이다. 특히, 더미 데이터를 활용하면 UI를 빠르게 확인할 수 있어 개발 효율이 높아진다. 앞으로 더 복잡한 데이터 구조와 커스텀 셀을 연습해 나갈 것이다.