Review of Connect the UI to Code (2) - Food Tracker

Define an Action to Perform

iOS 앱은  이벤트 기반 프로그래밍 ( event-driven programming ) 기반입니다.

 

이것은 앱의 실행 흐름이 이벤트에 의해 정해진다는 의미입니다.

 

이벤트에는 시스템이 발생시키는 이벤트(system events)와 앱 사용자가 발생시키는 action 이 있습니다.

 

사용자가 UI를 통해 실행시킨 Action이 앱 내 이벤트를 발생시킵니다.

 

" The user performs actions in the interface that trigger events in the app "

 

즉, 앱의 코드 조각이 실행되는 시기를 사용자가 제어할 수 있습니다.

 

action 즉 action method는 앱에서 발생하는 이벤트와 연결되어 있는 코드 조각입니다.

 

이벤트가 발생하면 시스템은 코드 조각을 실행시킵니다.

 

이벤트와 연결된 코드를 이용해서 개발자는 앱의 flow (실행 흐름)을 간접적으로 제어할 수 있습니다.

 

 

설정 방법

 

이전 글의 outlet 과 같이, 컨트롤을 누른 상태로 원하는 뷰를 View Controller를 드래그 & 드롭하면 됩니다.

 

이 동작을 통해  @IBAction func라는 키워드로 시작하는 메서드를 생성하게 됩니다.

 

 

 Outlet 에서와 다른 부분은 Connection 이 `Outlet` 이 아닌 `Action`으로 선택하였다는 점입니다.

 

또한 사진 상에서 Type을 `Any`로 하였지만, View Controller 파일만 보고 어떤 타입의 오브젝트가 호출하는 메서드인지 알기 위해서는 `UIButton`으로 특정하는 것이 가독성 측면에서 낫다고 생각됩니다.

 

추가적으로 `Touch Up Inside` 는 이벤트의 종류로서, 일반적으로 생각하는 탭 동작에 발생하는 이벤트입니다.

 

엄밀히 이야기하기 위해 `Touch Up Outside` 이벤트와 비교해보겠습니다.

 

사용자의 동작을 일단 Touch와 Up으로 분리해서 생각해야 합니다.

 

말 그대로 1. (손가락으로) 터치하는 동작과 2. (손가락을) 떼는 동작으로 구분하는 것입니다.

 

Touch Up Inside 는 뷰를 터치하고 있는 상태에서 해당 뷰의 바운더리 내(Inside)에서 손가락을 떼면 발생합니다.

 

일반적인 탭 동작이라고 볼 수 있습니다.

 

Touch Up Outside 는 뷰를 터치하고 있는 상태에서 드래그한 채로 이동하여 뷰의 바운더리 바깥(Outside)에서 손가락을 떼면 발생합니다.

 

저는 보통 버튼을 잘못 눌렀을 때 이 동작을 하는 것 같습니다.

버튼을 터치하고 있는 상태에서 떼지 않고 손가락을 끌어서 다른 곳에서 떼면, 해당 이벤트를 처리하는 메서드를 보통 구현하지 않기 때문에 ` 취소` 와 유사한 결과를 기대할 수 있기 때문입니다.

 

 

완성한 코드는 다음과 같습니다.

  @IBAction func setDefaultLabelText(_ sender: UIButton) {
    
    mealNameLabel.text = "Default Text"
  }

 

UIButton 오브젝트에서 이벤트가 발생하면, setDefaultLabelText(_:) 메서드가 호출되고, Outlet으로 연결된 mealNameLable의 text 속성이 바뀌게 됩니다.

 

뷰에서 이벤트가 발생하면 시스템이 action method를 호출하고 sender 오브젝트(이벤트가 발생한 뷰)를 보냄으로써 메시지를 전달합니다.

 

이것을  iOS에서는 target-action pattern이라고 합니다.

 

" Target-action is a design pattern where one object sends a message to another object when a specific event occurs. "

 

여기서 setDefaultLabelText(_:)의 파라미터 sender는 이벤트가 발생한 UIButton 오브젝트입니다.

---

 

Process User Input

 

UITextfield에 입력한 내용을 Return 키를 눌렀을 때 UILabel에 반영하고 싶은 상황입니다.

여기서 Text Field의 delegate를 View Controller로 설정해줍니다.

 

Delegate란 어떤 행동을 `대신 수행해주는` 객체입니다.

 

용어 정리를 하면 여기서 Text Field는 `delegating object` 가 되고, View Controller는 `delegate` 이 됩니다.

 

