프론트엔드에서 비즈니스 로직과 뷰 로직 분리하기 (feat. MVI 아키텍쳐)

MVC → MVP → MVVM → 그리고 MVI 아키텍쳐


User Interface

필요한 데이터를 보는 것도 쉽지 않고, 데이터를 조작하는 것은 훨씬 더 어려운 일이었다.

그래서 일반 사용자들에게 데이터를 다루게 하기 위해 조금 더 편리한 도구를 제공해야했고, 그것이 바로 데이터와 사용자 사이에 있는 가상의 매개체인 User Interface 가 되었다.

Untitled

이러한 User Interface 는 기존의 프로그램의 Input 과 Output 사이에 화면과 행동을 추가하므로써 새로운 Input 과 Output을 사용자로부터 받도록 만드는 중간 매개체의 역할을 하게 된다.

User Interface 는 데이터와 사용자간 흐름의 방향에 따라 다음과 같이 2가지로 생각해볼 수 있다.

MVI


MVI 는 웹 프론트엔드의 cycle.js 에서 영감을 받아 iOS / Android 에 전파가 되어 정리가 되었고 MVI 패턴이라는 새로운 아키텍쳐가 나오게 되었다.