[Udemy iOS & Swift Bootcamp] Todo App(Local Data Persistance)

Local 에 데이터가 저장되는 ToDo List 앱을 만들어보자.

---

1. Project Clone

GitHub - appbrewery/Todoey-iOS13: Learn to Code While Building Apps - The Complete iOS Development Bootcamp

 

2. Table View Controller 만들기

Table View Controller 추가하기. Controller 로 추가하면 Component 가 추가되는게 아니라 화면 하나가 추가 된다.

 

Prototype table cells must have reuse identifiers. 

혹시 위와 같이 prototype이 identifier를 반드시 재사용해야 한다는(코드에서 사용할 수 있어야 한다는) 경고가 뜨면 Table View Cell(Prototype 부분)에  identifier 을 입력해주면 된다.

 

3. Initial View 지정

기존 View 는 제거하고 방금 만든 Table View Controller 를 inital View 로 화살표 지정해준다.

만약 화살표 통째로 날려버렸다면 속성 inspector 에서 Is Initial View Controller 체크해주면 된다.

 

4. Navigation Controller 추가하기

Editor > Embed In > Navigation Controller 를 선택하면 요렇게 Navigation Controller 가 추가된다.

 

5. Navigation Top Bar 꾸미기

Navigation Top Bar 에 Title 지정하기.

 

Navigation Bar 에 색상 및 Title 컬러 지정하기. (Bar Tint 는 System Blue Color, Title color 는 White Color)

는 안되네 ? Bar Tint 를 System Blue Color 로 적용했는데 반영이 안된다.

Background, Tint 컬러를 System Blue Color 로 모두 변경하니 반영됐다.

 

6. ViewController 코드 파일 수정하여 tableViewController 와 연결

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

↓

import UIKit

class TodoListViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

기본으로 주어진 ViewController 를 TodoListViewController 로 이름을 변경한다. 파일명도 변경해줘야 함!

 

위에서 만든 TableViewController를 연결해서 사용할 클래스 이므로 UIViewController 가 아닌 UITableViewController 를 상속받아준다. 이렇게 하면 TableView를 변수로 선언해줄 필요 없이 자동으로 사용가능하다.

 

tableViewController 의 씬이 TodoListVIewController 클래스와 잘 연결되어 있는지 확인한다.

연결이 안되어 있다면 클래스를 직접 선택해준다.

 

7. Table View 리스트 내용 하드 코드로 확인하기

import UIKit

class TodoListViewController: UITableViewController {

    let itemArray = ["Find Mike", "Buy Eggs", "Destroy Demogorgon"]
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemArray.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TodoItemCell", for: indexPath)
        cell.textLabel?.text = itemArray[indexPath.row]
        return cell
    }
}

tableView 에 값을 뿌리기 위한 함수들을 override 해서 작성해준다. (채팅앱 만들기에서 배웠던 내용. 매우 까먹음ㅎ.)

numberOfRowsInSection 가 있는 함수로 row 개수 return 하고, cellForRowAt 가 있는 함수로 cell 에 값을 담는다.

 

*참고

TableView 의 list 를 뿌리는 함수는 기본적으로 아래 두 함수를 override 한다.

 //만들어야 할 cell 개수 반환
 func tableView(UITableView, numberOfRowsInSection: Int) -> Int

//재사용 가능한 table view cell을 생성해서 반환
func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell

 

8. 실행결과 확인

실행화면. 3개의 데이터가 3개 행으로 잘 나온다.