[리액트] flux 패턴과, 미들웨어 종류 및 장단점

📌 기존의 mvc 패턴

• SPA형태로 만들면 단 하나의 controller로 여러가지 view와 model을 관리하게 됨
• view에서 일어난 상호작용으로 인해 여러 model이 변경되거나 그 반대의 문제도 있었을 것

📌 페이스북은 이러한 상황을 줄이고자 Flux 패턴을 만들어냄

flux 패턴의 키워드는 단방향 데이터 흐름이다

기본형

• action이 발생하면 dispatcher에서 이를 받아와 해석한 후 store에 저장된 정보에 변경을 가하고 그 결과가 view로 전달됨

발전형

• 모바일에서 터치를 하는 것처럼, 웹에서도 사용자가 View를 통해서 클릭 같은 액션을 발생시킬 수 있다.
• action이 발생하면 dispatcher 통해 단방향으로 데이터가 흐름
  
  
  

📌 단계별 설명

Action

Action은 일종의 Action Creator, 클릭 같은 이벤트가 발생했을 때 이벤트가 발생했음을 action 정보를 담고 있는 객체를 만들어내 dispatcher에 전달

Dispatcher

들어오는 action 객체 정보를 받아 실제로 어떤 행동을 할지 결정
action 객체의 type을 구분
주로 store에 있는 정보에 접근해 수정하는 명령을 수행

Store

데이터, 상태를 담고 있음. store를 dispatcher와 연결해 store에 접근해서 state를 변경할 수 있음

view

store에서 어떤 이벤트(변경)이 발생하면 view는 변경된 것을 가져와서 렌더링

📌 redux

• 리덕스는 가장 사용률이 높은 전역 상태관리 라이브러리이다

• 장점

  1. 단방향 모델링 한 가지 방향으로만 바뀌는 것을 의미하는데, action을 dispatch할 때마다 histroy가 남아서 에러를 찾기가 쉽다. 또한, 타임머신 기능이라고 불리는 이전 상태로 돌아갈 수 있는 기능을 사용할 수 있다.
  2. 상태의 중앙화 스토어(Store)라는 이름의 전역 저장소를 통해 상태를 이 스토어 한 곳에서 관리를 하는데 이를, 상태의 중앙화라고 한다. 전역 상태를 관리할 때 굉장히 효과적이다.

• 리듀서 (Reducer)

  • 변화를 일으키는 함수이다. 리듀서는 두가지의 파라미터를 받아온다. 현재의 상태, 액션을 받는데 이 두 파라미터를 참고하여 새로운 상태를 만들어서 반환한다.

• 리덕스에서는 한 애플리케이션 당 하나의 스토어를 만듦

📌 미들웨어

• 리덕스 미들웨어란 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행할 수 있게 해준다. 즉, 액션과 리듀서 사이의 중간자
• 일반적인 리덕스는 동기적으로 작동한다. 액션 객체가 생성되고, 디스패치를 통해 액션을 발생시켜 스토어에게 알리면, 리듀서는 정해진 로직에 의해 액션을 처리한 후 새로운 상태값을 반환하는 과정이다. 하지만, 이러한 동기적인 흐름만으로는 처리하기 힘든 작업들이 있다. 가령, 시간을 딜레이 시킨다던지, 외부 데이터를 요청하여 그에 따른 응답을 화면에 보여주어야 한다던지 이러한 비동기 작업을 처리하는데 있어 리덕스 미들웨어가 사용된다.
• 대표적인 리덕스 미들웨어로 Redux-Saga와 Redux-Thunk가 있다.