[React + Redux Study]

Redux 란?

---

Redux 란?

• JavaScript(자바스트립트) 상태관리 라이브러리이다.
• 본질은 Node.js 모듈이다.

상태 관리 도구(State Management Tools)로 상태관리를 하기 위함이다.

상태관리는 컴포넌트 간의 정보 공유 이다. (상태관리 툴이 없다면 아래와 같이 복잡해진다)

• 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.
• 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.
• 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.
• 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈
  How to solve a Problem with React?

상태 관리 툴 종류

• React Context
• Redux
• MobX

---

리덕스 모듈

리덕스에 사용할 모듈

1. redux : npm install redux
2. react-redux : npm install react-redux
3. redux-promise : npm install redux-promise
4. redux-thunk : npm install redux-thunk

1~4 : npm install redux react-redux redux-promise redux-thunk --save

---

리덕스 세팅

리덕스 모듈을 모두 설치하고

index.js 에서 바꿔준다.

먼저 import 할 것

• import { Provider } from 'react-redux';
• import { createStore, applyMiddleware } from 'redux';
• import promiseMiddleware from 'redux-promise';
• import ReduxThunk from 'redux-thunk';
• import Reducer from './redux/reducer/index' 👈임의로 만든 reducer > index.js

---

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
      <Provider store={createStoreWithMiddleware(
        Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
        )}>
        <Router>
          <App />
        </Router>
      </Provider>
  </React.StrictMode>
);