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
'Combine' 카테고리의 다른 글
[Combine] ViewModel 의 상태변화를 View 에게 알려주고 싶다면 어떻게 해야할까? (0) | 2023.10.25 |
---|---|
[Combine] SwiftUI 에서는 Publisher 를 어떻게 구독할까? (0) | 2023.10.08 |
[Combine] Subject 알아보기 (PassthroughSubject / CurrentValueSubject) (0) | 2023.10.05 |
[Combine] Publisher 와 Subscriber 는 어떻게 연결할 수 있을까? (0) | 2023.09.28 |
[Combine] Publisher / Operator / Subscriber 알아보기 (0) | 2023.09.27 |