[UIKit] No StroyBoard -ViewController에서 View와 Controller 분리하기

🧸 시작

MVC 패턴을 하려고하면 view와 controller가 분리되어있는데

스토리보드를 이용하면 view로 볼 수 있지만 코드베이스로 구성하게 되면 이제 ViewController에 작성하게 되면서 코드가 엄청 길어진다.

view를 그리는 부분과 관리하는 부분으로 나눠서 작성하면 보기에도 빠르고 편해진다. 

 

 

🧸 View 파일 생성하기

• [New file...] -> [Cocoa Touch Class] -> UIView 파일 생성

 

 

🧸 View 파일 작성하기

import UIKit
import SnapKit

class View: UIView {

    lazy var redBtn: UIButton = {
        let btn = UIButton()
        btn.backgroundColor = .systemRed
        btn.setTitle("빨간색 버튼", for: .normal)
        return btn
    }()
    
    lazy var yellowBtn: UIButton = {
        let btn = UIButton()
        btn.backgroundColor = .systemYellow
        btn.setTitle("노란색 버튼", for: .normal)
        return btn
    }()
    
    lazy var blueBtn: UIButton = {
        let btn = UIButton()
        btn.backgroundColor = .systemBlue
        btn.setTitle("파란색 버튼", for: .normal)
        return btn
    }()
    
    lazy var greenBtn: UIButton = {
        let btn = UIButton()
        btn.backgroundColor = .systemGreen
        btn.setTitle("초록색 버튼", for: .normal)
        return btn
    }()

    //MARK: - init()
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .white
        setAddSubViews()
        makeConstraints()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setAddSubViews() {
        self.addSubview(redBtn)
        self.addSubview(yellowBtn)
        self.addSubview(blueBtn)
        self.addSubview(greenBtn)
    }
    
    func makeConstraints() {
        redBtn.snp.makeConstraints { make in
            make.top.equalTo(self.safeAreaLayoutGuide.snp.top)
            make.leading.equalToSuperview().offset(30)
            make.trailing.equalToSuperview().offset(-30)
            make.height.equalTo(50)
        }
        yellowBtn.snp.makeConstraints { make in
            make.top.equalTo(redBtn.snp.bottom).offset(10)
            make.leading.equalToSuperview().offset(30)
            make.trailing.equalToSuperview().offset(-30)
            make.height.equalTo(50)
        }
        blueBtn.snp.makeConstraints { make in
            make.top.equalTo(yellowBtn.snp.bottom).offset(10)
            make.leading.equalToSuperview().offset(30)
            make.trailing.equalToSuperview().offset(-30)
            make.height.equalTo(50)
        }
        greenBtn.snp.makeConstraints { make in
            make.top.equalTo(blueBtn.snp.bottom).offset(10)
            make.leading.equalToSuperview().offset(30)
            make.trailing.equalToSuperview().offset(-30)
            make.height.equalTo(50)
        }
    }
}

• viewController 에서 뷰를 담당하는 부분을 복사해서 넣어준다.
• 기존에 view라고 작성했던 부분은 self로 변경해준다. self가 해당 UIView가 기존 viewController의 view라고 생각하면 된다.
• init을 통해서 화면을 만들어서 컴포넌트들을 추가해준다.
• setAddSubViews() 메소드와 제약조건을 만드는 makeConstraints() 메소드는 생성과 함께 호출한다.

 

 

🧸 ViewController 파일 수정하기

import UIKit

class ViewController: UIViewController {
    
    let mainView = View()

    //MARK: - 라이프사이클
    override func loadView() {
        self.view = .init()
        self.view = mainView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        title = "메인 타이틀"
    }
}

• view로 옮긴 코드들은 삭제해준다.
• 위에서 생성한 View파일을 호출해서 loadView() 메소드에 생성해준다. 
  self.view 는 스토리보드에서 생각하면 가장 상위 계층의 뷰를 의미한다. 
  self.view 가 내가 만들어준 뷰라고 설정해준다.

 

 

🧸 결과

• 똑같은 결과가 나오는 걸 볼 수 있다.

 

 

이제 viewController 의 코드가 아주아주아주 짧아져서 
다른 코드를 입력해도 확실하게 뷰와 컨트롤러의 역할을 나눠서 볼 수 있어졌다!