[RIBs] Memo 삭제,수정 구현해보기

안녕하세요 Foma💻 입니다!

 

저번 시간에 Memo까지 이동해서 화면을 보여주는 것까지 구현했었는데요.

 

오늘은 Memo화면에서 일어나는 삭제,수정을 구현해보도록 하겠습니다.

 

바로 시작할게요~

---

MemoViewController.storyboard

 

스토리보드 화면 구성은 아래와 같습니다.

 

뷰컨트롤러에 테이블뷰를 넣어주고

 

테이블뷰 셀은 MemoTableViewCell을 따로 만들어주었습니다.

 

테이블뷰셀은 정보를 표시해줄 Label,삭제버튼.더하기버튼으로 구성되어있습니다.

 

---

Memo

 

메모는 간단하게 숫자만 가지고 있는 객체로 만들어줍니다.

 

struct Memo {
    let number:Int
}

---

MemoData

 

원래 서버와 통신을 해서 데이터를 가져와야하지만...귀찮으니깐 .. 전역으로 선언한 데이터를 미리 세팅해놓겠습니다.

 

var MEMO_DATA:[Memo] = [
    Memo(number: 1),
    Memo(number: 2),
    Memo(number: 3),
    Memo(number: 4),
    Memo(number: 5),
    Memo(number: 6),
    Memo(number: 7),
    Memo(number: 8),
    Memo(number: 9),
    Memo(number: 10),
    Memo(number: 11),
    Memo(number: 12),
    Memo(number: 13),
    Memo(number: 14),
    Memo(number: 15),
    Memo(number: 16),
    Memo(number: 17),
    Memo(number: 18),
    Memo(number: 19),
    Memo(number: 20),
]

---

MemoTableViewCell

 

스토리보드에서 버튼과 레이블을 연결해주고

 

RxCocoa,RxSwift를 import 해줍니다.

 

그리곤 삭제버튼과 더하기버튼을 눌렀을 때의 액션을 옵저버블로 만들어줍니다.

 

import UIKit
import RxSwift
import RxCocoa

class MemoTableViewCell: UITableViewCell {
    
    @IBOutlet weak var plusButton: UIButton!
    @IBOutlet weak var deleteButton: UIButton!
    @IBOutlet weak var title: UILabel!
    
    override func prepareForReuse() {
        disposeBag = DisposeBag()
    }
    
    var disposeBag:DisposeBag = DisposeBag()
    
    var deleteTap : Observable<Void>{
        return self.deleteButton.rx.tap.asObservable()
    }
    
    var plusTap : Observable<Void>{
        return self.plusButton.rx.tap.asObservable()
    }
}

---

MemoViewController

 

아래와 같이 4개 모듈을 import 해줍니다.

 

import RIBs
import UIKit
import RxCocoa
import RxSwift

 

PresentableListener에 정보를 가지는 memos 메모뷰컨트롤러에서 일어날 액션인 deleteMemo,plusMemo를 미리 정의해줍니다.

 

protocol MemoPresentableListener: AnyObject {
    var memos: BehaviorRelay<[Memo]> { get }
    func deleteMemo(_ index:Int)
    func plusMemo(_ index: Int)
}

 

가장 먼저 테이블뷰를 연결해주고

 

테이블뷰와 바인딩을 해줄 bind함수를 작성합니다.

 

bind()

 

listener를 통해서 memos 안에 있는 정보를 테이블뷰와 바인딩합니다.

 

cell안에 있는 deleteTap과 plusTap을 구독하여 액션에 대한 행동을 PresentableListener 미리 정의해두었던 deleteMemo와 

 

plusMemo가 실행되도록 합니다.

 

final class MemoViewController: UIViewController, MemoPresentable {
       
    @IBOutlet weak var table: UITableView!
    
    weak var listener: MemoPresentableListener?
    let disposeBag:DisposeBag = DisposeBag()
    
    static func instantiate() -> Self {
        return Storyboard.MemoViewController.instantiate(self)
    }
    
    override func viewDidLoad() {
        configure()
        bind()
    }
    
    private func configure() {
        self.title = "Memo"
    }
    
    private func bind() {
        listener?.memos.bind(to: table.rx.items(cellIdentifier: "MemoTableViewCell"))  { [weak self] (index, memo, cell) in
            if let cell = cell as? MemoTableViewCell {
                cell.number.text = "\(memo.number)"
                cell.deleteTap
                    .subscribe(onNext:{
                        self?.listener?.deleteMemo(index)
                    })
                    .disposed(by: cell.disposeBag)
                
                cell.plusTap
                    .subscribe(onNext:{
                        self?.listener?.plusMemo(index)
                    })
                    .disposed(by: cell.disposeBag)
            }
        }.disposed(by: disposeBag)
    }
}

---

MemoInteractor

 

이제 뷰컨토롤러에서 정의하고 실행한 memos,deleteMemo,plusMemo에 대한 로직을 구현해줘야겠죠?

 

비지니스 로직을 담당하는 인터랙터로 이동합니다.

 

가장 먼저 memos를 BehaviorRelay<[Memo]> 로 만들어줍니다. (BehaviorRelay를 모르시는 분들은 여기 에서 봐주세요!)

 

그리곤 메모데이터를 옵저버블하게 받아오게끔 만들어줍니다.

 

그리곤 getMemoData를 memos랑 바인딩을 해주어 memos가 memoData를 갖게합니다.

 

.disposeOnDeactive 메소드를 이용해서 인터랙터가 비활성화되면 dispose되도록 합니다.

 

뷰컨트롤러에서 리스너의 memos 데이터와 테이블뷰를 바인딩 해주었죠?

 

인터랙터에서 memos 데이터가 바뀔 때마다 테이블뷰의 정보가 자동으로 갱신될 것입니다.

 

final class MemoInteractor: PresentableInteractor<MemoPresentable>, MemoInteractable {

    weak var router: MemoRouting?
    weak var listener: MemoListener?
    var memos: BehaviorRelay<[Memo]> = BehaviorRelay.init(value: [])
	
    ...
    override func didBecomeActive() {
        super.didBecomeActive()
        getMemoData()
            .bind(to: memos)
            .disposeOnDeactivate(interactor: self)
    }
    
    func getMemoData() -> Observable<[Memo]> {
        return Observable<[Memo]>.create { observer in
            observer.onNext(MEMO_DATA)
            return Disposables.create()
        }
    }
}

 

뷰컨트롤러의 MemoPresentableListener에 미리 필요한 액션들을 정의해두었죠?

 

인터랙터가 MemoPresentableListener 채택하여 일어난 액션에 대한 로직을 처리할 수 있도록 합니다.

 

deleteMemo는 memos의 해당 index번째 메모가 삭제되고 memos에 전달하도록 작성하였고

 

plusMemo는 memos의 해당 index번째 숫자가 +1 되도록 만들고 memos에 전달하도록 작성하였습니다.

 

// MARK: MemosPresentableListener
extension MemoInteractor: MemoPresentableListener {
    
    func deleteMemo(_ index:Int) {
        var newMemos = memos.value
        newMemos.remove(at: index)
        memos.accept(newMemos)
    }
    
    func plusMemo(_ index: Int) {
        var newMemos = memos.value
        newMemos[index] = Memo(number:newMemos[index].number + 1)
        memos.accept(newMemos)
    }
}

---

실행화면

 

메모에서 더하기 버튼을 누르면 숫자가 +1씩 증가하고 삭제를 누르면 해당 메모가 삭제되는 것을 볼 수 있습니다.