Why SnapKit ?
보통 UI 작업 할때에 스토리보드 or 코드 베이스 둘중 한가지 방법을 사용해서 하게 되잖아요!
저희는 코드 를 통해 UI 작업을 하는 방법에 대해서 알아보도록 할게요!
가장 먼저 드는 첫번째 의문!
왜 Storyboard 를 두고 코드로 AutoLayout을 설정하지?
스토리 보드 쓰면 훨씬 직관적이고 편하잖아.
확실히 스토리 보드를 이용하면 직관적이고 편하긴 합니다.
코드로 UI 작업을 하게되면 코드 라인수가 어마어마하게 늘어나게 되어있어요. 게다가 스토리 보드를 사용할 때 처럼 화면이 잘 구성되고 있는지 확인하기도 어려운 부분이 있죠!
하지만!
다른 iOS 개발자와 함께 협업을 할 때에 스토리보드에서 Conflict 가 발생하게 되면 어느 부분인지 찾아내기가 쉽지 않아요. 하지만 UI 작업을 코드 베이스로 진행했다면 문제되는 부분을 쉽게 찾을 수 있겠죠?
결국에는, 개발과정에서의 편의성 보다는 유지보수의 편의성 때문에 코드로 UI작업 을 한다고 생각하시면 될 것 같아요!
그럼 SnapKit을 사용하면 어떤점이 좋을까?
바로 이전에 유지보수의 편의성 때문에 코드로 UI 작업을 한다고 말씀드렸잖아요?
하지만 코드로 작업을 하게되면 작성해야하는 코드의 양이 무진장 많아서 가독성이 떨어진다고 말씀드렸었죠?
바로 !! 이런 단점을 보완해주기 위해서 나온 라이브러리가
SnapKit이라는 라이브러리 입니다.
더 이해하기 쉽게 눈으로 확인해볼게요.
뷰를 topView, bottomView 로 나누고, topView 는 스토리보드로, bottomView 는 코드 로 Constraint 설정 을 해봤어요!
위의 사진을 본 것 처럼 한눈에 봐도 코드의 길이가 훨!씬! 길다는걸 알 수 있어요.
컴포넌트마다 복잡한 제약을 설정해줘야 하는 경우 도 있는데, 그럴 경우에는 위의 경우보다 훨씬 길어지고 가독성이 떨어지겠죠?
이것 말고도 상황에 따라 제약을 변경하는 등, 여러 경우에 맞춰 대응하기 더 쉽게 도와주기도 한답니다.
그렇기 때문에! SnapKit 을 활용해서 좀 더 코드의 가독성을 높이는 방법을 많이들 이용한다고 해요.
Then 에 대해서 설명하기로 했는데 SnapKit 얘기만 하고있죠!
그렇다면 Then 은 언제 쓰는건데?
아까 말씀 드렸죠? UI 작업은 스토리보드 혹은 코드로 가능하다고 !
스토리보트로 작업을 했다면 UI 컴포넌트들의 속성을 Attribute Inspector 에서 간단히 설정해줄 수 있었지만, 코드로 작업을 하게 된다면 컴포넌트의 속성들을 정의해주어야 해요.
바로 이렇게요!
위의 코드가 보이시나요?
UIButton 을 생성하고, 그에 대한 속성을 설정해주는 코드에요.
여기서 조금 문제아닌 문제가 될만한 부분은, 이렇게 UI 를 생성하고 그에 대한 속성을 정의하는 부분이 분리 되어있다는 부분이에요.
만약, 화면에 존재하는 UI 컴포넌트들이 많아지게되면 어떻게 되는지 보여드릴게요
버튼이 고작 2개 더 추가되었을 뿐인데 코드가 굉장히 길어졌죠?
실제 화면을 구성하게 된다면 훨씬 많은 컴포넌트들이 추가될거고, 그에 대한 속성들을 정의해주는 코드들을 작성을 하게 될거에요.
이렇게 UI 생성 부분 , 그에 대한 속성을 정의하는 부분 이 분리되어있으면, 이 UI 가 어떤 속성을 가지고 있는지 한눈에 보기 힘들죠.
(가독성이 떨어진다고 표현할 수 있겠네요!)
이렇게 가독성이 떨어지는 문제를 해결해주기 위해서 만들어진게 Then 이에요!
일단, 위 코드와 같은 방식에서 조금 더 개선된 방식을 보여드릴게요.
어떤가요? 바로 앞의 코드와 비교해보자면, 달라진 부분은 생성 과 동시에 그 속성에 대한 정의 를 해줌으로서 이 UI 컴포넌트가 어떤 속성을 가지고 있는지 한눈에 알아볼 수 있어요!
여기서 더 나아간 방법이 바로!
Then이랍니다.
이전 방식과 비교해보면 가독성 이 훨씬 뛰어나다는 말이죠!
결과적으로 보면
이런 식으로 코드가 수정될 수 있겠네요.
이제 Then 에 대해 더 자세히 알아볼까요!
Then 에는 몇가지 기능이 있어요.
앞에서 봤었던 then() 과 , with(), do() 와 같은 기능이 있어요.
자세한 내용은 Then - Git 에 들어가서 확인해보면 될 것 같고, 기능에 대해 살짝 알아볼게요.
then()
with()
Use with() when copying the value types.
- 값 타입 프로퍼티를 새로운 프로퍼티에 카피할 수 있습니당.
do()
Use do() to do something with less typing.
- 더 적은 타이핑으로 작업을 수행할 수 있습니다.
번외로,
사용자 지정 타입에도 적용이 가능합니다.