Delegating object는 delegate의 참조를 계속 가지고 있으면서, 필요한 때에 delegate에게 메시지를 보냅니다.

 

메시지에는 delegating object가 다루거나 다루려고 하는 이벤트에 대한 내용이 들어 있습니다.

 

Delagate는 이 메시지에 맞게 반응합니다. 

 

예를 들면 1. 자신이나 다른 뷰의 상태를 바꾼다던가, 2. 이벤트를 어떻게 처리했는지에 대한 값을 리턴합니다.

 

Text Field의 delegate 는 Text Field 가 text를 수정하고 있는 동안  Text Field와 소통하고, 중요한 이벤트가 발생했을 때 알게 됩니다.

 

여기서는 사용자가 text 수정을 시작하거나 마쳤을 때 가 될 수 있습니다. 

 

어떤 객체의 Delegate가 되기 위해서는 적절한 protocol을 채택해야 합니다.

 

관련 글: Protocol Overview, Delegate Pattern

 

text field의 delegate 이 되기 위해 필요한 프로토콜은 UITextFieldDelegate입니다.

 

 보통 자신을 관리하고 있는 View Controller를 delegate로 설정합니다.

 

설정하는 방법은 크게 2가지가 있는데, 위의 관련 글에 적었으므로 생략하겠습니다.

 

extension ViewController: UITextFieldDelegate {
  
  func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // code
  }
  
  func textFieldDidEndEditing(_ textField: UITextField) {
    // code
  }
  
}

 

Delegate Protocol을  extension 문법을 통해 adopt 한 코드입니다.

 

이 프로토콜은 필수적으로 구현해야 메서드가 따로 없으므로, 용도에 맞는 메서드 두 가지만 구현하였습니다.

 

관련 글: UITextFieldDelegate - Apple Developer Documentation

 

UIKit의 API 작명 방식은 일체감이 있어서 참 좋습니다.

 

Should, Did, Will과 같은 동사를 메서드 명에 넣어서 호출 시점을 유추할 수 있기 때문입니다.

물론 정확한 호출 시점의 확인은 Documentation이나 Xcode 가 제공하는 Quick help를 통하여 확인해야 합니다.

 

따라서 textFieldShouldReturn(_:) 메서드는 사용자가 이미 Return 키를 탭 했고, 이것을 처리하기 직전에 호출되는 메서드일 것입니다.

 

First Responder

사용자가 Text Field를 탭 할 때, 이것이 first responder 가 됩니다. 

 

앱에서 first responder는 최일선에서 앱 이벤트를 받는 객체입니다. (키 이벤트, 모션 이벤트, action 메시지 등)

 

즉, 사용자에 의해 성성된 이벤트들은 first responder가 첫 번째로 받도록 routing 되어 있습니다.

 

 Text Field가 first responder가 되면, iOS는 화면에 키보드를 띄워주고, Text Field를 위한 수정 세션 (editing session)을 엽니다.

 

사용자가 키보드로 입력하는 것들이 Text Field에 채워지게 됩니다.

 

사용자가 Text Field 수정을 끝내고 싶을 때, Text Field는 first responder를 그만두어야 합니다.

 

수정을 끝내면 Text Field는 더 이상 active 객체가 될 필요가 없기 때문입니다. (더 이상 이벤트를 받아서 처리할 필요가)

 

이때는 다른 적절한 객체가 first responder가 되는 것이 맞을 것입니다.

 

 

extension ViewController: UITextFieldDelegate {
  
  func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    
    // Hide the keyboard.
    textField.resignFirstResponder()
    return true
  }
  
  func textFieldDidEndEditing(_ textField: UITextField) {
    mealNameLabel.text = textField.text
  }
  
}

 

Text Field 가  더 이상 fisrt responder가 아니게 되면, textFieldDidEndEditing(_:) 메서드가 호출됩니다.

 

관련 글: Bool 을 반환하는 Delegate Method

 

 

//MARK: 의 사용

주석으로 //MARK: Properties와 같은 문구를 추가해두면, 코드가 길어지는 상황에서 쉽게 해당 위치를 찾을 수 있습니다.

 

XCode가 Functions menu에서 // MARK: 주석을 인식해서 보여주기 때문입니다.

 

 

 

끝!

---

 

다음 글: Review of Work with View Controllers (1) - Food Tracker

Review of Work with View Controllers (1) - Food Tracker