RxSwift Beginners Episode 4 - BehaviorRelay and Map Operator

Reactive TableView: BehaviorRelay

구현 목표

• 네비게이션 푸쉬 이전 데이터 바인딩을 RxSwift화

구현 태스크

1. 네비게이션 푸쉬 이전 BehaviorRelay에 값 주기
2. 네비게이션 디테일 뷰에 BehaviorRelay 구현
3. BehaviorRelay 값 변화에 따라 원하는 작업 구현

핵심 코드

    private func setFoodImageRx() {
        foodImageNameRelay
            .map{UIImage(named: $0)}
            .bind(to: foodImage
                .rx
                .image)
            .disposed(by: disposeBag)
    }

소스 코드

class FoodViewController: UIViewController {
    @IBOutlet weak var foodImage: UIImageView!
    let foodImageNameRelay: BehaviorRelay = BehaviorRelay<String>(value: "")
    override func viewDidLoad() {
        super.viewDidLoad()
        setFoodImage()
    }
    
    private func setFoodImage() {
        guard let foodImageName = foodImageName else {
            return
        }
        foodImage.image = UIImage(named: foodImageName)
    }
}

navDetailVC.foodImageName = foodModel.imageName

• 네비게이션 디테일 뷰를 푸쉬하기 전 현재 널 값인 foodModel에 바인딩할 데이터를 세팅, 이후 viewDidLoad에서 이미지 뷰에 해당 데이터를 사용해 세팅하는 접근 방법

class FoodViewController: UIViewController {
    @IBOutlet weak var foodImage: UIImageView!
    let foodImageNameRelay: BehaviorRelay = BehaviorRelay<String>(value: "")
    let disposeBag = DisposeBag()
    override func viewDidLoad() {
        super.viewDidLoad()
        setFoodImageRx()
    }
    
    private func setFoodImageRx() {
        foodImageNameRelay
            .map{UIImage(named: $0)}
            .bind(to: foodImage
                .rx
                .image)
            .disposed(by: disposeBag)
    }
}

navDetailVC.foodImageNameRelay.accept(foodModel.imageName)

• 네비게이션 디테일 뷰에 foodImageNameRelay라는 BehaviorRelay 구현 → 해당 Relay에 값을 넣어준 뒤 Observable의 이벤트를 스스로 감지 가능
• foodImageNameRelay에 들어오는 특정 값을 map으로 변환 가능 → 이미지 뷰에 넣을 UIImage로 만든 뒤 foodImage에 바인딩하는 코드