본문 바로가기
FE/React

리덕스가 등장하기 전까지 이야기, MVC 패턴의 한계와 Flux의 등장

by Jiyoon-park 2021. 2. 15.

리덕스를 공부하다보니 Flux를 공부하게 되었고, Flux를 파다보니 MVC까지 타고 내려왔당. 중간 중간 만나게 되는 아하 포인트 덕분에 공부 너무 재밌당. 재밌는 공부의 세계~

요즘 클하로 공부 자극 뿜뿜 받는데, 너무 너무 즐겁다 😃 이로써 리덕스가 나에게 조금 더 고해상도로 다가오지 않을까 기대해본다.

 

그렇다면 제일 먼저 MVC 패턴부터 이야기를 해보겠다.

MVC

비즈니스 처리 로직과 사용자 인터페이스 요소를 분리시켜 서로 영향없이 개발하기 수월하게 한다. 아주 널리 널리 사용되고 있는 디자인 패턴이다.

  • Model

    • 비즈니스 처리 로직을 담당한다. 알고리즘이나 데이터와 같은 부분들.
    • 무엇을 할 것인지 정의한다.
  • View

    • 사용자 인터페이스 요소이다.
    • 최종 사용자에게 화면에 무엇인가를 보여주기 위한 역할을 한다.
  • Controller

    • 화면에서 사용자의 요청을 받아서 어떻게 처리할 지를 구현한다.
    • model의 데이터를 조회하거나 업데이트하는 역할을 하고, model 의 변화를 view에 반영한다.

💩 한계

애플리케이션의 크기가 커질수록, 컨트롤러에 다수의 모델과 뷰가 복잡하게 연결될 수 있다. MVC 가 복잡하고 비대(Massive ViewController(대규모 MVC 애플리케이션)) 해지면, 새 기능을 추가할 때마다 크고 작은 문제점을 가지고 소스 분석이나 테스트도 어려워진다.

양방향 데이터 흐름으로 겪게되는 mvc의 한계를 보완하기 위해 나타난 것이 무엇? 바로 Flux 😎

 

 

Flux

flux의 핵심은 단방향 데이터 흐름이다. 데이터의 흐름은 언제나 디스패처에서 스토어로, 스토어에서 뷰로, 뷰에서 액션으로, 다시 액션에서 디스패처로 흐른다.

  • Dispatcher
    • 애플리케이션의 중앙 허브이다. 모든 데이터 흐름을 관리한다.
    • 액션이 발생되면 디스패쳐로 전달된다. 전달된 액션을 보고 등록된 콜백 함수를 실행해 스토어에 데이터를 전달한다.
  • Store
  • View
    • 스토어에서 데이터를 가져와 이를 자식 뷰로 배분하는 컨트롤러 역할을 한다. 그래서 컨트롤러-뷰 라고도 부른다.

그리고 flux 구현체 중 하나가 Redux 이다.

 

 

* Redux에 대해서는 이어지는 글에서 정리합니다.

리덕스 기본 개념 정리 / jiyoon-park.tistory.com/39