React-Redux_기초5 새로운 component생성하고 React실행
import {React, useState} from 'react';
import { connect } from 'react-redux'; // react, redux연결
import { buyCookie, sellCookie } from '../Redux'; // toy action 연결
// 위 함수는 App.js에 추가할 component
function CookiePart(props){
// number의 변수를 바꾸기 위한 useState사용
const[number, setNumber] = useState(1);
console.log('Cookie(props) : ',typeof props ,props);
console.log('Cookie(props.numberOfCookie) : ',typeof props.numOfCookie ,props.numOfCookie);
// return할 component
return (
<div>
<h2>Number of Cookies -{props.numOfCookie} </h2>
{/* input에 숫자를 입력하여 사고팔때의 쿠기수량을 조절합니다. */}
<input type = 'text' value = {number} onChange = {e => setNumber(e.target.value)} />
<button onClick = {() => props.buyCookie(number)}>Buy {number} Cookies</button>
<button onClick = {() => props.sellCookie(number)}>Sell {number} Cookies</button>
</div>
)
}
// Redux실행시 현재 state에 저장된 기록을 불러옵니다.
const mapStateToProps = (state) => {
console.log('mapStateToProps : ', state);
return {
numOfCookie : state.cookieReducer.numOfCookie
}
}
// Redux실행시 각 action에 따른 method를 Arrow function에따라 dispatch합니다.
const mapDispatchToProps = (dispatch) => {
return {
buyCookie : (num) => {
dispatch(buyCookie(num));
},
sellCookie : (num) => {
dispatch(sellCookie(num));
}
}
}
// 각파트를 connect를 이용하여 React와 Redux를 연결합니다.
export default connect(
mapStateToProps,
mapDispatchToProps
)(CookiePart);
이제 CookiePart.js에서 위와같이 코드를 작성합니다. ToyPart.js와 다른점은 useState사용과 num추가 입니다. 사용자가 해당 숫자를 입력하게 되면 setNumber에 의해 바로 반영이 됩니다.
import { Provider } from 'react-redux'; // store를 App.js전체에 사용하기 위해 필요
import store from './Redux/store'; // 실제 Redux의 store
// components part
import ToyPart from './components/ToyPart';
import CookiePart from './components/CookiePart';
function App() {
return (
<Provider store = {store}>
<div className = "App">
<ToyPart />
<CookiePart />
</div>
</Provider>
);
}
export default App;
이제 ToyPart component 밑으로 CookiePart component를 추가합니다.
이전글 : React-Redux_기초4 새로운 Reducer 생성하기
다음글 : React-Redux_기초6 객체를 Redux store에 저장하기
댓글
댓글 쓰기