[Swift-TIL] View와 ViewController

View와 ViewController

이 두개에 대해서 알아보겠다.

이전 스토리보드와 UIKit에 대한 글과

약간 이어지는 글이다.

https://stayjun.tistory.com/250

View는 화면이다.

지난번에 view.backgroundColor = .blue

이렇게 했을 때 배경이 파란색으로 바뀌었었다.

이렇게 말이다.

이건 내가 가지고 있는 화면을

뷰에 담았기 때문에 뷰는

화면이라고 생각하면 된다.

 

이해하는데는

크게 어려움을 느끼진 않았다.

 

애시당초 View 라는 영어 단어를

한국어로 번역하면 화면이다.

 

"여기에 꾸미면 그대로 그려진다."

라고 알고 가면 된다.

 

그러면 Controller

이 컨트롤러는 뭐지?

 

흔히 사람들이 아는 컨트롤러 하면

리모컨트롤러? 게임컨트롤러?

이걸 예로 들어보겠다.

이건 게임 컨트롤러다.

 

여기서 방향키를

누르면 어떻게 되는가?

 

이 조이스틱이 왼쪽으로 움직이나?

 

아니다.

 

이 컨트롤러는 커트롤 하는 대상이

반드시 있어야 하는거다.

 

그래서 컨트롤러를 잘 들여다보면

조작방법과 키설정 등등

이런것들이 있을 꺼다.

 

뭐.. A 버튼을 누르면 어떻게된다,

이렇게 하면 어떻게 된다.

 

무엇인가 대상이

어떻게 된다라고 설명이

항상 되어 있다.

 

Controller는 말 그대로

설명서이다.

그러면 View + Controller는

꾸미면 그려지는 화면 컨트롤러다.

 

이 개념을 단단하게 가지고 있어야한다.

 

View는 화면이고

View를 조종하는 녀석은 Controller다.

 

View를 조종하는 것

대표적으로는 버튼클릭이 있다.

 

View에 단순하게 버튼만 띄워놓고

눌러봐도 당연히 아무 변화는 없을 꺼다.

 

Controller를 만져줘야지 변화가 생기는거다.

---

ViewController가 있는데

얘는 클래스다.

이름이 ViewController 이다.

이름이기 때문에 얘 이름을

이렇게 지어도 상관은 없다.

여기가 뭐가 되었던

그냥 부르는 이름이기 때문에

이름이 ViewController 라고 해서

뷰 컨트롤러가 되는건 아니다.

 

즉, UIViewController 이걸 상속 받아야만

뷰 컨트롤러가 되는 것이다.

UIViewController를 자세히 보면

UIResponder, NSCoding, UIAppearanceContainer, 

UITraitEnvironment, UIContentContainer, 

UIFocusEnvironment

너무 많다.. 

 

더 알아보기 위해

커맨드 클릭을 해보면,

뭔가 많다...

뭐.. 그만큼 상속을 많이 받아 놓은건데

보다 보면

클래스에 생성자가 있다.

바로 밑에도 view가 있는데,

view는 UIView라고 되어 있다.

UIView에는 뭐...

이런것들이 있다...

뭐가 많이 구현이 되어 있다.

 

다시 UIViewController를 보면

메소드들도 구현이

되어 있는걸 볼 수있다.

 

전부 다 해보진 않겠지만,

저번 마지막에 당황했던 문제에 대해

해결을 해보고자 한다.

 

우선.. 지난번에 배경색을

Main.스토리보드 파일에서

분명 민트색상으로 바꿔놨는데,

코드를 사용해서 파랑색으로 정의를 해보니

파란색이 들어가버렸다.

 

이게 왜 그런가 일단 찾아봤다.

UIViewController안에서

UIView 안에서 찾았다.

이게 현재 extension으로

UIView가 정의가 되어 있다.

ViewController 파일에서

배경색을 줬다.

 

그러면 .green 의

타입은 어떻게 되는가?

UIColor 타입이다.

 

