state 객체 안에 값이 두개 이상이라면?

state의 함수에는 여러개의 값이 있을 수 있는데,

import { Component } from "react";

class Counter extends Component {
  //생성자 메서드
  constructor(props) {
    super(props); //constructor를 사용할 때에는 반드시 super(props를 호출해 주어야 한다)
    // state의 초기값 설정하기
    this.state = {
      number: 0,
      fixedNumber: 0
    };
  }

  render() {
    const { number, fixedNumber} = this.state; // state를 조회할 때는 this.state로 조회합니다

    return (
      <div>
        <h1>{number}</h1>
        <h2>바뀌지 않는값: {fixedNumber}</h2>
        <button
          //onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다
          onClick={() => {
            //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

코드를 이렇게 작성하면

현재 state아네 fixedNumber라는 값을 추가해주었습니다. 버튼이 클릭 될 때에는 Number라는 값만 넣어놓았는데, 인자로 전달되는 내부에 fixedNumber를 넣어놓지는 않았습니다.
즉, 바뀌지 않는 값은 0으로 그대로가 되고, 버튼을 눌렸을 때 Number의 경우에는 변하는 값으로 되는 것입니다
ex) 1 0, 2 0, 3 0
이런식으로요!!!

state를 constructor를 꺼내기

state의 초깃값을 지정하기 위해 constructor 메서드를 선언해 주었는데, 또 다른 방식으로도 state의 초기값을 지정해 줄 수있습니다.

import { Component } from "react";

class Counter extends Component {
state = {    //state를 선언을 밖에서 해주었다.
    number: 0,
    fixedNumber: 0
  };
  
  render() {
    const { number, fixedNumber} = this.state; // state를 조회할 때는 this.state로 조회합니다
    
    return (
      <div>
        <h1>{number}</h1>
        <h2>바뀌지 않는값: {fixedNumber}</h2>
        <button
          //onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다
          onClick={() => {
            //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다
            this.setState({ number: number + 1 });
          }}
          >
          +1
        </button>
      </div>
    );
  }
}

==============
본 정보는 리액트를 다루는 기술이라는 책을 참고해서 공부용도로 올려놓은 점을 참고 바랍니다