3.4.1.1 state 객체 안에 여러 값이 있을 때

    state 객체 안에는 여러 값이 있을 수 있습니다. Counter 컴포넌트를 다음과 같이 한번 수정해 보세요.

    Counter.js

    import React, { Component } from 'react';
     
    class Counter extends Component {
      constructor(props) {
        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;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.