Redux란?

React는 상태와 속성을 이용한 컴포넌트 단위 개발이라면, Redux는 컴포넌트와 상태를 분리하는 것이다. 

(상태가 컴포넌트에서 제거되면 Class Component를 보다 단순한 Functional Component가 된다)

참고로, Redux에 대한 대표적인 오해 중 하나가, Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리로 오해하는데, Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리이다.

 

• 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
• Redux (혹은 Flux Pattern)에서 사용하는 Action, Store 그리고 Reducer의 의미와 특징을 이해할 수 있다.
• Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
• 컴포넌트에서 필요로 하는 state 정보를 props로 매핑(mapping)할 수 있다.
• Action을 이용해 Store의 상태를 변경할 수 있다.
• Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다. (advanced)

상태 관리의 필요성

React app들을 보면 nested component로 이루어진 app을 흔히 볼 수 있는데 모든 컴포넌트에 props를 전달하기가 쉽지 않다. 최상위 component에서 props drilling이 이루어지는데 중간에 props가 필요하지 않은 component까지 props를 전달 시켜줘야 되니 필요없는 코드들도 많이 생기고 유지보수에 어려움이 생긴다.

그래서 상태가 관리되는 단 하나의 공간인 Store가 있고 필요한 props나 state가 있을 때 Store를 참조하기만 되기 때문에 유지보수가 쉬워진다. State Container: Redux를 쓰는 이유!

 

Redux의 3가지 원칙

1. Single source of truth
2. State is read-only
3. Changes are made with pure functions

Action, Reducer, Store

Action: state 주문서

Reducer: 현재 state와 Action(state 주문서)를 순수 함수를 통해 새로운 state를 store에 전달

  ※ 순수 함수 = 부수효과(side effect)가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수

Store : 단 하나의 state 관리 공간(모든 component가 참조 가능)

 

Redux의 데이터 흐름

Redux의 장점 - 예측 가능한 상태, 유지보수, 디버깅, 테스트!