[Combine] ViewModel 에서 Input, Output 구현하기

MVVM 구조로 작업을 하다보면 자연스럽게 Input, Output 에 대한 개념을 접하게 됩니다.  

그래서 이번 글에선 왜 이런 구조가 필요했고, 어떻게 사용하는지를 알아보려 합니다.

 

같이 예시로 살펴볼 화면은 인스타그램의 피드입니다.

 

 

사용자들은 좋아요를 누르기도 하고 DM을 보낼 수도 있고

저장하기 기능도 사용할 수 있게 됩니다.

 

그러면 댓글 모두 보기를 클릭하게 될 경우엔 어떤 화면이 노출될까요?

피드를 덮은 상태로 상위에 댓글View 가 보이게 됩니다.

 

즉, 사용자가 클릭을 하고(Input), 클릭에 대한 결과로 댓글View가 올라오게 됩니다(Output).

(물론, 피드가 셀로 구성되어 있어서 중간에 많은 단계가 있을 수 있겠지만 이번 글에선 간단하게 생각만하고 넘어갑니다..!)

 

개발을 진행하면서 위와같이 터치 이벤트에 대한 액션을 주고받고 하는 것은

어렵지 않게 작업을 진행하셨던 경험이 있으실 겁니다.

 

하지만 뭔가 내 코드가 지저분하게 구성되어 간다는 느낌을 받았던 적 있으신가요???

이벤트가 늘어감에 따라 코드의 라인 수는 증가하고 어디서 어떻게 함수를 호출하여 사용했는지...

라는 느낌을 받으셨다면 이럴때 Input, Output 구조는 조금 더 나은 코드를

작성하는데 도움이 될 것 이라 생각합니다!

 

그럼 이제 예제를 통해 어떻게 구성하는지 살펴봅시다.

크게 VC 와 ViewModel 을 Input, Output 으로 연결해주는 것을 핵심으로 잡고

먼저 ViewModel 을 살펴보면 

Input 으로는 어떤게 들어올지 Output 으로는 어떤것을 전달해줘야 할지를 작성해줍니다.

 

다음으로는 output 전역변수를 생성하게 되는데

fetchDidFailed, fetchDidSucceed, toggleButton 이렇게 3가지 케이스를 전달할 수 있도록 구성해줍니다.

 

다음으로 VC 에서는 ViewModel 에 값을 전달해줄 수 있도록 반환타입이 Input 인 변수를 만들어줍니다.

 

Input 과 Output 이 서로 동작할 수 있게 하기 위해

ViewModel 에선 transform 메서드를 생성하게 됩니다.

이 메서드를 통해 VC 에서 Output 타입의 결과를 전달하기 위한 준비는 끝이 났습니다.

이젠 VC 에서 이 값을 어떻게 받아서 처리하는지 확인해보겠습니다.

VC 에선 ViewModel 의 결과를 처리하기 위한 bind() 메서드를 만들어 두었고

구독을 통해 각 이벤트에 대한 처리를 진행했습니다.

 

이와 같이 코드를 작성하게 되면

현재 ViewModel 에서 무슨 일을 하고 있고

어떤 이벤트를 처리를 하고 있는지 알 수 있게 되어

유지보수 측면이나 협업 측면에서 봤을때 큰 장점이 있을거라 생각됩니다.

 

위의 작성된 코드는 유튜브 강의 영상을 참고했고

새롭게 코드를 작성했으니 필요하신분들은 아래의 링크에서 참고 부탁드립니다!

---

코드작성: https://github.com/sapere4ude/PracticeSwift/tree/master/RandomImage  

참고 영상: https://youtu.be/KK6ryBmTKHg