Redux 입문 - Props지옥에서 탈출하기!
쓰는 이유
코딩애플-리액트코드짜는 법
이 영상을 보는 순간 왜 Redux를 사용해야 하는지 알 수 있다!ㅋㅋㅋ
깊은 하위컴포넌트들도 props 여러번 전송없이 state를 직접 갖다쓸 수 있음.
사용법
설치
터미널에서 npm install redux redux-react 설치
준비
터미널에서 npm install redux redux-react 설치
index.js
1. import { Provider } from 'react-redux';
2. Provider로 App 감싸기
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Provider>
<App/>
</Provider>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
- createStore()안에 state 저장
import { createStore } from 'redux'; 추가
let store = createStore(()=>{return [{ id : 0, name : '멋진신발', quan : 2 }];});
(retur문에 있는 것이 초기값)
- Provider에 props전송
<Provider store={ store }>
<App/>
</Provider>
5.안의 모든 컴포넌트는 store안에 저장되어있는 데이터를 공유할 수 있게된다.
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')
);
사용
- 컴포넌트에서 store에 있는 state를 쓰려면
- function 만들기
(redux store데이터를 가져와서 props로 변환해주는 함수) - export default connect()()
- import { connect } from 'react-redux';해주기
- 컴포넌트 파라미터에 props 넣어주기
- function 만들기
Cart.js
import React from 'react';
import { Table } from 'react-bootstrap';
import { connect } from 'react-redux';
function Cart(props) {
return (
<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>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</Table>
</div>
)
}
function state를props화(state){
return {
state : state
//props라는 객체안의 state라는 이름의 key에 index.js에서 선언했던 store데이터를 할당해주는 의미이다.
}
}
export default connect(state를props화)(Cart);
Author And Source
이 문제에 관하여(Redux 입문 - Props지옥에서 탈출하기!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@starkdy/Redux-입문-Props지옥에서-탈출하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)