Flux architecture와 Redux 데이터 흐름

참고

React Redux Tutorial for Beginners

 

In-Depth Overview | Flux

 

Redux Fundamentals, Part 2: Concepts and Data Flow | Redux

 

초기 자바스크립트의 라이브러리는 jQuery 뿐이었다.
jQuery의 사용 빈도가 높아지고 어플리케이션의 사이즈가 커지면서 코드가 지저분해졌다.
이를 해결하기 위해 새로운 라이브러리/프레임워크들이 등장하면서 비로소 SPA 개발이 가능해졌다.

하지만 각 프레임워크마다 상태 관리 방법이 다르다는 문제가 있었다.
리액트의 한방향 데이터 흐름은 기존의 양방향 데이터 흐름이 주였던 판도를 바꿔놓았다.
그렇지만 파일이 커지면 여전히 상태 관리가 복잡해지는 문제가 반복해서 발생했고, 해결방안으로 Flux 구조가 소개되었다.

 

Flux architecture

Flux 구조에서는 데이터가 한방향으로 흐른다. (unidirectional data flow)

상태만 따로 저장할 수 있는 공간인 Store를 제공한다는 점에서 리액트와 차이를 보인다.

사용자가 View에서 Action을 취하면 그게 Dispatcher로 전달되고, Dispatcher는 Action에 따라 State를 업데이트하여 Store에 저장한다.

 

Redux

Reducer + Flux

Redux의 데이터 흐름, 출처: Redux 공식 문서

Redux는 Flux 구조의 일부를 차용한 상태 관리 라이브러리이다.

Flux 구조의 기본 형태에 Reducer가 추가되었다.

사용자가 화면에서 상태를 변경하는 조작을 하면 dispatch가 그 이벤트를 포착해서 action 객체를 만든다.

dispatch 함수는 그 action 객체를 Reducer 함수로 전달하여 상태를 업데이트하도록 한다.

이후 업데이트된 상태를 Reducer 함수가 Store에 저장한다.

이렇게 상태가 변경되면 리렌더링하여 결과를 사용자에게 보여준다. 

 

Redux는 더 많은 제약을 두어 보다 엄격하게 상태를 관리하고 있다.

Store는 딱 하나만 존재해야 하고, combineReducers를 통해 여러 개의 Reducer를 사용할 수 있다

 

Redux의 세 가지 원칙

1. Single source of truth

동일한 데이터는 항상 같은 곳에서 가지고 와야 한다.

2. State is read-only

상태는 읽기 전용, 직접 변경할 수 없고 오로지 상태 변경 함수로만 조작할 수 있다.

3. Changes are made with pure functions

상태 변경은 순수함수로만 가능하다.