[iOS] 코드로 UI 구성하기 - Then 라이브러리 do 메서드 이용

요새 다시 코드 베이스로 UI를 짜고, 프로그래밍을 하고 있다. 솝트 세미나 할 때 스토리보드를 너무 많이 봤는지 잠시 멀리 할 때가 된 것 같다는 생각을 스스로 했다... 충분히 많이 봤어...👋 사실 코드 베이스로 UI를 짤 때 항상 고민을 했던 부분은 코드가 너무 길어지고 가독성이 좋지 않다는 것이었다.

 

새싹 과제인 Diary 앱을 만들면서 문득 또 생각이 들어서 스타일을 좀 바꾸려고 시도해보았다.

 

---

 

Then (Syntax Sugar Library)를 사용한다는 가정 하에 UI 짜는 스타일을 한 번 살펴보자.

 

---

 

1. 인스턴스 생성 시에 클로저로 속성까지 지정해주는 방법

UI 객체가 몇 개 없다면 오히려 깔끔하고 가독성도 좋은 것 같다.

let blackView = UIView().then {
    $0.backgroundColor = .black
}

let nameLabel = UILabel().then {
    $0.text = "text"
    $0.textColor = .blue
    $0.backgroundColor = .red
}

override func viewDidLoad() {
    super.viewDidLoad()
	
    configureLayout()
}

private func configureLayout() {
    [blackView, nameLabel].forEach {
        view.addSubview($0)
    }

    blackView.snp.makeConstraints {
        $0.width.height.equalTo(200)
        $0.top.equalTo(view.safeAreaLayoutGuide)
        $0.centerX.equalTo(view)
    }

    nameLabel.snp.makeConstraints {
        $0.edges.equalTo(blackView).inset(50)
    }
}

 

 

2. 속성을 메서드에서 직접 해주는 방법

속성을 객체 별로 메서드를 나누어 지정하는 방법(- 네이밍 하는 것도 머리 아프다 -)도 있고, 예시에는 configureAttributes 메서드 안에 속성 설정하는 코드를 전부 때려박았다. 벌써 별로인 것 같다. 속성 구분도 안 되고 가독성이 별로 좋지 않다. (UI 요소가 더 많아지는 상황을 생각해보자.)

let blackView = UIView()
let nameLabel = UILabel()

override func viewDidLoad() {
    super.viewDidLoad()
    
    configureAttributes()
    configureLayout()
}

private func configureAttributes() {
	
    blackView.backgroundColor = .red
    nameLabel.text = "text"
    nameLabel.textColor = .blue
    nameLabel.backgroundColor = .red
}

private func configureLayout() {
    [blackView, nameLabel].forEach {
        view.addSubview($0)
    }

    blackView.snp.makeConstraints {
        $0.width.height.equalTo(200)
        $0.top.equalTo(view.safeAreaLayoutGuide)
        $0.centerX.equalTo(view)
    }

    nameLabel.snp.makeConstraints {
        $0.edges.equalTo(blackView).inset(50)
    }
}

 

---

 

위에서 살펴본 두 가지의 스타일은 어떠한가? 사실 어떤 방법을 사용할 것인지는 취향 차이인 것 같다. 많은 레포지터리를 살펴보면 전자를 많이 사용하는 것 같은데 UI 인스턴스 수가 조금이라도 많아지면 상당히 가독성이 별로라고 느껴진다. (개인적인 생각) - RootView만 뜯어서 따로 UI를 구성하는 방식을 적용한다고 하더라도 같은 문제점은 그대로 있다. 나는 UI 인스턴스가 쭉 가지런했으면 좋겠어서 후자의 방법에 Then 라이브러리의 do 메서드를 이용해보기로 했다. (맨날 Then 메서드만 쓰다보니까 다른 메서드가 있는지도 몰랐다.)

 

---

다음과 같은 레이아웃을 구성한다고 가정하고 보도록 하자.

 

---

 

Then 라이브러리의 do 메서드 이용

UI 프로퍼티의 인스턴스를 만들 때 속성까지 한 번에 지정해줬었는데 코드가 좀 지저분해지고, UI 요소만 분리시켜서 보고 싶다는 생각이 계속 들었었다. 그렇다고 속성을 하나의 메서드 안에서 쭉 적어주자니 그것도 가독성이 좋지 않았다. Then 라이브러리의 do 메서드 이용해보기로 했다.

 

이렇게 작성하고 나니 후자(속성을 메서드에서 직접 해주는 방법)의 문제점이었던 가독성이 안 좋다는 것이 좀 해결된 듯 하다. 그리고 원했던 것처럼 UI 인스턴스를 가지런히 볼 수 있게 되었다.

final class PhotoSearchView: BaseView {
    
    lazy var searchBar = UISearchBar()
    lazy var collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewLayout())
    
    override func configureAttributes() {
        
        searchBar.do {
            $0.placeholder = "사진을 검색해보세요."
            $0.searchTextField.font = .systemFont(ofSize: 14)
            $0.searchTextField.backgroundColor = .clear
        }
        
        collectionView.do {
            $0.register(PhotoCell.self, forCellWithReuseIdentifier: PhotoCell.reuseIdentifier)
            
            let layout = UICollectionViewFlowLayout()
            let spacing = 8.0
            let cellWidth = (UIScreen.main.bounds.width - spacing * 2) / 3
            layout.itemSize = CGSize(width: cellWidth, height: cellWidth)
            layout.minimumInteritemSpacing = spacing
            $0.collectionViewLayout = layout
        }
    }
    
    ...
}

 

---

 

마무리

오늘 작성한 내용은 정말 개인적인 취향, 생각이기 때문에 참고만 했으면 좋겠다. 코드 작성 스타일은 개인 취향이니깐!