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를 추가합니다.

 


npm start를 하게 되면 위 사진과 같이 페이지가 출력이 됩니다.


이전글 : React-Redux_기초4 새로운 Reducer 생성하기


다음글 : React-Redux_기초6 객체를 Redux store에 저장하기



댓글

이 블로그의 인기 게시물

Lesson 12_1 프로퍼티 노드(Property Node)

DAQ로 전압 측정하기-2

Lesson 12_2 참조를 이용한 프로퍼티노드(Property Node)