iOS swift 코드로 MVVM 디자인패턴 뷰에 표현하기

 

 

 

이전 포스팅에서 Model-ViewModel-Model로 이루어진 MVVM패턴을 코드로 구현해봤는데요. 오늘은 뷰에 직접 표출시켜보겠습니다. 

이전 포스팅에서 구현한 코드를 기반으로 이어서 진행하니, 직접 구현해서 확인하고 싶다면, 이전 포스팅을 먼저 참고해서 진행해주시기 바랍니다. 🤗

 

---

MVVM 디자인패턴 코드 뷰에 나타내기

먼저 Model을 만들어 보겠습니다. Model은 Pet이었죠? Pet의 생일, 이름, 희귀성, 이미지 등을 먼저 정해줍니다. 

// MARK: - Example to Action

// step 1
let birthday = Date(timeIntervalSinceNow: -2 * 85400 * 366)
let image = UIImage(named: "mungGu")!
let mungGu = Pet(name: "mungGu",
                 birthday: birthday,
                 rarity: .veryRare,
                 image: image)

// step 2
let viewModel = PetViewModel(pet: mungGu)

step 1) 에서는 먼저, 동물의 생일, 이미지, 희귀성, 이름 등을 인자로 넣어 mungGu라는 Pet 객체를 생성했습니다. 이미지는 임의의 이미지를 넣어서 보셔도 무방합니다. Pet에 관련된 이미지를 넣으면 더 보기 좋겠죠?

step 2) 에서는 viewModel을 생성합니다. viewModel은 Pet Model을 인자로 받아서 생성되며, View에 적용할 수 있는 값으로 Model을 변환시켜줍니다. 이렇게 Model이 ViewModel을 거쳐 View로 적용되게 되는 것입니다. 

Model, ViewModel을 생성했으니, View를 생성해보도록 하겠습니다. 

 

 

---

뷰 그린 후, 플레이그라운드에 표출하기 

// step 3
let frame = CGRect(x: 0, y: 0, width: 300, height: 420)
let view = PetView(frame: frame)

// step 4

/*
 
 // 4-1) viewModel extension -> configure 메서드 미사용 시
 view.nameLabel.text = viewModel.name
 view.imageView.image = viewModel.image
 view.ageLabel.text = viewModel.ageText
 view.adoptionFeeLabel.text = viewModel.adoptionFeeText
 
*/

// 4-2) viewModel extension -> configure 메서드 사용 시
viewModel.configure(view)

step 3) 에서는 위치, 크기정보를 가진 frame을 생성해서 View인 PetVIew를 생성하고 있습니다. 
step 4) 에서는 최종적으로 ViewModel의 값을 View에 적용하는 과정입니다. 이때 해당 위치에서 View를 설정하거나, ViewModel에 정의된 configure() 메서드를 통해 viewModel에서 View를 설정할 수 있습니다. 

마지막으로 PlaygroundPage의 liveView에 해당 View를 띄워보도록 하겠습니다. 

 

// step 5
PlaygroundPage.current.liveView = view

step5) 위의 코드로 플레이그라운드의 LiveView에서 뷰를 표출해서 확인할 수 있습니다. 

지금까지의 구현 과정을 한번 더 정리해 보도록 할까요? 
✓ 1 ~ 5 까지의 과정을 보도록 하겠습니다.

step 1) mungGu 라는 새로운 Pet을 생성했습니다.

step 2) stuart를 사용해서 viewModel을 생성했습니다.

step 3) iOS에서 일반적인 frame size를 넘겨서 view를 생성했습니다.

step 4) viewModel을 사용해서 subviews를 설정했습니다.

step 5) 마지막으로 PlaygroundPage에 view를 설정했습니다.
- PlaygroundPage.current.liveView -> 해당 코드는 playground에게 standard Assistant editor에 view를 렌더링 하라는 의미입니다.
  -> 해당 결과를 보기 위해서는 Editor -> Live View를 선택해서 렌더링 된 View를 볼 수 있습니다.

 

 

 

---

MVVM코드 구현 결과

위와 같이 mungGu(?)가 표출되었습니다. 이렇게 MVVM을 사용해서 뷰에 간단한 Pet 정보(이미지, 이름, 나이 등)를 표출까지 할 수 있었습니다. 이처럼 Model을 ViewModel을 거쳐 View에 표현하는 것이 MVVM의 주요 로직이라고 할 수 있겠습니다. 🤗

 

 

* 출처 : Design Patterns by Tutorials (lay wenderLich)