state 사용법

import React from 'react';
import PropTypes from 'prop-types';
 
class App extends React.Component{    // App 컴포넌트는 return함수를 가지고 있지만 React 컴포넌트로 확장했기 때문에 render 함수를 사용해야 한다. 그 이유는 React 컴포넌트는 return함수를 가지고 있지 않기 때문이다.
  state={               // 변하는 데이터를 생성하고자 할때는 state 안에 넣어야 한다.
    count: 0            // state를 render안에 넣고자 한다면 {this.state.count}와 같은 형식으로 넣어야 한다.
  };
  add = () =>{
    console.log("add");
    this.setState({count: this.state.count + 1});           // 이 방법은 추천하지 않는다.
  };
  minus = () =>{
    console.log("minus");
    this.setState(current => ({count: current.count - 1}));   // 이 방법을 추천한다.
  };
  render(){
    const {count} = this.state;
 
    return (
      <div>
        <h1>Number is {count}</h1>
        <button onClick={this.add}>더하기</button>           
        <button onClick={this.minus}>빼기</button>
      </div>
    );    // 바닐라JS에서는 기본적으로 button에 addEventListener를 해야하지만 react에서는 기본적으로 onClick함수가 내장되어있다.
  } 
}
 
export default App;