(React) Redux

React Context의 단점

• State로 데이터를 관리하고 화면에 노출시키는 Framework

• React Application의 핵심 주제는 “State 를 어떻게 관리할 것인가?”
  State가 여러 Component에 펼쳐져 있을 경우, 관리하기가 쉽지 않다.

• React Context는 State를 한 곳에서 관리할 수 있다.

• React Context와 Reducer를 함께 이용할 경우, 더 유연한 상태관리 가능.

• React Context로 관리되는 State들은 Context Provider로 제공해야 한다.
  만약, 5개의 State 묶음을 관리하기 위해 5개의 Context를 생성 한 경우.
  

React Redux

• React Redux는 Context를 대신해 사용할 수 있는 라이브러리 (공식적 X)
  Redux는 React만은 위한 라이브러리가 아니다.
  React Redux 는 Redux를 React에서 사용할 수 있도록 Customize한 라이브러리
• React Redux는 하나의 객체 내에서 여러 상태를 동시에 관리하며 React Redux의 객체를 Store라고 한다.

구조 (Context와 동일)

Redux 설치
redux와 react-redux 를 설치
터미널에 npm install redux react-redux

• redux -> State를 보관할 Store 관리 모듈
• react-redux -> React에서 redux를 편하게 사용하기 위해 만든 별도의 라이브러리

Redux로 TODO App 수정

• TodoApp.js

• AddTodo.js (TODO 아이템을 등록하는 Component)

• Todo.js (Todo Item을 관리하는 Component)