[iOS/Swift3.0] iOS TodoList App 만들기 3 (Todo 등록 기능)

Let's make iOS TodoList App (TodoList App 만들기)

그동안 배운 것을 활용해보기 위해 할일을 적고 체크하는 TodoList 앱을 만들어보기로 합니다.

• 구현 기능

  • Todo List 조회
  • Todo 등록
  • Todo 삭제
  • Todo 완료 체크

• 사용할 것

  • Navigation Controller
  • UIBarButtonItem
  • Auto Layout
  • UserDefaults (데이터 영구 저장)
  • UITableView (리스트 출력)
  • UITextField, UITextView (Todo 등록)

---

1. 데이터 모델 만들기(TodoList.swift)

이전에 화면을 구성하고 객체를 연결하여 tablevie에 데이터를 출력하는 단계까지 진행하였습니다 이번에는 title, content, isComplete의 변수를 담을 Data Class를 만들어 화면 조회 기능을 해보겠습니다

Data Class는 Command+N > Swift file을 선택하여 생성합니다 title, content, isComplete는 struct(구조체)에 정의하고 생성자도 만들겠습니다

isComplete는 할일 완료 여부를 체크할 텐데 처음 생성했을 땐 할일이 완료되지 않은 상태므로 기본값으로 false를 부여합니다

content는 작성할 수도, 안할 수도 있기 때문에 optional로 하겠습니다

struct TodoList {
    var title: String = ""  // 할일 제목
    var content: String?    // 할일 세부 내용
    var isComplete: Bool = false  // 할일 완료 여부
 
    init(title: String, content: String?, isComplete: Bool = false) {
        self.title = title
        self.content = content
        self.isComplete = isComplete
    }
}

데이터 모델도 다 만들었네요!

1. 데이터 출력하기

테이블 뷰에 리스트로 출력할 것이기 때문에 해당 리스트는 배열 형으로 존재해야합니다 또 할일 등록 화면에서 등록한 뒤 리스트로 돌아가 출력하기 때문에 우선 전역변수로 생성해주겠습니다

ViewController.swift에서 import아래에 TodoList형의 배열을 하나 만들어줍니다

// 할일 저장 리스트 (전역변수) var list = [TodoList]() 

전역변수로 정의하게되면 AddTodoVC에서도 list변수에 접근할 수 있게됩니다

우선 할일 등록 기능을 구현하기 전에 sample data를 넣어 출력하도록 하겠습니다

앞서 만든 list에서 append메소드를 사용하여 아래와 같이 작성해줍니다

list는 TodoList형으로 선언된 배열이기때문에 TodoList 객체로 넣어줍니다 

list.append(TodoList(title: "test", content: "testData"))

우선 list에 데이터 3개를 add했는데 그럼 화면에도 3줄만 표시되어야하겠죠

이전에 row갯수를 20개로 지정했던 것을 list의 갯수만큼만 row를 가지도록 하기위해 numberOfRowsInSection() 함수의 return을 변경해줍니다. 그리고 list의 갯수를 가져오기 위해서 count속성을 사용합니다

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }

이렇게만 하면 화면에는 아까와 같은 화면(Title, Subtitle)로만 뜨게됩니다 cell의 각 항목에 데이터를 연결해야 내가 입력한대로 나오게됩니다 우리가 설정한 cell은 textLabel과 detailTextLabel 두개를 가지고 있고 추가로 할일 완료 여부를 주기 위해 cell에 accessoryType을 주겠습니다

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
 
  cell.textLabel?.text = list[indexPath.row].title
  cell.detailTextLabel?.text = list[indexPath.row].content
  if list[indexPath.row].isComplete {
    cell.accessoryType = .checkmark
  }else{
    cell.accessoryType = .none
  }
 
    return cell
  }

실행을 시켜볼까요 그럼 아래와 같은 모습으로 뜨게됩니다 

1. 할일 등록 기능 구현하기

