CollectionView의 view에서 ViewController로 이벤트를 전달하는 방법

[nomatterjun]

헤더에서 버튼 클릭 이벤트를 처리를 해줘야하는데,
같은 클래스를 다가오는 이벤트랑 타임라인 헤더 양쪽에 모두 사용하고 있어서
탭 된 헤더가 어떤 헤더인지 구분하고 동작을 VC에 전달해줘야하는 구현이 필요한 상황..!

예를 들어 collectionView의 헤더로 headerView를 사용하고 있다고 해보자.
이 때 headerView는 자신만의 reactor도 가지고 있어.

1. reactor에 Global State를 만들어 VC에 전달

// HeaderViewReactor.swift
final class HeaderViewReactor: Reactor {
  let buttonDidTap = PublishRelay<Void>()

  func mutate(action: Action) -> Observable<Mutation> {
    switch action {
    case .someButtonDidTap:
      self.buttonDidTap.accept(())
      return .empty()
    }
  }
}

// HomeViewController.swift
// .. dataSource 정의 부분
configureSupplementaryView: { dataSource, collectionView, kind, indexPath in
  let header = collectionView.dequeueReusableSupplementaryView(
    ofKind: kind,
    for: indexPath) as HeaderView
  header.reactor = HeaderViewReactor(section: dataSource[indexPath.section].model)
  header.reactor?.buttonDidTap
    .subscribe(onNext: {
      print("Tap!")
    })
    .disposed(by: header.disposeBag)
  return header

reactor에 Global State를 만들어서 상위 VC에서 직접적으로 받아서 원하는 동작을 수행시키는 방법이야.

단점은 데이터의 흐름이 부자연스럽다는 점..?
ReactorKit은 State stream만이 VC에 영향을 끼치도록 제한해두고 있는데
이 경우에는 대응된 View에 바로 데이터를 전달하는게 아니라 직접적으로 그 흐름을 무시한 건 아니지만
어쨌든 UI layer단에 데이터를 직접 전달하는거긴 하니까 그 흐름을 무시한거라는 생각이 있어.

그리고 HomeViewReactor가 아니라 HomeVC에 데이터를 전달한 것이기 때문에 트리거를 하나 더 놔주기도 해야해..!

HeaderViewReactor ➡️ HeaderView (스킵) ➡️ HomeVC ➡️ (별도의 Action 트리거) ➡️ HomeViewReactor

2. view에서 이벤트를 전달해준 뒤 VC의 reactor에서 처리

// HeaderView.swift
extension Reactive where Base: HeaderView {
  var buttonDidTap: ControlEvent<()> {
    return ControlEvent(events: base.someButton.rx.tap)
  }
}

// HomeViewController.swift
typealias Reactor = HomeViewReactor
// .. dataSource 정의 부분
configureSupplementaryView: { dataSource, collectionView, kind, indexPath in
  let header = collectionView.dequeueReusableSupplementaryView(
    ofKind: kind,
    for: indexPath) as HeaderView
  header.reactor = HeaderViewReactor(section: dataSource[indexPath.section].model)
  header.rx.buttonDidTap
    .map { Reactor.Action.buttonDidTap }
    .bind(to: self.reactor!.action)
    .disposed(by: self.disposeBag)
  return header

// HomeViewReactor.swift
final class HomeViewReactor: Reactor {
  enum Action {
    case buttonDidTap
  }

  func mutate(action: Action) -> Observable<Mutation> {
    switch action {
    case .buttonDidTap:
      print("Tap!!")
      return .empty()
    }
  }
}

두 번째로 view에서 상위 VC로 이벤트를 전달해준 뒤 VC의 reactor에 전달해주는 형태야.

ReactorKit에서 제시한 이 방식과 동일하기 때문에 아무 문제가 없어.
이벤트가 바로 HomeViewReactor로 전달되기 때문에 중간 트리거도 필요가 없어!

HeaderView ➡️ HomeVC ➡️ HomeViewReactor

---

원래는 뭐가 좋을 것 같냐구 같이 이야기해보려고 했는데
적다보니까 그냥 2번 방법이 맞는듯..

적던 게 아까우니까 그냥 적어둘게!

지금 맘에 안드는건 두 경우 모두 bind(reactor:) 메서드 외부에서 이루어진다는 점인데
혹시 이 안에서 동작시킬 수 있는 방법이 생각난다면 공유해주렴.. 🥴

[EnnzoKim]

나는 보통 Header에 있는 UI를 직접 참조해서
VC의 Reactor와 바인딩을 해주거든?

header.someButton.rx.tap
//... 

그래서 이게 Header에만 적용되는게 아니라
다른 View(Cell, Custom UI)들에서도 마찬가지로 이렇게 작업해주면 되는건가?

[nomatterjun]

사실 둘 다 맞는 방법이라 그때그때 맞춰서 해주면 될 것 같아!

Reactive extension 방법은 컴포넌트를 private하게 유지할 수 있다는 게 장점인 것 같아

원하는 ControlEvent나 ControlProperty만 따로 접근할 수 있게 하는거니까?

상황에 맞게 사용하면 될 것 같아!