본문 바로가기

개발

RxSwift로 중복 이메일 체크 로직 만들기

728x90

RxSwift를 사용한 중복 이메일 체크 로직 구현

RxSwift를 사용하여 회원가입 시 중복 이메일을 체크하는 로직을 간편하고 효율적으로 구현할 수 있습니다. 다음은 기본적인 예시입니다.

1. 요구 사항 정의

  • 사용자가 입력한 이메일을 실제 API를 통해 검사하여 중복 여부를 확인합니다.
  • 중복된 이메일이 있을 경우 오류 메시지를 표시하고 회원가입을 진행하지 못하도록 합니다.

2. UI 요소 및 ViewModel 설정

  • ViewController에서 이메일 입력 필드와 오류 메시지 레이블을 설정합니다.
  • ViewModel클래스를 만들고 중복 이메일 체크 관련 속성과 메서드를 정의합니다.
import UIKit

import RxSwift



class SignUpViewController: UIViewController {



    @IBOutlet weak var emailTextField: UITextField!

    @IBOutlet weak var errorMessageLabel: UILabel!



    private let viewModel = SignUpViewModel()

    private let disposeBag = DisposeBag()



    override func viewDidLoad() {

        super.viewDidLoad()



        setupBindings()

    }



    private func setupBindings() {

        emailTextField.rx.text

            .bind(to: viewModel.emailText)

            .disposed(by: disposeBag)



        viewModel.isCheckingEmail

            .bind(to: emailTextField.rx.isHidden)

            .disposed(by: disposeBag)



        viewModel.errorMessage

            .bind(to: errorMessageLabel.rx.text)

            .disposed(by: disposeBag)



        viewModel.isSignUpEnabled

            .bind(to: signUpButton.rx.isEnabled)

            .disposed(by: disposeBag)

    }

}



class SignUpViewModel {

    let emailText = BehaviorSubject<String>(value: "")

    let isCheckingEmail = BehaviorSubject<Bool>(value: false)

    let errorMessage = BehaviorSubject<String>(value: "")

    let isSignUpEnabled = BehaviorSubject<Bool>(value: true)



    func checkEmailAvailability() {

        isCheckingEmail.onNext(true)

        errorMessageLabel.text = "" // 오류 메시지 초기화



        // 실제 중복 이메일 체크 API 호출 및 처리

        // 예시:

        DispatchQueue.main.asyncAfter(deadline: .now() + 2) { [weak self] in

            if self?.emailText.value == "user@example.com" {

                self?.errorMessage.onNext("이미 사용 중인 이메일입니다.")

                self?.isSignUpEnabled.onNext(false)

            } else {

                self?.errorMessage.onNext("")

                self?.isSignUpEnabled.onNext(true)

            }

            self?.isCheckingEmail.onNext(false)

        }

    }

}

 

3. 중복 이메일 체크 로직 구현

  • ViewModel의 checkEmailAvailability 메서드에서 실제 중복 이메일 체크 API 호출 및 처리를 수행합니다.
  • API 호출 후 결과에 따라 errorMessage BehaviorSubject에 오류 메시지 (있을 경우)를 설정하고, isSignUpEnabled BehaviorSubject를 통해 회원가입 버튼의 활성화 여부를 제어합니다.

4. UI 업데이트 및 이벤트 처리

  • ViewController에서 ViewModel의 isCheckingEmail Observable을 구독하고 이메일 체크 진행 중에 입력 필드를 비활성화합니다.
  • errorMessageObservable을 구독하고 오류 메시지가 있을 경우 레이블에 표시합니다.
  • isSignUpEnabledObservable을 구독하고 오류가 없고 이메일 체크가 완료된 경우에만 회원가입 버튼을 활성화합니다.

참고:

  • 이 코드는 기본적인 예시이며 실제 구현에서는 API 호출, 에러 처리, UI 디자인 등을 추가적으로 구현해야 합니다.
  • RxSwift의 다양한 연산자와 API를 활용하여 더욱 복잡하고 효율적인 중복 이메일 체크 로직을 구현할 수 있습니다.