SnapKit

7과11사이·2023년 9월 26일

스파르타코딩클럽

목록 보기

67/90

이전 프로젝트를 하다보면 snapkit를 사용해서 제약을 거는 분들을 많이 만나 뵀다.
개인적으로 autolayout은 어떤 원리로 작동을 하는지,
원하는대로 UIComponent가 바로바로 적용되지 않은 모습들을 바라보며 autoLayout 관련해서 공부를 더 해야겠다는 다짐을 하게됐다.

그 와중에 처음 사용해본 SnapKit에서 배우게 된 점들이 있어 남겨본다.

SnapKit이란?

https://github.com/SnapKit/SnapKit

SnapKit는 오토레이아웃을 줄이기 위해 사용하는 서드 파티 라이브러리다.
개발자들이 반응형 UI를 더 쉽게 만들 수 있도록 사용한다고 하는데,
기존 Autolayout 방식보다 간략한 Syntax로 코드 가독성과 효율을 높인다고 한다!

SnapKit 사용 이유

위에 설명한 대로 코드의 가독성이 주요 이유가 되는데, 개인적으로 autolayout만 사용하다보니 공감하지 못했었다. 이번 팀 프로젝트를 하면서 snapKit을 본격적으로 써보기 시작했는데 정말 코드 가독성이 좋아지는 걸 느꼈다!

몇가지 예를 들자면 아래 이미지를 구성하는데 사용한 코드의 일부분이다.

[gridStack, photoCollectionView].forEach{view.addSubview($0)}
NSLayoutConstraint.activate([
	gridStack.topAnchor.constraint(equalTo: buttonStack.bottomAnchor, constant: 10),
    gridStack.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    gridStack.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    photoCollectionView.topAnchor.constraint(equalTo: gridStack.bottomAnchor),
    photoCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    photoCollectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    photoCollectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
])

gridStack과 photoCollectionView 2개에 제약을 걸어두었는데
gridStack의 leading, trailing을 view에 - top을 buttonStack 밑에 걸어둬서 Follow, message 버튼 밑에서부터 시작될 수 있도록 했다.

이후 photoCollectionView는 gridStack의 bottom을 기준으로 top을 걸어두고 leading, trailing, bottom을 모두 view의 영역으로 잡아두었다.

복잡해보이지만 결국 2개의 UIComponent를 거는데 8줄 작성이 되어야 한다는 점!

이를 SnapKit으로 사용하게 되면 아래처럼 변하는데,

[gridStack, photoCollectionView].forEach{view.addSubview($0)}

gridStack.snp.makeConstraint { make in
	make.top.equalTo(buttonStack.snp.bottom).offset(10)
    make.leading,trailing.equalToSuperview()
}

photoCollectionView.snp.makeConstraint { make in
	make.top.equalTo(gridStack.snp.bottom)
    make.leading.trailing.bottom.equalToSuperview()
}