개발자의 개발 블로그

어플리케이션에서 데이터 교류 및 state 관리를 쉽고 효율적으로 하게 해준다.

Redux는 React.js 외에도, jQuery 혹은 Angular 를 사용하는 어플리케이션에서도 사용 될 수 있다.

즉, JavaScript 어플리케이션에서 data-state 와 UI-state 를 관리해주는 도구이다.

React에서의 데이터 흐름은 단일 방향으로만 흐른다.

parent-child 관계를 통하여 데이터를 교류하게 된다.

컴포넌트 갯수가 많아진다면.. 혹은 데이터를 교류 할 컴포넌트들이 복잡해지기떄문에 한계가 있다. 

그렇다고 parent-child 관계를 지키지않고 컴포넌트끼리 직접 데이터를 교류하는 방법이 가능하다. 

하지만, React 에선 절대 권장되지 않는 방법이다. 

코드 및 구조가 정말 복잡해지고, 잘못하다간 스파게티와 같은 코드가 만들어질 수있기 때문이다.

이러한 문제를 해결하기 위해 나온 개념이 바로 Flux이다. 

Flux는 디자인패턴이다. 이것은 기존의 MVC 패턴을 좀 더 발전시켜 만든 디자인 패턴이다.

MVC 패턴은 Model과 View가 늘어난다면 매우 복잡해진다. 

위 문제를 해결하기 위해서 FLUX 라는 디자인 패턴이 만들어졌다. 

시스템에서 어떠한 Action 을 받았을 때, Dispatcher는 받은 Action들을 통제하여 Store에 있는 

데이터를 업데이트한다. 그리고 변동된 데이터가 있으면 View가 다시 렌더링된다. 

그리고, View에서 Dispatcher로 Action을 보낼 수도 있다. 

Dispatcher은 작업이 중첩되지 않도록 해준다. 

즉, 어떤 Action이 Dispatcher를 통하여 Store에 있는 데이터를 처리하고, 

그 작업이 끝날 때 까지 다른 Action들을 대기시킨다.

Redux는 Flux 아키텍쳐를 좀 더 편하게 사용 할 수 있도록 해주는 라이브러리이다.

store에서 모든 데이터를 담고 있고, 

컴포넌트끼리는 직접 교류하지 않고 store 중간자를 통하여 교류한다.