<Swift>Combine(2) 사용하기

Combine을 공부하다 보니 이해가 안되는 부분이 있어 익히면서 공부해 볼까 합니다.

일단 새프로젝트를 열고 텍스트 필드 두개를 생성하고 버튼 하나를 만들어서
두 텍스트 필드에 입력된 문자가 동일하면 버튼을 활성화 하는 방법으로 Combine방식과 MVVM패턴을 활용해서 만들어 볼까 합니다

 

 

우선 main 화면을 그려주자.

 

메인 화면

위 화면에서 상단 텍스트 필드와 하단 텍스트 필드의 텍스트가 같으면 아래 "내 버튼"을 활성화 시켜줄꺼다.

 

일단 두 텍스트 필드와 하나의 버튼에 outlet을 잡아주자.

outlet

이런식으로 3개의 outlet을 잡아주면 다음으로 새로운 파일 "ViewModel.swift" 파일을 만들어준다.

일단 처음에 텍스트 필드에 관한 Combine을 적용 시켜 줄껀데.

UITextField Extension을 사용하여 텍스트가 입력될때마다 반응하도록 만들어 준다.

위처럼 Publisher를 만들어 준다. 타입은 AnyPublisher고 받아올 데이터는 String형이고 에러타입은 Never로 아무동작을 지정하지 않을거기 때문에 <String, Never>이런식으로 typelias를 지정해 준다. NotificationCenter에서는 기본적으로 Publisher를 제공해주는데 for안에는 텍스트 버튼을 눌러서 올라갈때,눌려있을때, 변경되었을때와 같은 ios제공해주는 동작을 넣어주면 됩니다. 이제 다음 compactMap과 map으로 필터링을 해주고 print()를 통해서 데이터를 로그로 확인합니다. eraseToAnyPublisher를 통해서 최종적인 publisher형태로 리턴해 줍니다. eraseToAnyPublisher는 지금까지 데이터 형태가 어떠했건간에 최종적인 publisher형태로 리턴합니다.

 

이제 Publisher를 만들어줬으니 subscriber를 해줘야 합니다.

일단 아까 만들어 놓은 ViewModel class 안에 위와 같이 프로퍼티 값을 만들어줍니다.

추후 위 값 두개를 비교하여 값이 맞는지 틀린지 비교할껍니다.

이제 다시 ViewController로 돌아와서

Outlet 밑에 위 두줄을 추가로 입력해 줍니다.

mySubscription  = Set<AnyCancelable>()은 Subscribe를 취소 할때 사용할 겁니다.

이제 View가 로드된 후 ViewDidLoad()안에 Subscribe를 해줘서 구독을 할껍니다.

 

텍스트 필드 Outlet에 아까 extension에서 만들어줬던 myTextPublisher의 구독을 만들어 줍니다.

메인 스레드에서 받게 receive를 사용하고

여기서 중요한 assign! assign은 새로운 값을 keyPath에 따라 주어진 인스턴스의 property에 할당합니다.

위에서는 viewModel에 passwordInput에 할당합니다.

그 후 .store(in: &mySubscription)를 사용하여 구독을 취소 해줍니다.

해당 구독을 하고 앱을 실행해서 123을 순차적으로 입력해 로그를 보면 아래와 같습니다.

지금 까지 내용을 활용해서

위처럼 비밀번호 확인 부분도 똑같이 작성해 줍니다.

 

이제 ViewModel에서 할당받은 값을 비교해서 버튼의 색상을 변경시켜주는 로직을 작성 할 겁니다.

텍스트 필드 같은경우 퍼블리셔를 extension에서 만들어 줬는데 이번엔 viewmodel에서 publisher를 만들어주겠습니다.

위 퍼블리셔는 할당 받은 두 값 passwordInput, passwordConfirmInput을 비교해 같으면 true 아니면 flase를 return해주는 로직입니다.

똑같이 퍼블리셔를 구독해 줍니다. 그 전에 UIButtonExtension을 만들어줘서 값에 따라 색이 바뀌게 만들어 주겠습니다.

위와 같이 extension을 만들어주고 ViewdidLoad에 subscriber를 만들어 줍니다.

위 코드도 assign을 사용해서 버튼의 Extension에 있는 isValid에 값을 할당해주고 그 값의 get, set을 통해서

버튼의 isValid값이 바뀔때 마다 배경색이 변경됩니다.

결과 화면

출처 : https://www.youtube.com/watch?v=wkTIgWFmYQ4