rxSwift, rxDataSource 사용해서 TableView 사용해보기!

안녕하세요!

 

오늘은...

 

제가...

 

RxDataSource를 어느정도 이해를 해서.. 잊어먹기 전에 포스팅을 써보려고 해요.

 

그래서 오늘의 포스팅 내용은! rxSwift를 사용해서 TableView 뿌려보는 방법에 대해서 포스팅 해보겠습니다.

RxSwift를 사용해서 TableView를 뿌려주려면 이렇게 해주면 되요.

 

여기서 rxSwift를 사용할지, rxDataSource를 사용할 지에 따라 rx.items() 의 인자값이 달라지게 되요. 코드로 설명을 해보겠습니다.

1. rxSwift만 사용할 경우

요런식으로..

 

그런데 ReusableKit을 사용해주면 위 방법보다 훨신 편하고 가독성 좋게 코드를 구현할 수 있어요(최고).

 

2. rxSwift + ReusableKit 사용

따봉.. 여러개의 cell을 사용한다면 정말 깔끔해 질 것 같아요. 사용하기도 편하구요.

이렇게 struct에 사용할 cell을 정의 해주고, 다음부터 사용할 때 마다 구조체 처럼 사용해주면 되요.

 

그리고 마지막으로 RxDataSource를 사용하는 방법이 있는데, 지금까지 말한 위 방법으론 section 추가를 할 수 없어요.

만약 section을 추가해야 한다면, RxDataSource를 사용해줘야 하는데.. 복잡해요.

 

그럼 지금부터 RxDataSource 사용법에 대해 정리해보겠습니다!

RxDataSource 사용 준비물

1. 필요 프레임워크 import & tableView 정의

2. 저장할 데이터의 Model 정의

3. SectionModelType 정의

4. dataSource 정의

5. tableView 바인딩 (dataSource를 items 인자값으로)

그럼 시작해보겠습니당

1. 필요 프레임워크 임포트 & tableView 정의

추가로 CustomCell인 DefaultCell을 간단하게 정의해보겠습니당.

이후에 설명하는 데이터Model, SectionModelType 정의는 따로 데이터 Model을 사용하지 않을 거라면 굳이 사용을 안해도 사용할 수 있어요. 왜냐하면 RxDataSource에서 디폴트값으로 SectionModel을 이미 구현해 놨기 때문에 사용을 안하실꺼라면 스킵하고 SectionModel을 사용해주시면 됩니다.

저장할 데이터의 Model 정의

저는 cell을 간단하게 label 하나만 추가해 줬기 때문에 dataModel은 String값 하나만 필요해요. 그래서 CustomData로 네이밍해서 Model을 정의해보겠습니다.

그리고 타입이 SectionModelType 인 값을 정의해줍시다.

SectionModel 정의

저는 SectionOfCustomData 라고 네이밍 해볼게요.

RxDataSource에서는 디폴트값으로 SectionModelType을 제공해주고 있는데 소스 내용은 이렇습니다.

만약 저처럼 따로 데이터Model이랑 CustomSectionModelType(네이밍: SectionOfCustomData)을 정의해주었다면 바로 윗 소스는 아 이런게 있구나.. 정도만 알고 넘어가주시면 됩니다. 소스내용을 보면 제너릭으로 되어 있어서 둘다 똑같죠?? 좀더 다양하게 사용하고 싶다면 따로 ModelType을 정의해주는게 좋아보여요.

그럼 마지막으로 DataSource를 구현해보도록 하겠습니다!(거의 다 왔어요)

DataSource 구현 & binding

dataSource를 정의해 줍시다. RxTableViewSectionedReloadDataSource 인자값으로 SectionType인 만들어 준 SectionOfCustomData 를 넣어주고(디폴트값을 사용하려면 SectionModelType<제너릭>을 넣어줍시다.) 클로저를 통해 cell을 구현해 줍시다.

만약 header 부분을 넣고 싶다면 추가로 titleForHeaderInSection을 추가해주면 되요. footer부분도 방법은 똑같아요!

그리고 sections 부분 정의해줘야 하는데... 제가 이쁘게 못넣습니다.. =_=..

추가로 수정, 이동 등등 기능은 저렇게 추가할 수있고,

마지막으로 binding 해주면 완료입니다!

그럼.. 이렇게 나오네요.. 추가로 cell의 높이 설정 같은 경우는 UITableViewDelegate를 추가해준 후 delegate를 사용해야만 설정을 해줄 수 가 있다고 해요. 완전 완벽하지는 않은 것 같아요.

추가 기능: cell 선택 action

셀 선택하는 action도 많이 쓰죠.. 이 부분은 rxCocoa를 사용해주시면 됩니다. viewModel은 무시하세요.. viewModel이란 class에 data라는 array 넣어 놨습니다..

클로저 안에 self를 사용해서 weak으로 옵셔널 처리를 해두었고, self를 guard문 처리 해주었습니다.

예제 프로젝트 repo

github - SwiftTutorial

마지막으로..

드디어 사용해봤네요 =_=.. 뭐가 그렇게 어렵게 보였던지... 역시 글을 잘 읽는게 중요한 것 같아요 ㅡ,.ㅡ.. 처음 RxDataSource를 github 문서에서 봤을 땐 너.....무 복잡해 보이고 SectionModelType은 뭐고... 너무 복잡해 보였었는데 결국 사용을 해봤네요. 사람마다 이해도는 다 다르지만.. 저는 처음에 너무 어렵게 보였었어요.. 그래서 혹시 RxDataSource를 입문해보시는 분들에게 도움이 되는 포스팅이 되었음 좋겠습니다. 저도 잊지 않도록 포스팅을 해봤어요. 아직 reactorKit으로 리팩토링 해야 해서 갈길이 멀지만.. ㅠㅠ 또 알게되는 내용들이 생기면 정리를 해서 포스팅을 해보도록 하겠습니다! 그럼 다들 좋은 하루 되시고.. 코로나 조심하시고! 오늘하루도 고생하셧습니당.

참고

• gitHub - RxDataSource
• eungding 아기개발의 성장일기님 블로그

추가로 혹시 iOS 앱 개발이 아직 미숙하다고 느끼시거나 이 강의를 안들어 보신 분은 edWith - 부스트코스 iOS 강의를 꼭 들어보시는걸 추천드려요. 카카오톡 오픈톡방에 iOS 부스트코스 오픈톡방도 있으니 한번쯤 들어오셔서 swift 질문도 하고 정보도 공유하면 좋을 것 같아요.

• Naver - Edwith - 부스트코스 iOS
• 부스트코스 iOS 카카오톡 오픈톡방