MVVM과 FLUX에 대하여...

<회고록>

오늘 나는 cs 스터디로 MVVM과 FLUX에 대해서 공부해보는 시간을 가졌다.

내가 MVVM과 FLUX에 대해서 공부한 이유는 다음과 같다.

       1. 면접에 자주 나오는 질문이라서

       2. MVC는 들어봤어도 MVVM에 대해서는 들어본 적이 없어서

그래서 나는 오늘 저 2가지의 질문에 대해서 답해볼려고 한다.

 

1. MVC? MVVM??, FLUX ???? 도대체 뭐지???

MVC,MVVM,FLUX는 대표적인 디자인 패턴들의 예시다.

여기서 디자인 패턴은 우리가 만들려고 하는 서비스의 동작 원리를 설계한 설계도라고 한다.

즉 MVC,MVVM,FLUX는 설계도를 의미한다.

그럼 여기서는 MVC에 대해서는 추가적인 설명없이 MVVM,FLUX에 대해서 살펴보겠다.

1-1) MVVM

MVVM은 모델과 뷰, 뷰모델로 이루어진 설계도다. 이때 모델과 뷰는 MVC에서의 뷰 모델과 동일하다.

즉 차이점은 뷰모델에서 나뉘게 된다. 이때 뷰모델은 뷰와 관련된 변경들을 바로바로 처리해서 뷰에게 넘겨주는 역할을 한다.

역할에서 볼 수 있듯이 뷰모델은 뷰와의 의존성이 높은 편이다. 하지만 이또한 데이터 바인딩을 통해서 해결했다.

하지만 뷰에 관련된 처리를 하는 것이기에 모델과의 의존성은 높은 편이 아니다.

서로의 의존성에서 볼 수 있듯이 MVVM은 서로의 역할에 대한 의존성이 없는 디자인 패턴이라고 볼 수 있다.

따라서 프로젝트의 규모가 커질수록 서로의 의존성에 의한 문제는 발생하지 않는 다는 장점이 있다.

하지만 의존성이 낮게 설계하고 이를 구현하다는 것 자체가 굉장히 어려운 일이다.

그리고 이 한계점을 구체적으로 해결한 사례가 FLUX패턴이라고 생각한다.

1-2)  FLUX

FLUX는 페이스북이 고안한 설계도다. FLUX와 MVC의 가장 큰 차이점이라면 바로 진행방향에 있다!

FLUX는 단방향 진행인 반면 MVC는 양방향 진행이다. 양뱡향 통신은 구조가 복잡하다는 문제가 있다.

프로젝트가 작을때는 아무리 구조가 복잡하더라도 문제가 생기지 않지만 만약 프로젝트가 커진다면 구조의 문제때문에 

많은 이슈가 있을 수 있다. FLUX는 해당 문제를 단방향 통신으로 해결했다.

그럼 FLUX는 어떤 구조를 가지고 있기에 단방향 통신을 할 수 있었던 것일까?

 

바로 다음과 같은 구조를 가지고 있다. 이때 진행 방향은 위에 그림에서 알 수 있듯이 Dispatcher -> store -> view -> action -> dispatcher ..... 으로 진행된다.이 처럼 진행되면 2가지 이점이 있다. 

       단방향 통신으로 양방향 통신의 단점을 해결할 수 있다.

2. MVVM 그래서 면접에 왜 자주 나오니?

MVVM패턴 FLUX패턴이 면접에 자주 나오는 이유는 프론트에서 상태관리를 할때 사용하는 디자인 패턴이기 때문이다.

실제로 상태관리를 할 때 가장 많이 쓰는 context api, redux를 설계하고 폴더구조를 설계할때도 MVVM, FLUX를 사용한다.

그래서 면접에 자주 나오는 것이다.

이처럼 MVVM,FLUX는 우리도 모르게 쓰고 있던 패턴들이었고 정말 중요한 패턴들이니 꼭 기억하길 바란다.