티스토리 뷰

안녕하세요.

이번에는 RxSwift를 통한 MVVM 구현 과정에서 사용하면 좋은 Input Output 패턴에 대해 포스팅하겠습니다.

 

Input Output 패턴을 사용하지 않아도 MVVM 구현이 안 되는 것은 아니지만 사용해본 결과

뷰에서 발생하는 이벤트는 Input 구조체에서, 뷰모델에서 비즈니스 로직을 통해 처리하고 가공한 데이터를 전달받는 부분은 Output 구조체에 작성되어 있어 굳이 코드를 다 읽어보지 않아도 한눈에 흐름을 알 수 있고, 협업할 때에도 다른 사람이 작성한 화면의 기능을 파악하기 쉽다는 장점이 있습니다.

 

간단한 기능을 통해 Input Output 패턴을 이용하여 MVVM을 작성해 보겠습니다.

아래는 github 사용자리스트 api를 이용해 사용자 목록을 받아와서 테이블에 보여주는 앱입니다.

 

 

기본적인 구조로는 ViewModel 클래스에서 Dependency, Input, Output 구조체를 정의하여 초기화 시 받을 데이터(Dependency), View에서 받을 이벤트(Input), 비즈니스 로직을 처리한 후 View에 넘겨줄 데이터(Output)의 구조를 정의합니다.

 

앞서 말한 Input/Output 패턴의 장점이 전체 코드를 보지 않아도 흐름을 알 수 있다 였는데 위와 같이 구조체만 봐도 흐름이 보입니다.

 

Dependency 같은 경우는 초기화할 때 받아야 하는 데이터가 없어서 공란이고, Input 같은 경우는 View에서 받을 이벤트를 정의한 구조체인데 View가 로드되었을 때 호출되는 loadUserList라는 이벤트(Signal)가 정의되어 있습니다.

 

loadUserList라는 이벤트를 받아 api 통신하여 list 데이터를 받아오면 updateUserList를 통해 ViewModel에서 View로 UserListModel 배열을 전달합니다.

 

만약 api 통신 중 에러가 발생하면 presentAlert를 통해 String타입의 에러 메시지를 전달하는 구조입니다.

 

이렇게 구조체를 정의하는 이유는 transform이라는 메서드를 통해 Input과 Output의 Signal을 한 번에 전달하여 View는 ViewModel의 Output의 Signal에, ViewModel은 View의 Input의 Sginal에 바인딩하여 필요한 동작을 정의하기 위해서입니다.

 

ViewModel에 정의된 transform 메서드에서는 Input타입의 파라미터를 받고 Output타입을 반환하고 있습니다.

전달받은 input 파라미터에 loadUserList라는 이벤트에 바인딩을 하고 View에 넘겨줄 Output을 생성하여 리턴합니다.

 

View에서는 Input타입의 객체를 생성하여 transform 메서드에 전달하고 리턴된 output 객체를 통해 ViewModel의 이벤트에 바인딩합니다.

위의 경우는 앱이 실행 됐을 때 View에서 loadUserList에 이벤트를 전달하고 ViewModel에서는 해당 이벤트에 따른 작업을 처리한 후 View에 updateUserList라는 이벤트를 전달하여 테이블 뷰를 구성하는 형태입니다.

 

transform 메서드를 통해 Input/Output 객체를 교환하게 되면 View는 ViewModel을 소유하지만 ViewModel은 Output만 반환할 뿐 View를 소유하지 않는 구조가 만들어지기 때문에 의존성 문제를 해결할 수 있다는 장점이 있습니다.

 

댓글