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

Connect the UI to Source Code

스토리 보드의 요소들 ( Views ) 은 소스 코드와 연결되어 있습니다.

 

스토리보드에서 하나의 씬 (scene)은 콘텐츠로 이루어진 하나의 화면을 나타내며 보통 하나의 View Controller와 연결되어 있습니다.

 

View controller 에서 앱의 동작을 구현합니다. 

 

View controller는 하나의 컨텐트 뷰 (content view)와 그 밑 계층의 서브 뷰( subviews )를 관리합니다.

 

이것은 Content View Controllers의 경우입니다.
Container View Controllers는 여러 개의 자식 View Controller를 관리합니다.
관련 글: View Controller의 역할

 

View controllers 가 하는 일은 다음과 같습니다.

 

1. 앱의 data model (앱의 데이터를 가지고 있는)과 데이터를 화면에 뿌려주는 view 간의 정보 흐름을 조율합니다

2. 콘텐츠 뷰의 생명주기를 관리합니다

3. 기기가 회전하였을 때 화면 방향을 관리합니다.

4. 앱 내 씬의 위치(navtigation)를 정해줍니다.

5. 유저의 동작에 따른 행동을 구현합니다. (예를 들면 touchInsideOut 이벤트)

 

iOS에서의 모든 view controller는 UIViewController 클래스이거나 이 클래스를 서브 클래싱 한 클래스입니다.

 

스토리보드의 씬과 View Controller를 연결하는 방법은 Identiy inspector에서 설정할 수 있습니다.

 

아래 사진처럼 XCode 왼쪽의 Document Outline에서 View Controller가 선택되어 있음을 확인한 뒤, 오른쪽 Inspector Bar에서 명함 모양의  Identity Inspector를 클릭하면 Custom Class에서 코드와 연결할 수 있습니다.

 

 

런타임에 스토리보드는 ViewController 클래스의 인스턴스를 만듭니다.

 

ViewController는 앞서 설명하였듯이 UIViewController를 서브 클래싱 한 custom view controller 클래스입니다.

 

하지만 씬이 view controller 클래스와 연결되었다고 해서, 앱 내 interaction이 바로 가능한 것이 아닙니다.

 

방금 전에 한 connection은 씬과 View Controller의 connection이었습니다.

 

추가적으로 씬 내부의 view 들과 view controller 간의 connection 이 필요합니다.

 

이것들은 outlets & actions로 불립니다.

---

 

Create Outlets for UI Elements

Outlet은 view 인스턴스의 참조를 View controller에 저장해 놓는 것입니다.

 

예를 들어, outlet에 UITextField 인스턴스의 참조를 저장해놓고 그 인스턴스 속성들을 특정 시점에 변경할 수 있습니다.

 

Outlet을 설정하는 방법은 정해져 있습니다.

 

가장 간단한 방법은 Storyboard와 Assistant Editor를 켜놓은 상태에서 ctrl 키를 누른 상태로 씬 내부의 view를 끌어서 View Controller 파일에 넣는 것입니다.

 

관련 글: Assistant Editor

 

UITextField를 View Controller에 넣는 상황이라고 가정했을 때, 이 동작을 하면 아래 사진과 같은 팝업이 뜨게 됩니다. 

Syntax

@IBOutlet weak var nameTextField: UITextField!

 

Outlet 연결은 @IBOutlet Attribute를 앞에 붙여 줍니다.

 

weak 키워드 덕분에, view 인스턴스의 레퍼런스 카운팅은 증가하지 않을 것입니다.

 

view의 메모리 해제 시 자동으로 nil로 초기화됩니다.

 

관련 글: Weak Reference

 

타입은 UITextField! 로서, IUO를 사용하였기 때문에 런타임에 view 인스턴스의 메모리 해제 후 접근 시 앱 크래시가 발생할 것입니다.

 

하지만 `nameTextField`의 Superview 가 `nameTextField`를 강한 참조 하고 있기 때문에, Superview가 메모리 해제되지 않는 한 그것의 Subview들이 메모리 해제되는 상황은 없을 것입니다.

 

추가적으로, 여기서 SuperView는 StackView임을 확인할 수 있습니다. SuperView는 또 VC의 Content view가 강한 참조 하고 있습니다!

(이것이 뷰 계층입니다!)

 

작위적인 상황에서, 해제 후 크래시가 발생하는 것은 직접 확인해 보았습니다.
관련 글: Optional Unwrapping

IUO에 nil 이 할당(메모리 해제) 된 후의 접근은 런타임 중 Fatal Error을 일으킨다.

 

접근 가능 시점

 

" viewDidLoad() 바디에서부터 "

 

스토리보드에서 VC가 로드될 때, 시스템은 뷰 계층을 인스턴스 화하고 적절한 값들을 VC의 outlet에 저장합니다.

 

이 메서드를 실행하는 시점에서 모든 outlet들은 초기화되어있습니다. 안전하게 접근할 수 있습니다.

 

Actions 및 이후 리뷰는 다음 글에 다루겠습니다!

 

 

 

끝!

---

 

다음 글:Review of Connect the UI to Code (2) - Food Tracker

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