더북(TheBook)

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;

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