Redux (props 하기 귀찮을 때)

App.js파일에서 Cart.js라는 파일로 데이터를 옮길 때 props가 귀찮으면 redux가 있다.

Redux란 props 없이 모든 컴포넌트가 state를 갖다쓰기 가능하게 한다.

 

먼저, 설치를 해보자

npm install redux react-redux
//yarn add redux react-redux

설치한 후에, 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 store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Provider을 import해주고 <App />을 <Provider></Provider>로 감싸준다. 그 다음에 , createStore()안에 state를 저장해야한다. 그러면서 import {createStore} from 'redux'를 해주고 createStore안에 return을 써서 반환할 state초깃값을 만든다. 그 다음에, props처럼 Provider태그에 store={store}써서 보내주면 된다. 

 

이제 Cart.js로 가서 사용해보자. Cart.js는 표하나를 만들어 놓은 상태이다.

import React from 'react';
import { Table } from 'react-bootstrap';

function Cart() {
    return (
        <div>
            <Table responsive>
                <tr>
                    <th>#</th>
                    <th>상품명</th>
                    <th>수량</th>
                    <th>변경</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
            </Table>
        </div>
    )
}

export default Cart;

store에 있는 state 쓰려면 function을 만들고 export default connect()()을 써야한다.

import { connect } from 'react-redux';
//function Cart () {} 밑에다가

function 함수명(state) {
	return {
    	상품명 : state[0].name //state중에 name이라고 있으면 상품명으로 바꿔주세요 같은 느낌
        //여기서 이름구체화가 귀찮으면 state : state라쓰고 쓸때 state[0].name으로 써도 됨
        ,수량 : state[0].quan
    }
}//store안에 있던 state들을 가져와 props로 변환해주는 함수
export default connect(함수명)(Cart)

즉, 위의 과정들은 state를 props화 시킨다.

사용할 땐,

function Cart(props) {
    return (
        <div>
            <Table responsive>
                <tr>
                    <th>#</th>
                    <th>상품명</th>
                    <th>수량</th>
                    <th>변경</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>{props.상품명}</td>
                    <td>{props.수량}</td>
                    <td></td>
                </tr>
            </Table>
        </div>
    )
}

props화 시켰으므로 props.상품명으로 사용하면된다.

 

즉, 깊은 하위컴포넌트들도 props여러번 전송없이 state를 직접 갖다쓸 수 있음.