Redux 개념 - MoonGyeongHyeon/React_Study GitHub Wiki

React - Redux 개념

Redux는 Javascript 어플리케이션에서 data-state와 UI-state를 관리해주는 도구이다. 이는 상태적 데이터 관리가 시간이 흐름에 따라 복잡해질수도 있는 SPA(Single Page Application)에서 매우 유용하게 사용된다. 그리고 Redux는 React 뿐만 아니라 jQuery, Angular 등을 사용하는 어플리케이션에서도 사용될 수 있다.

어떨 때?

React에서 데이터흐름은 단방향이다. state와 props를 익힐 때, parent-child 관계를 통해 데이터를 교류하는 것을 배웠다. 하지만 컴포넌트 개수가 많아지거나 데이터를 교류할 컴포넌트들이 parent-child 관계가 아니라면 구현이 까다로워진다.

위와 같은 구조일 때, 빨간색 컴포넌트가 파란색이나 초록색 컴포넌트와 데이터를 교류해야 한다면 어떻게 구현해야 할까? 물론 컴포넌트끼리 직접적으로 교류할 수 있는 방법이 있긴 하다. 하지만 React에선 절대 권장되지 않는 방법이다. 구조가 정말 복잡해지고 스파게티 코드가 만들어질 수 있기 때문이다.

기존의 알고있던 방법인 parent-child 구조를 사용하여 데이터를 교류하려 한다면 위의 그림처럼 복잡한 구조와 코드가 나올 것이다. (물론 직접 교류하는 것보단 괜찮은 결과일 것이다.)

이런 문제에 대해서 React Document 에선 아래와 같은 해결 방법을 제시하고 있다.

For communication between two components that don’t have a parent-child relationship, you can set up your own global event system. … Flux pattern is one of the possible ways to arrange this.
번역: parent-child 관계가 아닌 컴포넌트끼리 데이터를 교류 할 때엔 글로벌 이벤트 시스템을 설정 하는 방법이 있다. … Flux 패턴은 이를 수행하기 위한 방법 중 하나이다.

Flux는 라이브러리가 아니라 디자인 패턴이다.

MVC 패턴

Flux 패턴을 알아보기 전에 널리 쓰이고 있는 MVC 패턴에 대해 먼저 알아보도록 하자.

MVC 패턴은 Controller, Model, View 이 3가지 개념으로 이뤄져 있다. 어떠한 Action 이 입력되면, Controller는 Model이 지니고 있는 데이터를 조회하거나 업데이트 하며, 이 변화는 View 에 반영되는 구조이다. 또한, View에서 Model의 데이터에 접근 할 수도 있다.

하지만 Model과 View의 수가 많아진다면?

이러한 구조에서 무한루프 등 무언가 문제가 발생한다면 쉽게 찾아내지는 못할 것이다.

Flux 패턴

위와 같은 문제를 해결하기 위해 등장한 게 Flux 패턴이다.

시스템에서 어떠한 Action 을 받았을 때, Dispatcher가 받은 Action들을 통제하여 Store에 있는 데이터를 업데이트한다. 그리고 변동된 데이터가 있으면 View 에 리렌더링한다. 또한, Dispatcher은 작업이 중첩되지 않도록 해준다. 즉, 어떤 Action이 Dispatcher를 통하여 Store에 있는 데이터를 처리하고, 그 작업이 끝날 때 까지 다른 Action들을 대기시킨다.

본론으로

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

위와 같이 store에서 모든 데이터를 담고 있고, 컴포넌트끼리는 직접 교류하지 않고 store 중간자를 통하여 교류한다. dispatch를 통해 store에 데이터를 업데이트할 수 있고, 해당 컴포넌트에서 store에 있는 특정 데g이터의 변동을 주시하고 있다가 변동이 있을 시, 바로 반영시킬 수 있다.

3가지 원칙

Single Source of Truth

Redux는 어플리케이션의 state를 위해 단 하나의 store만을 사용한다. (Flux는 여러 개의 store를 사용한다.)
State is read-only

Redux 매뉴얼엔 아래와 같은 내용이 있다.
```
“The only way to mutate the state is to emit an action, an object describing what happened.” 
(번역: state를 변경하는 유일한 방법은 어떤일이 발생했는지 나타내주는 action 객체를 전달하는것이다) 
```
즉, 어플리케이션에서 state를 직접 변경할 수 없다는 의미이다. state를 변경하기 위해선 action이 dispatch 돼야 한다.

dispatch는 '보낸다' 라는 뜻이며, action은 어떤 변화가 일어나야 할 지를 알려주는 객체이다.
Changes are made with Pure Functions

두 번째 원칙에서 설명된 것처럼 Redux에선 어플리케이션에서 state를 직접 변경을 허용하지 않는다. 그 대신 action읠 dispatch하여 상태 값을 변경한다.이 과정에서 action 객체를 처리하는 함수를 Reducer라고 한다. 즉, action은 어떤 변화를 요하는지 나타내는 객체라면, Reducer는 그 정보를 받고 어플리케이션의 상태를 어떻게 바꿀지 정의한다고 볼 수 있다.

키워드 정리

store

React.js 프로젝트에서 사용하는 모든 동적 데이터들을 담아두는 곳.
action

어떤 변화가 일어나야 할 지 나타내는 객체.(그러한 객체를 반환하는 함수)
reducer

action 객체를 받았을 때, 데이터를 어떻게 바꾸고 처리할지 정의하는 객체.