[iOS/Swift] UITextField를 이용한 회원가입 기능 구현

영화 예매앱을 구현하면서 회원가입 페이지를 구현하고 있었다.

 

이런 화면을 구현하고 있었다.

원리로는 저 위의 5개의 UITextField들을 입력 -> 하단의 회원가입 버튼 클릭

그럼 UserDefaults로 입력한 값들이 저장되게끔 코드를 작성했다.

 

private let name: UITextField = UITextField().then {
        $0.placeholder = "이름을 입력해주세요."
        $0.font = UIFont.systemFont(ofSize: 15)
        $0.backgroundColor = .lightGray
        $0.textColor = .black
        $0.borderStyle = .roundedRect
        
        $0.keyboardType = .default
        $0.clearButtonMode = .whileEditing
        $0.returnKeyType = .next
    }

이런식으로 UITextField들의 속성을 정의하고, UI를 설정해주면 된다.

 

font나 background, textColor등의 속성들은 TextField가 아닌 Text나 Button등, 다른곳에서 많이 써봤을테니 설명은 생략하겠다.

 

 

placeholder는 text속성처럼  TextField안에 글자를 띄우지만, 다른점은 TextField에 값을 입력하기 위해 클릭했을때,

사라진다. 말그대로 placeholder, 저 공간을 잡고 있는 글자라고 보면 된다.

 

borderStyle은 모서리의 값을 설정한다. layer.cornerRadius와 비슷한 역할을 한다.

 

keyboardType은 저 TextField를 선택했을때 나타나는 키보드의 타입을 나타낸다.

.default를 사용하면 기본 키보드가 나오고 .emailAddress를 선택하면 흔히 메일형식의 아이디를 입력하는, 그 키보드가 나온다.

clearButtonMode는 TextField에 입력된 값들을 지울수 있는 버튼을 어떻게 나오게 할지 설정한다.

returnKeyType은 키보드의 Return키의 타입을 결정한다.

 

 

이런식으로 TextField의 속성을 정의하고 필요한 갯수만큼 만들면 된다.

 

그리고 코드베이스로 항상 하듯이 UI를 설정해주면 되고,

	view.addSubview(joinLabel)
        joinLabel.snp.makeConstraints {
            $0.leading.trailing.equalToSuperview().inset(15)
            $0.height.equalTo(250)
        }
        view.addSubview(name)
        name.snp.makeConstraints {
            $0.leading.trailing.equalToSuperview().inset(30)
            $0.top.equalTo(joinLabel.snp.bottom).offset(20)
            $0.height.equalTo(40)
        }

뭐 이런식으로.

 

그럼 현재까지는 문제가 없이 필요한 만큼의 TextField들이 구현되었을 것이다.

그렇다면 이제 좀 더 디테일을 잡아보자

 

5칸이 모두 작성이 되었을때만 회원가입이 되도록 구현하고 싶다.

5칸이 모두 작성되었다면 -> 회원가입 성공 Alert

한칸이라도 비었다면 -> 오류, 모든칸을 입력하라는 Alert

 

 

먼저 Alert들을 만들어보자.

func welcomAlert() {
        let alert = UIAlertController(title: "Welcome!", message: "회원가입이 완료되었습니다!", preferredStyle: .alert)
        let action = UIAlertAction(title: "확인", style: .default) { [weak self] _ in
            self?.navigationController?.popViewController(animated: true)
        }
        alert.addAction(action)
        present(alert, animated: true)
    }
    func errorAlert() {
        let alert = UIAlertController(title: "오류", message: "빈칸 없이 입력해주세요.", preferredStyle: .alert)
        let action = UIAlertAction(title: "확인", style: .default)
        alert.addAction(action)
        present(alert, animated: true)
    }

 

 

문제가 생겼다.

이제 5개가 모두 입력되었는지 확인해야 할 차례이다.

이 부분에서 코드를 어떻게 구현해야할지... 짧게 어떻게 구현해야할지 고민을 많이했다.

가장 먼저 떠올랐던 방법은 이 코드이다.

 //TextField가 전부 채워졌는지 검증
        if id.text?.isEmpty == false && password.text?.isEmpty == false && name.text?.isEmpty == false && phoneNumber.text?.isEmpty == false && birth.text?.isEmpty == false {
            welcomAlert()
        } else {
            errorAlert()
        }

if문으로 하나씩 전부 나열해서 확인.....

isEmpty로 비어있는지(입력값이 없는지) 확인한다.

비어있으면 true고 무언가 들어있으면 false.

5개가 모두 들어있다면, welcomAlert, 아니라면 ErrorAlert.

 

가독성이 구리다 못해 쓰레기다.

무식하게 하드코딩으로 작성했다.

 

첫번째 개선

어떻게 코드를 개선할지 고민중, 팀원의 팁으로

&&(and)연산자 없이도 나열하는 방법이 있었다.

훨씬 가독성 측면이 좋았다.

	//TextField가 전부 채워졌는지 검증
        if id.text?.isEmpty == false,
           password.text?.isEmpty == false,
           name.text?.isEmpty == false,
           phoneNumber.text?.isEmpty == false,
           birth.text?.isEmpty == false {
            welcomAlert()
        } else {
            errorAlert()
        }

가독성에서는 낫지만, 여전히 하드코딩

 

 

두번째 개선

        //TextField가 전부 채워졌는지 검증
        let textField = [id, password, name, phoneNumber, birth]
        if textField.allSatisfy({ !$0.text!.isEmpty }) {
            welcomAlert()
        } else {
            errorAlert()
        }

 

textField들을 배열로 저장하고,

배열에 저장된 값들의 .text 속성들이 비어있는지(isEmpty)로 확인.

그리고 배열에 있는 값들이 모두 이 조건을 만족한다면,(allSatisfy)

WelcomAlert

아니라면 ErrorAlert.

 

결과물

 

이제 여기서 Alert에 페이지 이동을 연결하던지, 원하는 방향으로 개발을 이어나가면 된다.