아주아주 간단한 카운터 만들기
App.js
import React, { Component } from 'react';
import Counter from './Counter';
class App extends Component {
render() {
return (
<div>
<Counter />
</div>
);
}
}
export default App;
Counter.js
import React, { Component } from 'react';
class Counter extends Component {
state = {
number: 0
};
handleIncrease = () => {
this.setState({
number: this.state.number + 1
});
};
handleDecrease = () => {
this.setState({
number: this.state.number - 1
});
};
render() {
const { number } = this.state;
const { handleIncrease, handleDecrease } = this;
return (
<div>
<h1>{number}</h1>
<button onClick={handleIncrease}>+</button>
<button onClick={handleDecrease}>-</button>
</div>
);
}
}
export default Counter;
728x90
'프로그램 강좌' 카테고리의 다른 글
[VScode]터미널에서 VSCode 실행하기 (0) | 2019.10.08 |
---|---|
[react.js]state 업데이트 방법 (0) | 2019.10.06 |
[react.js]비구조화 할당 방법 (0) | 2019.10.04 |
[react.js]props.children 사용법 (0) | 2019.10.03 |
[node.js]서버 셋팅#2: 카페24 환경 셋팅 (0) | 2019.10.02 |