[React] 리덕스 사용 전 Flux 아키텍처 알아보기

Flux

 

Flux 의 배경

FLux 는 MVC 문제 해결하는 목적으로 고안된 어플리케이션 아키텍처이다. MVC 의 문제점은 대규모 어플리케이션인 경우 MVC 가 너무 빠르고 복잡해진다는 점이다. 그렇기 때문에 코드 예측이나 테스트의 어려움, 유지보수 비용 증가 등 다양한 문제가 발생한 것이다. 

 

 

Flux 란 무엇일까

Flux 어플리케이션은 디스패처(Dispatcher), 스토어(Store), 뷰(View) 3가지로 구성된다. 

 

Action

Action 은 중앙 저장소에 저장된 state 에 무슨 동작을 할 것인지 적어놓는 객체이다. 상태에 어떠한 변화가 필요하면 action 이란 것이 발생한다. 액션 객체에는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 되는데 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야할 값이며, 작성자 마음대로 넣을 수 있다. 

 

 

Action Creator

액션 객체를 만들어주는 함수이다. 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거롭거나 만드는 과정에서 실수로 정보를 놓치는 것을 방지하기 위해 함수로 만들어 관리하는 것이다.

Action Creater 는 redux 에 있는 기능은 아니지만 Dispatch 라는 열차에 Action 을 태워 보낼 때 dispatch 에 inline 으로 action 을 넣는 것이 불편하기 때문에 action 객체를 return 해주는 함수를 만들어 놓는 것이다. 필수적인 것은 아니다.

 

 

Dispatcher 

dispatcher 는 Flux 어플리케이션의 중앙허브로서 모든 데이터의 흐름을 관리한다. Store 의 내장함수 중 하나이며, 액션을 발생시키는 것으로 이해하면 된다. 이 함수는 dispatch(action) 와 같은 형태로 액션 객체를 파라미터로 넣어 호출한다. 이 함수가 호출되면 Store 는 리듀서함수를 실행시켜서 새로운 상태로 만들어준다. 

Dispatch 는 Action Creator 로 return 해준 Action 을 파라미터로 받아 store 에서 리듀서에게 넘겨주는 역할을 해주는 열차라고 생각하자.

 

 

Reducer 

Reducer 는 변화를 일으키는 함수이다. Action 을 만들어 발생시키면 reducer 가 현재 상태와 전달받은 액션 객체를 파라미터로 받아오고, 두 값을 참고하여 새로운 상태를 만들어 반환한다. reducer 는 dispatch 열차를 타고온 action의 type을 확인하여 그에 맞는 동작을 하는 곳이다. 동작을 하기때문에 fuction으로 작성된다.

 

 

Store

프로젝트에 리덕스를 적용하기 위해 스토어를 만든다. 1개의 프로젝트는 단 하나의 스토어만 가질 수 있고, 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에 몇 가지 중요한 내장함수를 지닌다.

 

 

 

출처

- haruair.github.io/flux/docs/overview.html

- bestalign.github.io/2015/10/06/cartoon-guide-to-flux/

- 리액트를 다루는 기술 (개정판)