[14일차] [명언 생성기 앱] IBOutlet & IBAction

오 이제 뭔가 앱 개발 공부러의 모니터 화면처럼 보인다...!

오늘은 ViewController 내부 UI 컴포넌트를 코드로 조작할 수 있도록 하는 IBOutlet과 IBAction에 대해 알아보도록하자.

일단 좌측 상단에서 View Controller Scene을 선택하고, 우측 상단에서 Assistant를 선택해보자.

그러면 Main ViewController와 연결된 Swift 코드를 볼 수 있다!

그리고 나중에 추가적으로 View Controller Scene과 특정 ViewController 클래스를 연결하고 싶으면, Inspector의 4번째 탭 메뉴를 확인해서 지정할 수 있다.

 

자, 그럼 우리가 구성한 UI와 ViewController 클래스에 대한 코드 에디터 화면도 띄웠으니까 본격적으로 IBOutlet과 IBAction에 대해 알아보자.

IBOutlet?

IBOutlet은 쉽게 말하면 UI 컴포넌트를 코드로 조작할 수 있도록 해당 컴포넌트와 바인딩되어 그 컴포넌트의 UI 설정값을 담는 변수이다.

만드는 방법은 생각보다 직관적인데, Xcode의 UI 화면 상에서 특정 컴포넌트를 선택하고, 우클릭하여 코드 에디터 상의 ViewController 클래스로 드래그해주면 된다. 그럼 파란색 직선이 주욱~하고 길게 늘어나서 우리가 Outlet 변수를 어느 클래스에 선언할 지 표시해준다.

그러면 Outlet변수의 이름, 타입 등을 설정하는 작은 설정창이 나오는데, 해당 설정값들에 대해 간략히 설명하자면

• Type : 조작하고자하는 UI 컴포넌트의 타입이다.
• Storage : Outlet 변수 할당 해제 시 메모리 회수 정책에 관한 설정값으로, Strong으로 설정 시 다른 곳에서 해당 Outlet 변수를 참조하고 있을 때 메모리 회수가 되지 않지만, Weak으로 설정 시엔 가능하다.

일단 이름만 colorView로 설정하고 변수를 연결해보면, 다음과 같이 코드 상에 해당 UI 컴포넌트와 바인딩 된 변수가 생성된다.

다음으로는 ViewController 상에 만들어둔 또 다른 컴포넌트인 UIButton, 색상 변경 버튼에 IBAction 함수를 바인딩 해보자!

IBAction?

이 친구도 IBOutlet과 맥락은 동일하다. 해당 UI 컴포넌트에 Event가 발생했을 때, 특정 기능을 실행하도록 함수를 정의해서 연결할 수 있다. 그 함수가 IBAction 함수이다!

 

같은 방식으로 버튼에 IBAction 함수를 연결해보자. 일단 Connection의 기본값이 Outlet이어서 그걸 Action으로 변경해줘야한다.

그럼 Outlet일 때는 보이지 않았던 설정값들이 보이는데, 또 간략하게 설명해보겠다.

• Event : 해당 UI 컴포넌트에 발생할 Event를 지정할 수 있다. Event가 Action함수 호출의 트리거가 되는 것!
• Argument : UI 컴포넌트로 리턴값을 보낼 것인지, 보내지 않을 것인지, 혹은 보내고 Event까지 발생시킬 것인지를 지정한다.
  (객체 이벤트 핸들러 관련 설정값인듯?)

각각 Touch Up Insde, Sener로 설정하고 다음과 같이 함수를 작성해보자.

 

그리고 Build 버튼을 눌러서 앱을 Build하고 Simulator를 통해 앱을 확인해보면...

이런 화면을 볼 수 있다!

색상 변경 버튼을 누르면 UIView의 색상이 파랑색으로 변하고, 콘솔창에도 기존에 작성해둔 메시지가 잘 출력되는 것을 확인할 수 있다!

 

 

 

패스트캠퍼스 바로가기 : http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

> 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.