[Udemy/iOS] @IBOutlet, @IBAction 실습해 보자고

유데미에서 강좌중에 주사위 앱을 만드는 강의가 있다.

위와 같은 앱인데 굉장히 단순한 구조다.
"Roll"버튼을 누르면 주사위 2개의 눈이 랜덤하게 바뀌는 앱이다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!
    
    @IBAction func rollButtonPressed(_ sender: UIButton) {
        
        let diceArray = [ #imageLiteral(resourceName: "DiceOne"), #imageLiteral(resourceName: "DiceTwo"), #imageLiteral(resourceName: "DiceThree"), #imageLiteral(resourceName: "DiceFour"), #imageLiteral(resourceName: "DiceFive"), #imageLiteral(resourceName: "DiceSix") ]
        
        diceImageView1.image = diceArray.randomElement()
        diceImageView2.image = diceArray.randomElement()
    }
}

전체 코드도 이정도로 간단하다.

우리가 여기서 공부할 점은 "Roll"버튼을 눌렀을 때 주사위의 눈을 어떻게 바꾸는지이다.

제목에도 써놨지만 Swift에서는 IBOutlet과 IBAction을 통해서 구현할 수 있다. 아래에서 조금 더 자세하게 살펴보자.

1. @IBOutlet

우선 생성하는 법부터 알아보자
@IBOutlet을 생성하고자 하는 개체를 선택한 뒤에 control을 누르고 추가하고자 하는 코드에서 마우스를 떼면 된다.
그럼 아래와 같이 옵션창이 하나 뜰것이다.

Connection창이 Outlet으로 되어있는걸 확인 후에 이름을 지정해주고 Connect를 누르면 추가된다.

위의 예제에서는 아래와 같은 코드가 추가된다.

@IBOutlet weak var diceImageView1: UIImageView!

diceImageView1을 생성했음을 알 수 있다.

그래서 이게 무슨 역할을 하는지 내가 이해한 것을 최대한 간략하게 얘기해보자면 UI요소에 접근해서 값을 변경할 수 있도록 해준다.
강좌에서도 일단은 그정도로 설명을 하고 있다.

예를 들어 diceImageView1의 값을 변경한다고 치면 아래와 같은 코드가 사용된다.

diceImageView1.image = diceArray.randomElement()

여기서 간단한 규칙이 하나 있는데 Who.What = 변경값 으로 이해하면 편하다.
diceImageView1의 image를 diceArray배열의 랜덤값으로 변경한다 라고 이해할 수 있다.

@IBOutlet이 값을 변경할 수 있다면 변경하기 위한 트리거를 작동하는게 @IBAction이다.

2. @IBAction

@IBAction의 생성법은 @IBOutlet과 같다.
Connection에서 outlet을 action으로 변경하면 된다.

@IBOutlet이 요소의 값에 접근하는 것이라면 @IBAction은 특정요소의 액션을 코드에 전달해주는 것이다.

예를 들어, 버튼을 누른다던지 드래그를 한다던지의 액션을 전달해준다.

@IBAction func rollButtonPressed(_ sender: UIButton) {
        
        let diceArray = [ #imageLiteral(resourceName: "DiceOne"), #imageLiteral(resourceName: "DiceTwo"), #imageLiteral(resourceName: "DiceThree"), #imageLiteral(resourceName: "DiceFour"), #imageLiteral(resourceName: "DiceFive"), #imageLiteral(resourceName: "DiceSix") ]
        
        diceImageView1.image = diceArray.randomElement()
        diceImageView2.image = diceArray.randomElement()
    }

위의 코드는 roll버튼을 눌렀을 때 {}안의 코드를 작동하는 구문이다.

간단하게 정리를 해보자면 @IBOutlet은 코드의 값을 뷰에 전달해주고
@IBAction은 뷰의 동작을 코드에 전달해준다고 볼 수 있다.

간단한 예제를 통해 @IBOutlet과 @IBAction의 동작에 대해서 알아보았다.
다음에 더 공부한뒤에 추가적인 내용을 따로 포스팅 해보겠습니다.