샘플 데이터를 출력하는 것까지 했으니 이제 진짜 할일을 등록하는 기능을 구현하면 되겠네요!!!!

할일이 등록되는 프로세스는 다음과 같습니다

1. Done버튼이 클릭되었을 때 list에 데이터가 append되고
2. 리스트화면으로 돌아가
3. 입력한 데이터가 뜨게됩니다

• list에 데이터를 append하려면 textfield와 textview에 입력한 text를 가져와야합니다 이것은 간단합니다 @IBOutlet으로 연결한 객체.text하면 text를 가져올 수 있습니다

안드로이드에서는 getText(), setText()가 있는데 swift에서는 text property 하나로 값을 가져오고 값을 세팅할 수 있습니다

list는 TodoList 타입이므로 TodoList객체를 생성하여 list에 append해주면됩니다 객체가 제대로 생성되었는지 확인하기 위해 print()메소드로 로그를 찍어보겠습니다

// Done 버튼 클릭 시 새로운 TodoList 객체 생성
// 생성한 객체에 입력한 정보 저장
@IBAction func addListItemAction(_ sender: Any) {
 
        let title = titleTextField.text!
        let content = contentTextView.text ?? ""
 
        1. `Done`버튼이 클릭되었을 때 list에 데이터가 append
        let item: TodoList = TodoList(title: title, content: content)
 
        print("Add List title : \(item.title)")
        // TodoListViewController에 생성한 전역변수에 append
        list.append(item)
 
        2. 리스트화면으로 돌아가기
        self.navigationController?.popViewController(animated: true)
    }

앞에서 이야기했던 할일이 등록되는 프로세스의 2번까지 했습니다 지금 실행을 시켜볼까요? 그러면 리스트화면에는 새로 등록한 할일이 뜨지 않습니다

왜 그런건지 알아보고 새로 등록한 할일이 뜨도록 해봅시다

---

[ViewConroller 생명주기]

iOS에는 앱 생명주기와 view 생명주기가 있습니다. 일단 여기서는 view의 생명주기를 보도록하겠습니다

Reference

https://developer.apple.com/documentation/uikit/uiviewcontroller https://stackoverflow.com/questions/5562938/looking-to-understand-the-ios-uiviewcontroller-lifecycle

ViewController의 메소드는 아래 순서대로 동작합니다

• ViewDidLoad - Called when you create the class and load from xib. Great for initial setup and one-time-only work.
• ViewWillAppear - Called right before your view appears, good for hiding/showing fields or any operations that you want to happen every time before the view is visible. Because you might be going back and forth between views, this will be called every time your view is about to appear on the screen.
• ViewDidAppear - Called after the view appears - great place to start an animations or the loading of external data from an API.
• ViewWillDisappear/DidDisappear - Same idea as ViewWillAppear/ViewDidAppear.
• ViewDidUnload/ViewDidDispose - In Objective C, this is where you do your clean-up and release of stuff, but this is handled automatically so not much you really need to do here.

우리는 화면 초기화와 데이터 구성에 대한 소스는 ViewDidLoad(_:)에만 구현해주었습니다. 이 메소드는 딱 한번 최초로 뷰가 로드되는 시점에만 호출됩니다

우리는 등록 화면 -> 리스트 화면으로 이동을 하는데 이때는 ViewDidLoad(_:)가 호출되지 않기 때문에 새로 작성한 데이터는 테이블 뷰 목록에 반영되지 않습니다.

그래서 ViewDidAppear(_:)에 테이블 목록을 재 구성하는 코드를 작성해야합니다

override func viewDidAppear(_ animated: Bool) {
    todoListTableView.reloadData()
}

다시 실행해볼까요? 그럼 사진처럼 데이터가 잘 나올겁니다

Todo를 등록하고 조회하는 기능을 구현하였습니다✔️ 

이제 삭제하는 기능을 구현해보겠습니다