Swift StoryBoard / TableView

오늘은 사전캠프 3주차 강의를 모두 수강하였다. 그리고 아래에 오늘 배운 내용을 정리해보았다.

-데이터 관리-

데이터 모델링

• 데이터의 그룹
• 설계를 하고 개발을 하다보면 만나는 데이터들
• 데이터의 틀을 만드는 작업인 모델링
• 의미를 부여하는 작업

---

테이블 뷰 구현

• 스토리보드에서 command + shift + L 을 눌러 라이브러리를 오픈
• 라이브러리 검색창에 Table View 를 검색하고 드래그 앤 드롭으로 View Controller 위에 배치
• 라이브러리 검색창에 Table View Cell을 검색하고 드래그 앤 드롭으로 Table View 위에 배치
• View Controller의 클래스에 UITableViewDelegate 프로토콜을 종속한다.
• Table View를 다루기 위해 아래의 코드를 입력한다.

// 현재 뷰 컨트롤러 위의 테이블 뷰 값
@IBOutlet weak var myTableView: UITableView!

extension ViewController: UITabBarDelegate, UITableViewDataSource {
	// UITabBarDelegate, UITableViewDataSource 프로토콜을 준수하기 위한 필수 메소드
	func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    	return // Int타입의 값
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableView {
    	// cell에 대한 설정을 입력
        // withIdentifier는 스토리보드의 테이블 뷰의 셀을 클릭 후 우측의 'show the Attributes inspector`에서 Identifier를 입력하고, 같은 값을 넣는다.
        // for의 값은 IndexPath의 값으로 매개변수인 indexPath를 입력해주면 된다.
        // 원형 - let cell = myTableView.dequeueReusableCell(withIdentifier: String, for: IndexPath)
        let cell = myTableView.dequeueReusableCell(withIdentifier: "MyFirstCell", for: indexPath)
        
        // cell에 대해 label 값을 지정해줄 수 있다
        cell.textLabel?.text = "Cell"
        
        return cell
    }

• 빌드를 통해 테이블 뷰가 제대로 구성되었는지 확인한다.

테이블뷰를 작성하며 발생했던 에러 해결

사전캠프 3주차 강의를 보며 스토리보드에서 테이블뷰를 다루던 중 빌드에서 에러가 발생했다.
Error: this class is not key value coding-compliant for the key bestFriend
-> Xcode에서 사용자가 코드에 연결시켜둔 bestFriend를 찾을 수 없다는 오류이다.
강의에서는 문제 없이 진행되는데, 내 코드에서만 오류가 발생하니 내가 뭘 잘못 건들였나 싶어서 강의를 되돌려보며 코드를 다시 작성했으나 그럼에도 같은 문제가 발생했다.
강의를 보면서도 해결을 할 수 없어 구글링을 통해 에러를 검색했고, 그 결과 무척이나 단순한 이유로 에러가 발생했음을 알 수 있었다.

위 사진처럼 내가 뷰에 구성요소와 연결해둔 코드를 찾을 수 없다는 뜻이었다.
저기서 경고 표시가 되어있는 Outlets만 해제해주니 쉽게 오류를 해결할 수 있었다.

---

만약 해제를 했음에도 빌드에서 오류가 발생한다면 코드를 재확인 해보아야 한다.
뷰와 코드를 연결하기 위해 우리는 아래와 같이 코드를 입력한다.

@IBOutlet weak var myLaber: UILabel!

이 때, myLabel이라는 변수를 UILabel 타입으로 설정하며 !를 사용해 옵셔널 강제 추출을 한 것을 볼 수 있다.
옵셔널 강제 추출은 그 값이 확실히 존재할 경우에만 사용한다.
그렇기 때문에 @IBOutlet 으로 선언한 코드가 뷰와 연결되어 있지 않다면 그 값은 빈 값이 되어 nil을 반환하고 오류가 발생하는 것이다.

---

네비게이션 뷰 구현

• 스토리보드에서 command + shift + L 버튼으로 라이브러리를 오픈한다.
• 라이브러리 검색창에 Navigation Controller를 드래그 앤 드롭으로 불러온다.
  만약 이미 네비게이션 뷰에 연결할 뷰를 만들어 두었다면, 해당 뷰 컨트롤러를 선택 후 우측 하단의 Embed In을 누르고 Navigation Controller를 선택한다.
• 네비게이션 뷰에 종속된 뷰에서 control을 누른채 연결할 뷰에 드래그하면 두 뷰가 연결되어 선행 뷰가 상위 뷰, 후행 뷰가 하위 뷰가 되고, 하위 뷰에는 Back 버튼이 생성된다.
• 상위 뷰에서 트리거를 통해 하위 뷰로 이동할 수 있고, 하위 뷰는 상위 뷰 위에 레이어 스택으로 쌓이게 된다.
  

  금일 연습 구현한 네비게이션 뷰의 모습

---

-오늘의 학습 후기-

오늘은 테이블 뷰 및 네비게이션 뷰를 스토리보드에서 구현하는 기초적인 방법에 대해 학습했다.
이전에 스토리보드에 대해 공부했을 때는 다른 방법으로 테이블 뷰를 구현한 것으로 기억하는데, 새로운 방법을 익힐 수 있어 좋았다.
네비게이션 뷰는 무척 간단했지만, 만약 내가 원하는 뷰 연결 방법이나 이동 방법이 있을 때 네비게이션 뷰를 어떻게 활용할 수 있을지 고민해 보았다.
지금 당장은 구상이 어려웠지만, 스토리보드를 익히다보면 어느순간 스스로 할 수 있으리라고 생각한다.

여전히 스토리보드가 SwiftUI보다 낫다고는 생각하지 못하겠다.
불편하고 낯설다. 사용법을 더 익히게 되면 스토리보드가 더 편해지는 날이 올지도 모르겠다.