Color와 UIColor는 같은 타입인가?

 

아니다.

int와 plot 같지 않고

Color와 UIColor도 같지 않는다.

즉, view.backgroundColor

얘도 UIColor 이고

이런 미묘하게 스위프트UI와

다른 것들도 잘 눈여겨보면

나중에 삽질하는 시간을 줄일 수 있다.

 

모든것에 의문점을 가지면 된다.

viewDidLoad

"뷰를 다 로딩 됐다" 라고

호출이 된다.

즉, 스토리보드에 있는 거

다 그렸다 라고 하고

호출이 되는거다.

 

그 다음에 뷰색상을 바꿔달라고

하는건데, 쉽게말해서

다 그리고 나서 색깔을

바꿔버린거다.

정말 간단하게 이해가 되었다.

이렇게 그려놓고

viewDidLoad 한거다.

그리고 나서 색상을 바꿔버린거다.

어느정도 감이 온다.

뷰를 처음에 그릴 때는

스토리보드로 그냥 그리고

이러한 뷰를 조종 할때에는

뷰 컨트롤러를 통해서

뷰를 조종할꺼라는 뜻이다.

 

그러면 이제 새로운 세상을 만끽해보자.

옵션키를 누른뒤 파일을 선택해줄꺼다.

이런식으로 화면이 반반 나뉜다.

음 지금 보니 버튼이 없는데,

버튼을 만들어주겠다.

이렇게 클릭 버튼을 만들어주고

연결을 해주겠다.

컨트롤을 누른 상태로

쭉 당겨서 놔준거다.

 

Outlet 어떤 한 요소이고,

오브젝트는 뷰 컨트롤러에 있는 것이고,

Name 음.. 그냥 myButton이라고 지어보겠다.

이렇게 되었다.

다른 레이블도 연결해보겠다.

이렇게 @IBOutlet 이 생겼다.

버튼을 한번더 드래그앤 드랍 해보겠다.

이번엔 액션이 되었다.

Outlet도 넣을 수 있고

액션도 넣을 수 있다.

이렇게 만들고 넣어보겠다.

뭔가... 함수가 생겼는데..

@IBAction 이게 뭔지는 알아보면 된다.

일단은 함수를 하나 정의 해보겠다.

이렇게 하고 한번 시뮬레이터에서

실행을 한번 해보겠다.

잘 된다.

이 버튼이 할 수 있는 액션은

클릭이다.

 

다시한번 보면

이벤트를 잘 보면

Touch Up Inside

누르면 Touch Up

손 때면 Inside

 

즉, 위에서 정의한 것은

액션을 정의했고,

이벤트는 Touch Up Inside

버튼이 할 수 있는 액션의 종류이다.

 

그래서 버튼을 누르고

그 안에서 손을 때면 나오고

버튼을 누르고 바깥에서 손을 때면

나오지 않는다.

 

되게 미묘한 느낌인데,

그냥 함수를 정의해준것 같은데,

버튼을 통해 함수가 호출이 된다.

 

즉, 내가 정의한 Touch Up Inside 액션

인스펙터에서도 확인할 수 있다.

이 버튼에서 할 수 있는것들은

이만큼이나 있는데,

Touch Up Inside가 발생했을 때

얘를 실행하기로 약속 헀다.

이걸 끊으면 아무일도

일어나지 않는다.

 

그러면 이제 뷰를 바꿔보겠다.

이건 스토리보드 라는 텍스트는 현재

myLabel 이라는 변수로 정의 및 연결이 되어있다.

버튼 액션에서 텍스트를 줘봤다.

이제 시뮬레이터에서

어떤 결과가 나와야 하는가?

 

"Hi, my name is Noel"

이 문자열이 myLabel의 텍스트에

들어갈 예정이다.

바뀌긴하는데,

레이블의 크기만 조정하면

딱 맞는다.

 

조금 어색할 수 있는데,

UIKit은 이런식으로 동작한다고

정리해볼 수 있겠다.