7-1 카운터 예제(react)

react로만 이루어진 기본적인 카운터 예제

counter component - 계산된 값을 화면에 나타냄

option    -  계산할 값 입력받고 부모 컴포넌트로 전달

button    -  더할지 뺄지 선택할 버튼 나타냄

App            - 공통부모, counter에 표시되는 값과 계산될값을 state로 가지고 있어야함.또한 버튼이 클릭될때마다 발생한 이벤트를 전달받아 counter에 표시되는 값을 계산하여 state에 저장한다.

Counter.js

import React, { Component } from 'react';

class Counter extends Component {

render() {

return (

<div>

<h1>Value : {this.props.value}</h1>

</div>

);

}

}

export default Counter;

전달받은 value 출력

Option.js

import React, { Component } from 'react';

class Option extends Component {

constructor(props) {

super(props);

this.onChange = this.onChange.bind(this);

}

onChange(event) {//textbox에 값 입력시 부모컴포넌트로 전달해줌

this.props.onChange(event.target.value);

console.log(event.target.value);//찍어보면 바로바로 바뀌는걸 알수있음 바뀐 값이 부모에게 넘어감

}

render() {

return (

<div>

<input value={this.props.diff} onChange={this.onChange} />

</div>

);

}

}

export default Option;

diff값을 전달, onChange 이벤트 등록(diff는 더해지고 빼지는 값)

Button.js

import React, { Component } from 'react';

class Button extends Component {

constructor(props) {

super(props);

this.onIncrement = this.onIncrement.bind(this);

this.onDecrement = this.onDecrement.bind(this);

}

onIncrement(event) {

this.props.onIncrement();

}

onDecrement(event) {

this.props.onDecrement();

}

render() {

return (

<div>

<button onClick={this.onIncrement}>+</button>

<button onClick={this.onDecrement}>-</button>

</div>

);

}

}

export default Button;

App.js

import React, { Component } from 'react';

import './App.css';

import Counter from './components/Counter';

import Option from './components/Option';

import Button from './components/Button';

class App extends Component {

constructor(props) {

super(props);

this.state = {

value: 0,

diff: 1

};

this.onChange = this.onChange.bind(this);

this.onIncrement = this.onIncrement.bind(this);

this.onDecrement = this.onDecrement.bind(this);

}

onChange(diff) {//사용자 입력값 state.diff에 저장

this.setState({

diff: diff

});

}

onIncrement() {//state.diff와 이전의 state를 합친 값을 state.value에 저장

this.setState(prevState => ({

value: prevState.value + Number(this.state.diff)

}));

}

onDecrement() {

this.setState(prevState => ({

value: prevState.value - Number(this.state.diff)

}));

}

render() {

return (

<div>

<Counter value={this.state.value} />

<Option diff={this.state.diff} onChange={this.onChange} />

<Button onIncrement={this.onIncrement} onDecrement={this.onDecrement} />

</div>

);

}

}

export default App;

Counter - state.value를 넘겨줘야한다.

밑의 옵션과 버튼도 해당값을 넘겨주고, 이벤트 핸들러 등록해야됨.

--------------

constructor 보충