SnapKit 시작하기

안녕하세요.
오늘은 스냅킷을 사용하는 방법을 한 번 알아보겠습니다.

스냅킷 GITHUB에 들어가시면 아래처럼 설명되어 있습니다.

SnapKit은 iOS 및 OS X에서 Auto Layout을 쉽게 하기 위한 DSL(Domain-specific Language)입니다.

DSL이란 생소한 개념이 등장합니다.
DSL은 특정 범주를 타겟하고 있는 언어를 가리킨다고 생각하시면 됩니다.
반대 개념은 GPL(General Purpose Language)가 있습니다.

자 그럼 시작해보도록하겠습니다.
먼저 프로젝트를 생성 후 아래 항목에 들어가서 SnapKit을 추가해줍니다.

File -> Swift Packages -> Add Package Dependency

이제 정말로 모든 준비가 끝났습니다. 시작하겠습니다.

먼저 ViewController.swift 상단에 아래와 같이 작성해줍니다.

import SnapKit

그 뒤에 viewDidLoad에서 작성해보겠습니다.
일단 100*100 크기의 빨간색 뷰를 만들어보겠습니다.
스냅킷으로 작성하기 이전 코드를 비교해보기 위해 Anchor로 작성해보겠습니다.

let redView = UIView()
redView.backgroundColor = .systemRed
self.view.addSubview(redView)
redView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    redView.centerXAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerXAnchor),
    redView.centerYAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerYAnchor),
    redView.widthAnchor.constraint(equalToConstant: 100),
    redView.heightAnchor.constraint(equalTo: redView.widthAnchor)
])

이렇게 작성하면 Anchor로 100 * 100 크기의 빨간색 뷰를 만들 수 있습니다.
크게 어렵지 않습니다.
이번엔 스냅킷으로 한 번 작성해보겠습니다.
위에 생성 부분은 동일하니 밑에 레이아웃 부분만 보겠습니다.

redView.snp.makeConstraints {
    $0.centerX.centerY.equalTo(self.view.safeAreaLayoutGuide)
    $0.width.height.equalTo(100)
}

일단 코드가 조금 깔끔해지면서 읽기 쉬워진 것 같지만
이렇게 간단한 화면에선 크게 체감이 되지 않습니다.

물론 화면이 더 복잡해지면 그 조금은 엄청난 차이를 야기할 것 같지만 아직은 와닿지 않습니다.

다음 시간에 조금 더 복잡한 화면으로 조금 더 디테일하게 알아보겠습니다.