이번챕터에서 만들어볼 앱은 거리의 단위를 변환시키는 UnitConverter 이다.
하단에 선택창에서 km 단위의 거리를 선택하면 상단 레이블에 mile 단위로 표시되도록 구현해보려고 한다. 새로운 프로젝트(UnitConverter)를 시작해보자.

Goal

픽커뷰(pickerView) 구현해보기.

Meterials

Class UIPickerView
: 슬롯머신 형태의 회전하는 휠을 사용해 값을 보여주는 뷰.

Protocol UIPickerViewDataSource
: 픽커뷰에서 데이터모델로서 픽커뷰를 구현하기 위해 필수적으로 채택되는 프로토콜.

Thinking First

픽커뷰는 사용자의 선택을 받는 입력도구 이다.
기존 프로젝트에서 오브젝트 라이브러리에 있는 픽커뷰를 스토리보드의 뷰안으로 드래그앤드롭 해보면 몇개의 도시이름이 입력된 익숙한 선택도구가 생성된다.

바로 앱을 실행해보자. 샘플링된 디자인과 달리 픽커뷰안에 아무이름도 표시되지 않는다.
이제부터 픽커뷰안에 우리가 원하는 데이터를 출력되도록 작업할 것이다.
여기서 필요한 개념이 데이터소스(DataSource)와 델리게이트(Delegate) 이다.

우선 데이터소스를 먼저 적용해보자. 픽커뷰에서 오른쪽 마우스버튼을 클릭하면 몇가지 항목이 보이는데 그중 데이터소스를 드래그하여 현재의 뷰컨트롤러에 연결한다.

이것은 현재의 뷰컨트롤러를 픽커뷰의 데이터소스로 변환한 것이다.
이제 실제 데이터소스의 기능을 하도록 구현해보자.

Making Next

UIPickerViewDataSource는 일종의 프로토콜로서 아래와 같이 클래스 선언부에 추가하여 사용한다.
이것을 ”프로토콜을 채택한다"라고 표현한다.

class ViewController: UIViewController, UIPickerViewDataSource {

지금은 잘 이해가 안될수 있지만 우선은 따라해보면서 화면에 출력되는 구조를 알아보고 다음 챕터부터 원리에 대해 알아볼 것이다.
UIPickerViewDataSource 프로토콜을 채택하는 순간 에러메시지가 발생한다.
프로토콜을 채택했으므로 약속된 메서드를 구현해야 한다.

클래스내에 아래와 같은 함수를 추가해보자.

// 픽커뷰의 컴포넌트(몸체)를 1로 설정한다.
   func numberOfComponents(in pickerView: UIPickerView) -> Int {
       return 1
   }
  

// 컴포넌트내의 행의 수를 5로 설정한다.
   func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) 
   -> Int {
       return 5
   }

앱을 실행시키면 5개의 행으로 설정된 픽커뷰가 보일 것이다.
반환값을 바꿔가면서 실행해보면 컴포넌트와 row의 개념을 확실히 이해할 수 있다.