[ Redux ]
redux를 쓰기위해서는 라이브러리를 설치를 해야한다 , 설치 명령어는 아래와 같다
yarn add redux react-redux 또는 npm install redux react-redux
1. Redux를 쓰는 이유는 무엇일까?
•
props를 쓰지않고 더 간단하게 state에 대한 정보를 모든 컴포넌트가 사용할 수 있도록하기위해
•
깊은 하위 컴포넌트들도 props 여러번 전송없이 state를 쓸 수 있음
2. 사용방법
1.
먼저 redux 라이브러리를 설치한다
2.
index.js로 가서 redux를 사용하기 위한 import설정을 해준다
a.
import { Provider } from ‘react-redux’;
3.
ReactDom.render안에 <App/> 을 주변으로 방금 import한 <Provider></Provider>로 감싸준다
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Provider>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
JavaScript
복사
4.
index.js에서 공통으로 사용할 state를 생성한다, 그 생성한 데이터를 방금 <Provider에 props설정을 해준다.
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')
);
JavaScript
복사
5.
원하는 컴포넌트에가서 redux 셋팅을해주자.
a.
컴포넌트에서 state를 쓰려면 function을 만들어야한다.
b.
export해줄때도 설정이 필요하다
c.
필요한 것들을 import를 해준다
/*예시를 위해 Cart.js라는 컴포넌트를 만들어봤다*/
import React from 'react';
import {Table} from 'react-bootstrap';
import {connect} from 'react-redux';
function Cart(props) {
return (
<div>
<div>
<Table responsive="sm">
<thead>
<tr>
<th>#</th>
<th>상품명</th>
<th>수량</th>
<th>변경</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>{ props.state[0].name }</td>
<td>{ props.state[0].quan }</td>
<td>Table cell</td>
</tr>
</tbody>
</Table>
</div>
</div>
)
}
/*
redux를 쓰기위한 셋팅
1. 컴포넌트에서 state를 쓰려면 function을 만들자
2. export default connect()() -> ex) export default connet(함수명)(Cart)
*/
function state를props화(state) {
return(
state : state
)
}
export default connect(state를porps화)(Cart)
JavaScript
복사
