컴포넌트가 복잡해지면 props를 전송하기가 복잡해지는 상황이 생긴다.

그럴 때 redux를 설치해서 이용한다.
redux는 깊은 하위 컴포넌트들도 props 여러번 전송없이 state를 직접 가져다 쓸 수 있게 해준다.

yarn add redux react-redux

state 데이터 생성하기

redux state 데이터 처리는 index.js에서 해준다.
데이터가 복잡하다면 데이터를 생성하는 파일을 따로 생성하여 처리한다.

1. import {Provider}

2. Provide로 App 감싸기

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { HashRouter } from 'react-router-dom'
import { Provider } from 'react-redux'

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <Provider>
        <App />
      </Provider>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

Provider로 감싼 컴포넌트 혹은 html들은 같은 state를 공유 할 수 있다.

3. createStore()안에 state 저장

let store = createStore(() => {
  return [
    { id: 0, name: '에어맥스 2021', quan: 2 },
    { id: 1, name: '와플 트레이너 2', quan: 1 },
    { id: 2, name: '에어맥스 97', quan: 1 },
    { id: 3, name: '에어 줌 페가수스 38 플라이이즈', quan: 1 },
    { id: 4, name: '메트콘 7 X', quan: 1 },
    { id: 5, name: '줌 프릭 3', quan: 1 },
  ]
})

4. Provider에 props 전송

   ...
   <Provider store={store}>
     <App />
   </Provider>
   ...

생성한 state 데이터 사용하기

1. export default connect()()

원하는 컴포넌트에서 store에 있는 state를 쓰기 위해

맨 하단에 있는
export default 컴포넌트명 을
export default connect(함수명)(컴포넌트명) 으로 변경해주었다.
상단에 import { connect } from 'react-redux' 해준다.

2. function을 만든다.

redux store 데이터를 가져와서 props로 변환해주는 함수를 만든다.
그리고 store 데이터를 props로 등록한다.

function 함수명(state) {
  return {
    state: state,
  }
}

3. props 처럼 사용

function Cart(props) {
  return (
    <div>
      <Table responsive>
        <thead>
          <tr>
            <th>#</th>
            <th>상품명</th>
            <th>수량</th>
            <th>변경</th>
          </tr>
        </thead>
        <tbody>
          {props.state.map((item, i) => {
            return (
              <tr key={i}>
                <td>{item.id + 1}</td>
                <td>{item.name}</td>
                <td>{item.quan}</td>
                <td></td>
              </tr>
            )
          })}
        </tbody>
      </Table>
    </div>
  )
}