[Swift] tag 활용하여 코드 간소화하기

---

앱을 만들다보면,
여러 개의 버튼이 같은 기능을 하는 화면을 만들어야하는 경우가 있을 겁니다.

0

위 화면처럼 말이죠!

처음에 이 앱을 만들 때, '노가다가 따로 없구나.' 생각했습니다.

9개의 버튼을 모두 하나하나 Outlet 연결을 하고,
버튼이 클릭됐을 때, 어떤 기능을 해야하는지 9개의 Action을 연결했거든요!

이렇게 하다보니, 같은 코드가 여러 번 적혀있으니 코드도 엄청 길어졌습니다.😅
 
이런 부분들을 간소화할 수 있는 방법을 하나 정리해보려고 합니다!

---

바로! tag를 활용하는 방법입니다.

스토리보드에서 요소들을 클릭해서 우측 인스펙터 영역을 살펴보면,

이렇게 Tag가 있는 것을 확인할 수 있습니다.

만약 버튼 3개를 만들었다고 가정한다면,

바로 이 tag를 활용해서 어떤 버튼을 눌렀는지  확인할 수 있습니다.


위에 예시처럼 9개의 버튼은 아니지만,
비슷하게 Button 3개와 Label 3개를 만들어 봅시다.
(button1, button2, button3 / Label1, Label2, Label3)

그리고 버튼 타이틀도 넣어주겠습니다.
(버튼1, 버튼2, 버튼3)


그리고 모두 Outlet 연결을 해줍니다.


그런 다음 Button의 Action을 연결해줄건데,
3개의 Button을 하나하나 연결하지 않고, 하나만 연결해줍니다.

그리고 이렇게 왼쪽 코드 영역에서 좌측 +부분을 drag해서
2번째 버튼, 3번째 버튼 순서대로 연결해줍니다.

이렇게 하면 하고, print("클릭됨")을 찍고,
실행해서 버튼 3개를 각각 클릭해보면

모두 클릭이 되는 것을 확인할 수 있을겁니다.

---

다음으로 스토리보드로 가서
각각의 버튼에 tag 번호를 부여해줍니다.
(button1: 0 / button2: 1 / button3: 2)

IBAction으로 연결한 부분을 잘 보면, 매개변수 부분에 (_ Sender: UIButton)라고 있습니다.
앞 게시글에서 정리했듯!
_는 와일드카드식별자, sender는 내부 매개변수(Parameter Name) 입니다.

이 함수 내부에서 sender라는 매개변수를 사용할 수 있는거죠!


뭔지 모를땐 그냥 print 찍어봅시다.
print(sender)를 해볼까요?

sender를 print 찍어놓고, button1을 눌러봤습니다.
뭐가 잔뜩 나와있는데, 버튼1에 대한 정보들이 담아있는 것 같습니다.


근데, 타이틀에 대한 정보를 알고 싶은 경우
너무 많아서 어떤게 타이틀인지 알 수 없잖아요?


여기서 'currentTitle'이라는 것을 사용해볼겁니다.

@IBAction func button1Clicked(_ sender: UIButton) {
        
 	print(sender.currentTitle) 
    
}

이렇게 작성한 다음 실행해서 각각의 버튼을 클릭해보면,

옵셔널이지만, 각 버튼에 지어준 title에 맞게  다르게 찍히는 것을 확인할 수 있습니다.

타이틀 말고도

이렇게 다양한 정보를 따로 가져올 수 있습니다.☺️


이 currentTitle를 활용해서 조건문을 넣어보면!

        if sender.currentTitle! == "버튼1" {
            oneCount += 1
            label1.text = "\(oneCount)번"
        } else if sender.currentTitle! == "버튼2" {
            twoCount += 1
            label2.text = "\(twoCount)번"
        } else {
            if sender.currentTitle! == "버튼3" {
                threeCount += 1
                label3.text = "\(threeCount)번"
            }
        }

이런 조건문을 넣으면,
버튼 1을 클릭했을 때, Label1이
버튼 2을 클릭했을 때, Label2이
버튼 3을 클릭했을 때, Label3이 
하나씩 증가할겁니다.

---

이번에는 위에서 언급했던 tag를 쳐보겠습니다.

print(sender.tag)

버튼1, 2, 3 을 순서대로 눌러봤더니

앞서 스토리보드에서 설정해뒀던 tag번호가 찍히는 것을 확인할 수 있습니다.

이 tag를 활용하면, 감정 버튼을 클릭했을 때 숫자가 하나씩 증가하는 코드를 간소화할 수 있습니다.

    if sender.tag == 0 {
            count[0] = count[0] + 1
        } else if sender.tag == 1 {
            count[1] = count[1] + 1
        } else {
            count[2] = count[2] + 1
        }

이렇게 tag도 활용할 수 있을겁니다!!

그리고 이것도 길다면??

        if sender.tag == 0 {
            count[sender.tag] = count[sender.tag] + 1
        } else if sender.tag == 1 {
            count[sender.tag] = count[sender.tag] + 1
        } else {
            count[2] = count[2] + 1
        }

이런식으로 sender.tag로 채우다보면...

count[sender.tag] = count[sender.tag] + 1

이렇게까지도 줄일 수 있습니다!!

더 줄인다면..

count[sender.tag] += 1

 

앞에 if문을 활용했던 것과 비교하면, 상당히 코드가 줄어든 것을 확인할 수 있습니다.

---

이와 같은 방법으로 아울렛 코드도 줄일 수 있습니다.

바로 Outlet Collecion을 활용하는 방법입니다!

Label을 연결할 때, 커넨션 부분에서 내려보면 'Outlet Collection'이 있습니다.

이걸로 연결한 다음!

코드에서 좌측 +를 drag해서 나머지 label과도 연결해주면 됩니다.

        label1.text = "\(count[0])번 클릭"
        label2.text = "\(count[1])번 클릭"
        label3.text = "\(count[2])번 클릭"

그러면! 원래는 위와 같이 적어주어야하는 부분을

labelList[sender.tag].text = "\(count[sender.tag])번"

이렇게 sender.tag를 활용해서 코드를 줄여볼 수 있습니다.☺️

---