[React.JS] Redux 소개

Redux는 데이터를 효율적으로 관리 할 수 있게 해주는 아키텍쳐 입니다.

프로젝트의 규모가 커질 수록, 데이터가 복잡해 지는 자바스크립트 싱글 페이지 어플리케이션(Single Page Application)에서 매우 유용하게 사용 됩니다.

Redux 공식 문서에는 Redux는 React 외에 다른 View 라이브러리와 함께 사용될 수 있다고 설명하고 있습니다. 저희는 React에 Redux를 적용해 보겠습니다.

1. Redux의 Data Flow

규모가 큰 프로젝트에서 Redux의 Data Flow는 코드를 명료하게 만드는 큰 장점을 가지고 있습니다.

스파게티 코드의 Data Flow

Data Flow

위와 같이 컴포넌트가 구성되어 있을 때, 주황색 컴포넌트의 state가 파란색 컴포넌트와 초록색 검포넌트에 전달되어야 한다고 예를 들어 봅시다. 주황색의 state를 직접 파란색 컴포넌트와 초록색 컴포넌트에게 전달하게 되면, 이러한 구조는 스타게티 코드를 탄생하게 만듭니다..

Parent -> Child의 Data Flow

React.JS의 Data flow는 공통된 부모가 진실의 근원(source of truth)가 되어 자식 컴포넌트에게 (parent -> child 방향으로) 데이터를 흘려보내야 합니다. 그렇게 되면 파란색 컴포넌트와 초록색 컴포넌트의 공통된 조상 컴포넌트가 진실의 근원이 되어, 데이터가 흘러가게 됩니다.

Data Flow

파란색 컴포넌트와 초록색 컴포넌트의 공통 조상인 노란색 컴포넌트는 주황색 컴포넌트의 data를 state로 저장하게 되고, 이 state를 파란색 컴포넌트와 초록색 컴포넌트에 흘려 보내는 형태로 Data Flow가 동작하게 됩니다.

parent -> child 형태로 데이터가 흐르는 구조도 썩 깨끗한 모습이 아닙니다.

Redux의 Data Flow

Redux Data Flow

위의 그림은 Redux를 사용하여 데이터 관리를 할 경우 흐름도 입니다.

Redux는 모든 state를 store에 저장합니다. 컴포넌트끼리 데이터 교류를 하지 않고, store을 통해 데이터 교류가 이루어집니다. dispatch로 state를 업데이트 하고, subscribe로 state 변동 시 view를 업데이트 시켜줍니다.

2. Redux의 디자인 패턴

Redux는 FLUX 디자인 패턴에 영감을 받아 만들어졌습니다. FLUX 디자인 패턴을 MVC 디자인 패턴과 함께 비교하여 설명하겠습니다.

MVC 디자인 패턴

MVC는 Model View Controller의 줄임말입니다.

MVC

Action이 발생하면, Controller는 Model의 데이터를 가공하여 View로 전달하고, View는 사용자에게 Action의 결과를 보여주게 됩니다. 또한 View는 Model의 데이터에 접근 할 수도 있습니다.

작은 규모의 프로젝트에서는 문제 없이 동작합니다. 하지만 Model과 View가 많아지게 되면,

MVC

어떠한 Model이 View에 반영되는지, 혹은 무한 루프가 있는지 확인 하기 어렵게 됩니다.

FLUX 디자인 패턴

위와 같은 MVC 디자인 패턴의 단점을 보완하기 위해 FLUX 디자인 패턴이 등장하게 되었습니다.

FLUX

Action이 발생하면, Dispatcher는 Action에 맞게 Store을 갱신합니다. 그리고 변경된 데이터가 있다면, View를 리랜더링 하며 Action의 결과를 사용자에게 보여 줍니다.

FLUX

또한 View에서 Dispatcher로 Action을 보낼 수도 있습니다. Action이 Dispatcher로 데이터를 저리하는 동안 다른 Action이 들어오게 된다면, 새로 들어면 Action은 처리하고 있던 Action의 작업이 끝날 때 까지 대기하게 됩니다.

Model과 View가 양방향으로 데이터 교류가 되는 MVC 디자인 패턴과 달리 FLUX는 단방향입니다. 그렇기 때문에 더욱 명료하게 개발 할 수 있게 됩니다.

3. Redux의 3가지 원칙

Redux를 사용할 때 3가지 원칙에 유의해야 합니다.

Single Source of Truth (하나의 진실의 근원)

Redux는 state를 저장하기 위해 한개의 store만 사용합니다. (이것이 FLUX 디자인 패턴과의 차이입니다. FLUX는 여러개의 store을 사용합니다.) 단일 state tree를 구성하게 되는데, 단일 state tree는 어플리케이션을 디버그하기 쉽게 만듭니다.

State is read-only (state는 읽기 전용)

state를 변경할 수 있는 유일한 방법은 action을 넘겨 주는 방법입니다.

어플리케이션은 직접 state를 변경 할 수 없고, state를 변경하기 위해서는 action을 dispatch 해야 합니다.

Change are made with Pure Functions (변화는 순수 함수로 만들어야 한다)

action을 dispatch하여 state를 변경합니다. action으로 state를 업데이트 하는 함수를 Reducer이라고 합니다. 즉, action을 어떤 변화가 있는지 정의하는 객체라고 한다면, Reducer은 action을 가지고 state를 변경시켜 줍니다.

순수 함수가 지켜야 할 것

• 외부 네트워크 혹은 데이터베이스에 접근하지 않아야 한다.
• return값은 오직 parameter 값에만 의존되어야 한다.
• 인수는 변경되지 않아야 한다.
• 같은 인수로 실행된 함수는 항상 같은 결과를 return 해야 한다.
• 순수하지 않은 API 호출을 하지 말아야 한다. (Date 및 Math)

참고

• https://velopert.com/1225
• http://redux.js.org/
• https://facebook.github.io/flux/docs/overview.html#content