230315 숙달을 위한 메모: Redux, MVC, Flux

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

0. MVC 패턴

MVC 패턴은 Flux가 등장하기 전 대부분의 앱이 사용하던 소프트웨어 디자인 패턴이다. 주로 웹 및 응용 프로그램에서 사용되며, 코드의 재사용성을 높이고 유지보수를 용이하게 하기 위해 설계되었다.

• Model: 데이터 보관. 비즈니스 로직을 관리한다.
• View: 데이터를 화면에 보여주는 역할. UI를 나타낸다.
• Controller: 사용자의 입력을 받아 데이터에 대한 수정, 조회등의 역할. 모델과 뷰의 결합도를 낮춰 유연한 구조를 유지할 수 있도록 도와준다. 

MVC Pattern

MVC패턴의 가장 큰 장점은 역할을 분리함으로써 코드의 모듈성과 재사용성을 높여준다는 점이다. 이로 인해 개발자들은 각각의 역할에 집중하여 작업할 수 있으며, 프로젝트의 규모가 커질수록 유지보수가 더 쉬워진다.

---

모델과 뷰가 많아진다는건 어떤 뜻일까, 아래 이미지처럼 데이터의 종류가 많아지고 데이터마다 표시하는 화면이 많아져 구조가 복잡해 질 수 있다.

MVC 모델과 뷰가 많아진다면

MVC패턴에서는 컴포넌트에서도 데이터 변화가 많아지는 상황이기 때문에 이 데이터 변화가 어디서 일어났는지 알기가 어려워진다. 왜냐면 컴포넌트나 컨트롤러 기타등등에서 변화되는 사항이 있을 수 있기 때문에 어떤 경로를 통해 변화가 있었는지를 추적하는게 어려워진다.

 

당시 페북도 위 패턴을 쓰고있었다고 한다. 알림기능을 구현하고있엇는데, 데이터가 한 개가 변화가 되면 연쇄적으로 모델데이터 수정과 뷰데이터 수정 등등 연쇄적으로 변화있고 비효율적으로 변화되고 표시되어 이런 상황때문에 어떻게 이걸 개선 할 수 있을 까 해서 탄생한게 2014년에 나온 Flux Pattern이라고 한다.

---

1. Flux

Flux는 데이터의 흐름을 무조건 단 방향으로, 한 방향으로만 가도록 해 복잡성을 해결했다.

Flux Pattern

• Action: 상태 변화를 가리킨다. 즉, 데이터에 대해 정확히 어떤 상태변화를 할지 지정한다.
• Dispatcher: 데이터가 보관되어 있는 곳에 Action을 Store로 전달하는 역할. 동기적으로 실행되어 데이터의 흐름을 관리한다. 어떤 데이터든 디스패쳐를 거쳐가기 때문에 데이터가 어떻게 변화되는지를 한눈에 알 수 있다. 
• Store: 보관하는 역할도하지만 Dispatcher를 통해 받은 Action의 상태 변화를 확인 할 수 있다. 변경된 데이터 변화를 View를 통해 알려주는거고 이걸 유저가 확인 할 수 있게 되는 것. 리액트에서 프롭스를 내려주는 것 과 비슷하다.
• View: 데이터를 화면에 보여주는 역할을한다. 하지만 정확히 구분하자면 mvc패턴의 view와는 다르다. 데이터를 자식 컴포넌트 등으로 보내주는 컨트롤러의 역할도 함께 하고 있기 때문이다.

Flux패턴으로 개발을 할 경우, Action만 잘 따라가도 데이터가 어떻게 변화 했는지 파악 및 추적이 가능하다. 가령 사용자를 통해 새로운 데이터가 발생했을 때, 그렇다 하더라도 디스패치를 무조건 거치기 때문에 결국 한 방향으로 이뤄 지는 것이라고 볼 수 있다.

 

Redux는 Flux 패턴으로 만들어져있지만 다음과 같은 차이점이 있다.

1. Store는 "데이터 보관" 역할만 담당
2. Reducer가 "데이터 갱신" 역할을 담당
3. Dispatcher가 없다: Reducer가 대신 Action에 따른 데이터 전달을 담당한다.

모델에 대해 수정을 하는 출처가 여러곳인 상황은 MVC, 스토어에 직접적인 명령과 무조건 거쳐야하는 디스패쳐를 사용하는 상황은 Flux.

 

현재는 MVC보단 Flux패턴을 활용하는 추세이다.