객체형state,constructor형 state/setState 두가지방법

  <div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">


class Component extends React.Component{
  //1.객체형 state
  // state = {
  //   count : 0,
  // };
  
  //2.contructor 형 state
  constructor(props){
    super(props);
    this.state = {count:0};
  }
  render(){
    return (
      <div>
        <h1>{this.props.message}이것은 클래스로 만든 컴퍼넌트!</h1>
        <p>{this.state.count}</p>
      </div>
    );
  }

  //라이프사이클 훅 맛보기
  componentDidMount(){
    setTimeout(()=>{
      //this.state.count = this.state.count +1;
      //state변경해주는 함수실행,React.Component에 이미구현

      //1.setState 새로운 객체를 통째로 만들어서 할당
      // this.setState({
      //   count:this.state.count +1,

      //2.setState 이전 값을 인자로 넣어 할당
      this.setState((previousState)=>{
        const newState = {count : previousState.count +1};
        return newState;
      });
    },1000)
  }
  static defaultProps = {
    message:"기본값2"
  };
 }

ReactDOM.render(
  <Component message ="기본값 아니다"/>,
  document.querySelector("#root")
  );