[Swift] iOS 앱 개발 준비하기 - (3) 아웃렛 변수와 액션 함수

이번 글에서는 아웃렛 변수(Outlet Variable)와 액션 함수 (Action Function)에 대해서 알아보도록 하겠습니다.

iOS 앱 개발에 앞서 가장 먼저 알아야 하는 개념이 바로 아웃렛 변수(Outlet Variable)와 액션 함수 (Action Function)입니다.

이 두 가지는 시각적인 디자인 영역인 스토리보드(Main.storyboard) 와 실제로 로직을 처리하는 코드 영역(ViewController.swift) 사이를 연결해주는 핵심적인 역할입니다. 

① 아웃렛 변수(Outlet Variable) ② 액션 함수(Action Function)

 

1. 아웃렛 변수 (Outlet Variable)

: 아웃렛 변수는 스토리보드에 추가한 버튼, 레이블, 텍스트 필드와 같은 UI 객체에 접근하여 내용을 변경하거나 속성을 제어할 수 있도록 코드 상에 선언하는 변수입니다.

ex) 텍스트 필드에 사용자가 이름을 입력하면, 입력한 텍스트를 받아 저장할 변수(= 아웃렛 변수)를 만들고 , 만든 변수와 텍스트 필드를 연결해야함.

 

코드 분석 및 구조

• 아웃렛 변수 만드는 방법
  : 객체 선택 후, ctrl + 마우스 드래그 (트랙패드에서는 두 손가락으로 드래그)
  
  
• 아웃렛 변수는 주로 뷰 컨트롤러 (View Controller) 의 클래스 선언문 바로 아래 상단부에 추가됩니다.

 

@IBOutlet var helloStr: UILabel!

•  @IBOutlet
  • IB : Interface Builder의 약자
  • @IB 로 시작되는 변수나 함수는 인터페이스 빌더와 관련된 변수나 함수라는 의미입니다.
  • @IBOutlet 는 객체를 소스 코드에서 참조하기 위해 사용하는 키워드로, 주로 색상, 크기, 모양, 텍스트 내용 등 객체의 속성을 제어하는데 사용됩니다.
• var helloStr
  • 변수 선언 시 var로 선언
  • 변수 이름 helloStr 입력하여 변수 선언
• UILabel!
  • 선언하고자 하는 변수의 타입을 나타냅니다.

 

• 메모리 관리(Storage : strong / weak)
  : 메모리 회수 정책을 나타내는 키워드로, 일반적으로 객체를 참조하기 위한 아웃렛 변수는 strong으로 선언합니다.
  
  • strong(기본값) : 변수가 다른 곳에서 참조되고 있을 경우 메모리에서 제거되지 않습니다. 아웃렛 변수는 일반적으로 strong으로 선언됩니다.
  • weak: 다른 곳에서 참조하고 있더라도 시스템이 임의적으로 메모리에서 제거할 수 있습니다. 순환 참조(Retain Cycle) 방지 등 특정 경우에 사용됩니다.

@IBOutlet var helloStr: UILabel!       // strong으로 선언
@IBOutlet weak var helloStr: UILabel!  // weak으로 선언

 

 

2. 액션 함수 (Action Function)

: 액션 함수는 사용자가 버튼을 클릭하거나, 스위치를 토글하는 등 특정 동작(이벤트)이 발생했을 때 실행할 로직을 정의하는 함수입니다.

ex) Send 버튼을 클릭 했을 때, 이름을 읽어서 레이블에 출력하는 함수

 

코드 분석 및 구조

• 액션 함수 만드는 방법
  : 객체 선택 후 보조 편집기 영역으로 드래그
• 액션 함수는 주로 클래스의 맨 마지막 부분에 추가합니다.

@IBAction func sendBtn(_ sender: UIButton) { 
    // 여기에 버튼 클릭 시 실행할 코드를 작성합니다.
}

 

• @IBAction
  • @IBOutlet과 마찬가지로 인터페이스 빌더와 관련된 키워드이며, 특정 이벤트 발생 시 호출될 함수임을 명시합니다.
• func sendBtn
  • 액션 함수의 이름입니다.
• (_ sender: UIButton):
  • 이 함수를 호출한 객체(Sender)를 나타내는 매개변수입니다.
  • 이 sender를 통해 여러 버튼이 하나의 함수에 연결되었을 때 어떤 버튼이 클릭되었는지 구분할 수 있습니다. 예를 들어 sender.tag를 사용하여 버튼을 식별할 수 있습니다.

 

 

View Controller 예시 코드는 다음과 같습니다.

아웃렛 변수와 액션 함수를 구조적으로 배치하면 코드 가독성이 매우 높아집니다. MARK 주석을 활용하여 섹션을 나누는 것도 가독성을 높이는 방법 중 하나입니다. 

import UIKit

class ViewController: UIViewController {
    
    // MARK: - 1. Properties (아웃렛 변수 영역)
    // 스토리보드의 UI 컴포넌트(UILabel, UITextField, UIImageView)와 연결됩니다.
    @IBOutlet var helloStr: UILabel!
    @IBOutlet var txtName: UITextField!
    @IBOutlet var image: UIImageView!
    
    
    // MARK: - 2. View Life Cycle (뷰 컨트롤러 생명 주기 함수)
    override func viewDidLoad() {
        super.viewDidLoad()
        // 뷰가 로드된 후 초기화 작업을 수행하는 곳입니다.
    }
    
    
    // MARK: - 3. Actions (액션 함수 영역)
    // 사용자의 동작(이벤트)에 반응하는 함수들을 정의합니다.
    @IBAction func sendBtn(_ sender: UIButton) { 
        // 예시: 텍스트 필드의 내용을 레이블에 출력하는 로직
        if let name = txtName.text, !name.isEmpty {
            helloStr.text = "안녕하세요, \(name)님!"
        } else {
            helloStr.text = "이름을 입력해주세요."
        }
        
    }
}

 

마지막으로, 아웃렛 변수 및 액션 함수를 추가하면 코드 왼쪽에 작은 원이 표시됩니다.

이 원 위에 커서를 올리면 연결된 컴포넌트가 표시되므로, 연결 상태를 시각적으로 빠르게 확인해 볼 수 있습니다.