MVC

• Model
  • 실제 데이터와 관련된 로직을 처리한다
  • 결과를 Controller로 보낸다
• View
  • Model에서 처리된 결과를 Controller로 부터 받아 보여준다
• Controller
  • Model에 어떤 처리를 해야되는지 알려준다
  • Model에서 처리된 결과를 View로 보낸다
• 예
  • 일반적: View에서 이벤트가 발생하고 -> Controller에서 이벤트에 해당하는 메소드를 등록하고 -> Model에서 해당 메소드를 수행 후 결과를 Controller로 전달하고 Controller가 해당 결과를 View로 보낸다

• pure MVC 패턴은 위에서처럼 단방향이지만 애플리케이션이 커지면서 model이 view에게 view가 model에게 영향을 줄 수 있는 양방향 패턴으로 변모할 수 있다고 한다

Flux

• MVC가 가지는 Model과 View가 서로에게 데이터를 전달할 수 있는 양방향 데이터 바인딩 문제를 해결하기 위해 만든 패턴
• 양방향 데이터 바인딩 문제는 Model이 View에 View가 Model에게 서로 영향을 줄 수 있고 Model이 여러 View와 View가 여러 Model에 연결 되어 있을때 어떤 결과가 나올지 예측하기 힘들다는 문제이다
• Flux는 일단 단방향 데이터 흐름과 Action, Dispatcher, Model, View라는 4가지 요소를 가지고 있다
• Action
  • action type과 데이터를 dispatcher에게 전달한다, 즉 어떤 데이터로 어떤 action을 해야할지 dispatcher에게 알려준다
• Dispatcher
  • action type에 맞는 콜백함수를 실행한다
• Store
  • action type에 맞는 콜백함수를 dispatcher에 등록한다 (실질적인 로직은 store에서 처리된다는 의미)
  • dispatcher가 해당 콜백함수를 실행 하면 view에게 데이터가 변경 되었음을 알려준다
• View
  • store로부터 데이터가 변경됐다는 것을 알게되면 화면을 리랜더링하고 자식 view에게도 변경 되었음을 알려 리랜더링 하도록 한다
• 예
  • Store에서 Dispatcher에게 action에 맞는 콜백함수를 등록한다 -> action이 발생하면 dispatcher에서 해당 콜백함수를 실행 후 store에게 알린다 -> store는 view에게 알린다

Redux

• Flux를 더 단순화 시킨 패턴
• Actions
  • 애플리케이션의 event
  • event를 reducer에 dispatch 한다 (보낸다)
• Reducer
  • reducer에서 해당 event에 맞는 로직을 처리한후 업데이트된 데이터를 store에 보낸다
• Store
  • store는 업데이트된 데이터를 저장한 후 view에게 알린다
• View
  • 화면을 업데이트 한다

• Flux와의 차이점은 Flux에서는 로직이 store에서 처리되고 Redux에서는 Reducer에서 처리된다는 것과 flux는 여러 store를 가질 수 있다는 점이다

끝

• 요런 패턴을 통해 큰 그림을 보고 해당 라이브러리를 사용해야지 뭔가 이해가 더 잘되는 듯 하다

😊