[React] State

함수 컴포넌트 vs 클래스 컴포넌트

// 함수 컴포넌트
function FuncComp(props) {
  let [number, setNumber] = useState(props.initNumber);

  return (
    <div className='container'>
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <input type="button" value="random" onClick={
         ()=> {
          setNumber(number++);   
        }
      }></input>
    </div>
  )
}

let [number, setNumber] = useState(props.initNumber);
number를 props.initNumber로 초기화하고
number를 조작할 함수로 setNumber를 지정함
setNumber함수에 별도의 괄호없이 함수명만 적으면 number이 자동으로 인자로 들어감

// 클래스 컴포넌트
class ClassComp extends React.Component {
  state = {
    number:this.props.initNumber
  }
  render() {
    return (
      <div className='container'>
        <h2>class style component</h2>
        <p>Number : {this.state.number}</p>
        <input type="button" value="random" onClick={
          function(){
            this.setState({number:Math.random()})
          }.bind(this)
        }></input>
      </div>
    )
  }
}