UITableView에서 MVVM을 어캐 적용하면 좋을까?

안녕하세요. 밀쿄입니다.

어제 글 말미에 적었던

MVVM과 UITableView에 대해서 보충설명을 해보고자 합니다.

예시로 이것을 만들어보고자 합니다.

(UISearchBar_Example에서 썼던 테이블뷰 맞습니다.)

 

일단 간단하게 생각부터 해봅시다,

테이블뷰가 있죠?

테이블뷰셀이 있죠?

MVVM이니까

테이블뷰의 뷰모델이 있겠죠?

셀 역시 마찬가지로 테이블뷰셀 모델이 있습니다.

그리고 데이터가 들어가 있는 모델이 있을껍니다.

 

여기까지 쉽게 말하면

테이블뷰 - 테이블뷰 모델

테이블셀 - 테이블뷰셀 모델

모델

(사실 이 글은 모델이 주인공이 아니라서

모델부분은 다소 틀릴 수 있습니다.)

 

여기까지는 쉽죠?

일단 모델부터 구성하겠습니다.

끝입니다.

 

테이블뷰부터 구성해보겠습니다.

이렇게 하면 테이블뷰 모양은 잡힙니다.

( 전 코드로 짜니까 이렇게 되는데 꼭 저처럼 코드로 짤 필요는 없습니다. )

( 데이터 소스 부분은 오류가 날껀데 뒤에서 추가하겠습니다. )

 

이제 테이블뷰 모델을 만들껍니다.

테이블뷰 모델에는

1) 셀에 들어갈 데이터들

2) 테이블뷰셀모델들

3) 네비게이션 타이틀이 들어가야죠?

 

여기서 2번이 문제입니다.

테이블뷰 셀 모델들은 공통된 타입이 없기 때문이죠.

여러 해결 방법이 있을 수 있겠지만 저는 프로토콜로 해결했습니다.

이런 프로토콜로 전 다 묶어줬습니다.

물론 이 글 설명해선 셀 종류가 하나지만

보통 셀종류가 여러개 있는 경우도 있으니까요.

 

이렇게 만들어주시면 됩니다.

설명할 내용이 없네요.

 

자 이제 셀뷰모델을 만들어봅시다.

셀뷰 모델엔

그 셀에 나타낼 데이터와

셀의 이름정도 넣어주시면 됩니다.

여기 역시 설명할게 없습니다.

아까 만든 프로토콜을 채택해주면서 이름을 지정해주고

초기화 구문 만들어주고 끝.

 

이제 셀차례인데

셀 코드는 

뷰를 그리는 코드가 생각보다 너무 길어서

중요한 부분만 올리겠습니다.

뷰모델에 데이터가 들어오면

그 데이터 기반으로 셀에 데이터를 넣는 과정입니다.

 

자 이제 다 끝났습니다.

1) 테이블뷰 모델에 셀 모델 생성하는 과정을 넣고

2) 테이블뷰에 셀을 생성해주면 됩니다.

 

메인뷰 모델에서 다음과 같은 코드를 추가합니다.

사실 이것도 여러방법이 있겠지만

전 이렇게 셀뷰모델을 만드는 과정을 해주었습니다.

 

그리고

완성된 테이블뷰 입니다.

조금 특이한 점이 있다면 셀을 생성할 때 데이터 모델의 배열 크기만큼 만드는게 아니라

셀 뷰모델의 크기만큼 만드는다는 것이겠죠.

물론 이 두개는 같겠지만...

 

그리고 cellForRowAt에서

지난 포스팅에서 다룬

https://milyo-codingstories.tistory.com/26

type(of: )

type(of:)를 사용했습니다.

이 글 말미에도 이거랑 같은 내용이 있으니 위부분만 읽어보시면 됩니다.

 

 

사실 설명은 거의 없고 코드만 주구장창 감상하는 글이 된 것 같네요.

저라면 테이블뷰에 MVVM을 이렇게 적용하겠어란 거지

테이블뷰에 MVVM은 이런거야가 아닙니다.

 

쉽게 말하면 제 코드가 틀린 코드일 수도 있다는거죠.

 

소스코드는 추후 업데이트 에정입니다.

안할수도 있어요.

사실 소스코드가 필요하다고 생각되진 않아서..