(React) 리액트 state를 사용한 더하기 프로그램 만들기(초간단)

---

State 직접 사용해보기

---

아무리 이론을 봐도 직접 사용해보지 않으면, 

잘 와닿지 않아서 state를 사용하여 초간단 더하기 프로그램을 만들어 보았습니다.

 

<결과화면>

- 초기화 버튼 눌렀을시 & 초기화면

- 더하기 및 result 버튼 클릭시

Counter.js

import React, { Component } from 'react';
import './Counter.css';

class Counter extends Component {
  state = {
    number1: '',
    number2: '',
    number: 0,
  };
  result = (e) => {
    //클릭시 결과값이 나옴.
    //number1과 number2둘다 문자이므로
    //parseInt를 사용하여 number로 형변환을 해줌.
    this.setState({
      number: parseInt(this.state.number1) + parseInt(this.state.number2),
    });
  };

  numberChange1 = (e) => {
    //input안의 값이 바뀔때마다 호출되는 함수
    this.setState({
      number1: e.target.value,
    });
  };

  numberChange2 = (e) => {
    //input안의 값이 바뀔때마다 호출되는 함수
    this.setState({
      number2: e.target.value,
    });
  };

  reset = (e) => {
    //클릭시, 모두 초기화 시킴
    this.setState({
      number: 0,
      number1: '',
      number2: '',
    });
  };

  render() {
    const { number1, number2, number } = this.state;
    return (
      <div className="container">
        <div className="calcu_result">
          <h1>{number1}</h1>
          <h1>+</h1>
          <h1>{number2}</h1>
          <h1>=</h1>
          <h1>{number}</h1>
        </div>
        <hr />
        <div className="calcu">
          <input
            className="input1"
            type="number"
            name="calcu1"
            placeholder="숫자를 입력하시오."
            onChange={this.numberChange1}
            value={this.state.number1}
          />
          <h2>+</h2>
          <input
            className="input2"
            type="number"
            name="calcu2"
            placeholder="숫자를 입력하시오"
            onChange={this.numberChange2}
            value={this.state.number2}
          />
          <button onClick={this.result}>result</button>
          <button onClick={this.reset}>reset</button>
        </div>
      </div>
    );
  }
}

export default Counter;

 

App.js

import React from 'react';
import Counter from './Counter';

const App = () => {
  return <Counter />;
};

export default App;

 

Counter.css

.calcu_result {
  display: flex;
}

.calcu_result h1 {
  height: 30px;
}

.calcu {
  width: 100%;
  height: 30px;
  display: flex;
}

.calcu h2 {
  margin: 0;
  height: 30px;
}
/*# sourceMappingURL=Counter.css.map */

 

 

---

매우 간단한 프로그램이지만, 

혼자서 실습을 해봐야지 손에 익어서 한번 만들어 봤다 ㅎㅎ 

함수형 컴포넌트로는 일상생활에서 쓰는 계산기 프로그램을 만들어 봐야겠다 ㅠ_ㅠ