React #2

• state
  • 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. (변수)
  • 두 가지의 state가 존재
    • 클래스형 컴포넌트가 지닌 state
    • 함수 컴포넌트에서 useState라는 함수를 통한 state
  • 코드(p104)
    • constructor안에 있는 this.state가 초깃값 설정한다
    • 여러개를 선언 할 수 있다.
  •  

import React, { Component } from "react";

class Counter extends Component {
   constructor(props) {
     super(props);
			//초기값 설정(여러개해도 상관 없음)
     this.state = {
       number: 0,
       fixedNumber: 0,
     };
   }
  
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>{fixedNumber}</h2>
        <button
          onClick={() => {
            //p110
            // this.setState((prevState) => {
            //   return { number: prevState.number + 1 };
            // });
            // this.setState((prevState) => {
            //   return { number: prevState.number + 1 };
            // });

            //콜백
            this.setState({ number: number + 1 }, () => {
              console.log("방금 setState가 호출");
            });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;