[React] Flux 패턴이란?

이전 글에서 리액트의 상태 관리가 필요한 이유와 그 역사를 알아봤다. 이번에는 Flux 패턴이 무엇인지 알아보려고 한다.

 

Flux 패턴이란?

Flux 패턴이란 사용자 입력을 기반으로 Action을 만들고 이를 Dispatcher로 전달해서 Store(Model)의 상태를 변경해서 View에 반영하는 단반향 흐름의 아키텍처이다.

 

 

Action

데이터를 변경하는 행위로 예를 들면 사용자가 앱에서 버튼을 클릭하는 행위나 정보를 입력하는 행위를 말한다. Action Creator 메서드는 새로 발생한 Action의 type과 새로운 페이로드를 묶어서 Dispatcher로 전달한다.

 

Dispatcher

모든 데이터의 흐름을 관리하는 중앙 허브라고 할 수 있다. Action을 받아서 Store에 전달하는 역할을 하는데, Store들이 등록해둔 Action의 type에 따라서 콜백 함수를 실행한다. Store에 있는 상태 사이의 의존성이 있는 경우에도 Dispatcher가 이를 관리한다.

 

Store

상태에 대한 저장소로, 상태와 상태를 변경할 수 있는 메서드로 구성된다. 어떤 type의 Action이 발생했느냐에 따라서 콜백 함수를 Dispatcher에 등록한다. Dispatcher에서 콜백함수를 실행하여 어떤 상태가 변경되면 View에 데이터의 상태가 변경되었음을 알린다. 

 

View

리액트 컴포넌트라고 생각하면 되는데, Store에서 데이터의 상태가 변경되었다고 알려주면 최상위의 View는 Store에서 데이터를 가져와서 자식 View에게 이를 알린다. 데이터에 대한 상태 변화를 반영하여 화면을 리렌더링한다. 또한 사용자가 View에 대한 조작을 하면 그에 대한 Action을 발생시킨다. 

 

예시

단순하게 버튼을 클릭하면 1을 증가시키는 카운터가 있다고 하자. 

// store.js

const initialState = {
  number: 0
};

function reducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return {
        number: state.number + 1
      }
    default:
      return state;
  }
}

 

reducer 함수는 React의 useReducer를 사용해서 Dispatcher에 넣어줄 함수이다. 상태와 Dispatcher가 받은 action에 따라서 어떤 명령을 수행할지 콜백 함수로 제공한다. 만약 action의 type이 ADD라면 number에 1을 추가해서 새로운 객체로 반환한다. 다른 타입의 객체라면 현재 상태를 그대로 반환한다.

 

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)
  
  const onAdd = () => {
    dispatch({type: 'ADD'})
  }
  
  return (
    <div>
      <h1>{state.number}</h1>
      <button onClick={onAdd}>Add</button>
    </div>
  )
}

 

React에서 제공하는 useReducer를 통해서 store.js에 있던 reducer과 initialState를 통해서 store과 dispatch를 얻는다. View에는 Action Creator인 <button onClick={onAdd}>Add</button>가 있다. 사용자가 이 버튼을 클릭하면 onAdd 함수가 실행되어 dispatch를 통해서 Action을 생성한다. 이를 dispatch로 전달하면 Dispatcher가 reducer 메서드에 맞추어서 store를 업데이트한다.  

 

 

---

 

Reference

 

https://medium.com/hcleedev/web-react-flux-%ED%8C%A8%ED%84%B4-88d6caa13b5b