[TIL] 카운터 예제 구현

오늘부터 앱개발 입문 주차가 시작되었다.
시작과 동시에 관련 강의가 업데이트되서 바로 수강하고
강의 마지막에 제공 되는 카운터 프로그램을 구현하는 과제를 했다.

위와 같은 화면을 구현하는 것이다.
그리고 구체적인 요구사항은 다음과 같다.

레이아웃 요구사항

• UILabel이 가운데 위치하게 해주세요
• UILabel을 기준으로 상단에는 감소 버튼, 아래에는 증가 버튼을 위치시켜 주세요
• UILabel과 UIButton사이의 간격은 16px로 설정해 주세요.
• AutoLayout을 사용해 주세요.

로직 요구사항

• count의 시작은 0으로 시작해 주세요
• 감소버튼을 눌렀을 때, -1씩 감소시켜 UILabel에 표시해 주세요
• 증가버튼을 눌렀을 때, +1씩 감소시켜 UILabel에 표시해 주세요

우선 코드작성 이전에 레이아웃부터 만들어 줬다
UIButton 1개와 UILabel2개를 화면에 추가해주고

UILabel은 가운데에 위치하도록 했으니 제약조건을 추가하여 가운데 위치하도록 했다

그리고 UIButton에도 제약 조건을 추가하여 화면 가운데 오면서
UILabel 위 아래에 16px만큼 띄어서 위치시켰다

버튼과 Label사이에 간격이 설정된것을 볼 수 있다.

이제 필요한 레이아웃을 추가했으니 코드를 작성해보자
우선 버튼과 레이블들을 @IBAction과 @IBOutlet으로 추가해준다.

@IBOutlet weak var countLabel: UILabel!

@IBAction func decreaseButtonTapped(_ sender: Any) {
    }
    
@IBAction func increaseButtonTapped(_ sender: Any) {
    
    }

그리고 증가, 감소한 숫자를 저장해 줄 변수 count를 작성해준다

var count: Int = 0

decreaseButtonTapped과 increaseButtonTapped버튼을 눌렀을 때 숫자를 증가, 감소시키는 코드를 작성해준다

@IBAction func decreaseButtonTapped(_ sender: Any) {
        count -= 1
        countLabel.text = String(count)
    }

그리고 증가, 감소된 count를 UILable에 반영하는 코드를 추가해준다
이것을 증가 버튼에도 추가한 후 전체 코드를 보면 아래와 같다.

class ViewController: UIViewController {
    var count: Int = 0

    @IBOutlet weak var countLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func decreaseButtonTapped(_ sender: Any) {
        count -= 1
        countLabel.text = String(count)
    }
    
    @IBAction func increaseButtonTapped(_ sender: Any) {
        count += 1
        countLabel.text = String(count)
    }
}

잘 작동하는지도 확인했다

---

이후 강사님의 예제 코드를 봤는데
변화된 count의 값을 countLabel즉 UILabel에 할당해주는 코드를 함수화 하여 적용하셨다
그리고 viewDidLoad()에도 그 함수를 추가하여 보다 확실하게 반영이 되도록 작성하셨다.
나는 버튼이 눌릴때마다 해당 값을 변경하는 것으로 했고 이는 전체적으로 길지 않은 간단한 코드여서 그렇게 한것같다

앞으로는 간단한 코드여도 강사님이 작성한 것 처럼 함수도 작성하고
앱의 생명주기를 좀 더 잘 이해할 수 있도록 해봐야겠다.