1. Redux란?

• 상태 관리 라이브러리이다. props 연속 사용이 싫다면 Redux 혹은 Context API를 사용하여 하위 컴포넌트끼리 state값을 똑같이 공유할 수 있다.
• 사용하는 이유
  1. 모든 컴포넌트가 props없이도 state를 꺼내 쓸 수 있다.
  2. state수정 방법을 reducer로 정의하기 때문에 버그가 생겼을 때 빠르게 찾을 수 있다.
     • (reducer만 보면 되기 때문이다.)

[한눈에 보는 Redux 데이터 Flow] - Strict Undirectional Data Flow

• Action : 무엇이 일어났는 지를 설명하는 객체이다.
  • ex) {type : “LIKE_ARTICLE”, articleId : 2}
• Reducer : 어플리케이션의 state가 어떻게 변화했는지 설명해주는 함수이다.
  • ex) (previousState, action) ⇒ nextState
• Store : 어플리케이션의 state를 감싸주는 역할을 하며, 내부에 있는 store를 통해 관리한다.

2. 세팅하기

1. 데이터를 보관하기 위한 Redux 설치/세팅

• yarn add redux react-redux 혹은 npm install redux react-redux
  • redux는 데이터를 엄격하게 관리하는 기능
  • react-redux는 리덕스를 리액트에서 쓸 수 있게 도와주는 기능

1. index.js 개발환경 세팅

• [index.js]

  import {Provider} from 'react-redux';
  
  ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <Provider>
          <App/>
        </Provider>
      </BrowserRouter>
    </React.StrictMode>
  
  );
  

1. <Provider>를 import 한다.
2. state값 공유를 원하는 컴포넌트를 다 감싼다.
   • 주로 <App> 컴포넌트를 감싼다.
3. redux에서 state를 하나 만드시려면 createStore() 함수를 쓴다.

   • [index.js]

     import {Provider} from 'react-redux';
     import {createStore} from 'redux';
     
     let store = createStore(()=>{ return [{id : 0, name : '멋진신발', quan : 2}]  })
     
     ReactDOM.render(
       <React.StrictMode>
         <BrowserRouter>
           <Provider>
             <App/>
           </Provider>
         </BrowserRouter>
       </React.StrictMode>
     
     );
     

     • createStore(콜백함수)