https://mingwan.notion.site/MVVM-Combine-1-27fec38c1f0a4d5db8f76cb8b2b7421d?pvs=4

앞선 글에서 아주 간단한 Combine을 활용해 양방향 바인딩하는 방법을 알아보았다.

View 소개

이번엔 애니또에서 내가 담당하는 View에서 ViewModel을 적용해 볼 예정이다.

내 담당 View중 하나인 대기방 View

마니또 시작전에 사람들을 초대해서 인원을 모으고 다 모였다면 방장이 마니또를 시작할 수 있는 간단한 화면이다.

해당 View에서 일어날 수 있는 이벤트들을 Input으로 받고 transform 과정을 거쳐 Output으로 리턴하게끔 만들어 볼 것이다.

Input & Output 정리하기

우선 Input으로 들어갈 이벤트들을 정리해야한다.

<aside> 💡 Input

1. 해당뷰에 들어왔을 때 방 정보 조회
2. 코드 복사 버튼을 눌렀을 때
3. 마니또 시작 버튼을 눌렀을 때
4. 방 정보 수정 버튼을 눌렀을 때
5. 방 삭제 버튼을 눌렀을 때
6. 방 나가기 버튼을 눌렀을 때
7. 방 정보 수정 중 ‘변경’ 버튼을 눌렀을 때 </aside>

일어나는 이벤트는 위의 총 7가지다. 그렇다면 해당 Input을 통해 나오는 Output도 정리해보자.

<aside> 💡 Output

1. 해당 방 정보
2. 초대 코드
3. 마니띠 닉네임
4. 수정할 방의 정보
5. 방 삭제 API 호출
6. 방 나가기 API 호출
7. 시작 날짜가 지난다는 Alert </aside>

이해하기 쉽게 Input의 번호와 Output의 번호를 연결해서 보면 좋을 것 같다.

1번에서 해당뷰에 들어왔을 때 방 정보조회 Input이 발생하면 해당 방 정보를 Output으로 내보낸다. 마찬가지로 2번에서도 코드 복사 버튼을 누르면 초대 코드가 Output으로 내보내진다.

Input & Output 코드 구현

그렇다면 Input을 코드로 구현해보자.