[iOS] 앱 아키텍쳐 기초 (MVC,MVVM)

TIL 7일차 - 앱 아키텍처 기초 공부하기

 

앱 개발에서 아키텍처를 설계하는 것은 코드의 가독성, 유지 보수성, 확장성을 높이기 위해 필수적임

 

MVC(Model-View-Controller)

앱의 구조를 세 개의 역할로 분리한 것임

 

Model-데이터 및 비즈니스 로직을 담당

 

View-사용자에게 보이는 UI 요소

 

Controller-Model과 View를 연결하는 중개자 역할로 View에서 받은 요청을 Model에게 전달하여 필요한 데이터를 가져오거나 변경하도록 요청한다.

 

<장점>

직관적이고 간단함.

iOS에서 기본적으로 권장하는 패턴임.

소규모 프로젝트에 적합함. 당연함 쉽고 빠르게 만들 수 있으니깐

 

<단점>

하지만 컨트롤러의 역할이 너무 커져서 코드가 너무 복잡해짐

테스트가 어렵고 코드 재사용성이 낮음

 

 

MVVM (Model-View-ViewModel)

뷰와 모델 사이에 뷰모델을 추가해 UI로직을 분리해 MVC의 단점을 보완하기 위해 등장한 패턴이다.

 

<장점>

UI 로직을 ViewModel에서 처리하여 컨트롤러가 가벼워짐

코드 재사용성이 증가

테스트하기 쉬움(ViewModel을 단위 테스트 가능)

규모가 큰 프로젝트에서 적합함

RXSwift와 결합하여 반응형 UI를 구현할 경우에 적합함

 

<단점>

구조가 상대적으로 복잡하여 학습 비용이 높음

데이터 바인딩이 없으면 효율성이 떨어질 수 있음

 

 

 

 

 

쉽게 말하면 대체 이게 무슨 말이냐?

 

MVC: ViewController가 거의 다함. 오죽하면 얘 별명이 massive(뚱보) 뷰컨임

• ViewController = 사장 + 직원 + 계산원 + 디자이너
• 다 혼자 함
• 빠르게 만들긴 좋음
• 커지면 바로 터짐

MVVM: 큐번은 화면만, 로직은 VM이 담당한다.

 

• ViewController = 디자이너
• ViewModel = 기획자
• Model = 재료 창고
• 각자 역할 명확
• 처음엔 귀찮지만 커질수록 편함

 

 

즉 MVVM은 뷰컨의 역할을 덜어주기 위해 등장했다고 생각하면 된다.

얘의 등장으로 테스트, 코드 읽기, 재사용이 용이해졌음

 

 

 

 

MVVM 구조 (핵심!)

• Model: 데이터
• View: 화면
• ViewModel: 화면에 필요한 로직 + 가공된 데이터

View ↔ ViewModel ↔ Model
(ViewController는 View 역할)인데 중요한 점!!

ViewController=View 취급을 한다. (로직 담당 X)

 

 

MVC vs MVVM을 같은 기능으로 비교

예제: 프로필 화면

MVC

👉 판단, 가공, 표현 전부 VC가 함

class ProfileViewController: UIViewController {

    let person = Person(...)

    override func viewDidLoad() {
        super.viewDidLoad()

        nameLabel.text = person.name
        imageView.image = person.img.image
        view.backgroundColor = person.color

        if person.name.count > 5 {
            nameLabel.font = .boldSystemFont(ofSize: 20)
        }
    }
}

 

 

MVVM  

👉 판단은 ViewModel

class ProfileViewModel {
    let nameText: String
    let avatarImage: UIImage?
    let backgroundColor: UIColor
    let isNameLong: Bool

    init(person: Person) {
        self.nameText = person.name
        self.avatarImage = person.img.image
        self.backgroundColor = person.color
        self.isNameLong = person.name.count > 5
    }
}

 

👉 VC는 그냥 그리기만 함.

class ProfileViewController: UIViewController {

    let viewModel: ProfileViewModel

    override func viewDidLoad() {
        super.viewDidLoad()

        nameLabel.text = viewModel.nameText
        imageView.image = viewModel.avatarImage
        view.backgroundColor = viewModel.backgroundColor

        if viewModel.isNameLong {
            nameLabel.font = .boldSystemFont(ofSize: 20)
        }
    }
}