3.4.1 클래스형 컴포넌트의 state

    새로운 컴포넌트를 만들어 주세요. Counter.js 파일을 src 디렉터리에 생성하여 다음 코드를 작성해 보세요.

    Counter.js

    import React, { Component } from 'react';
     
    class Counter extends Component {
      constructor(props) {
        super(props);
        // state 초깃값 설정하기
        this.state = {
          number: 0
        };
      }
      render() {
        const { number } = this.state; // state 조회할 때는 this.state 조회합니다.
        return (
          <div>
            <h1>{number}</h1>
            <button
              // onClick 통해 버튼이 클릭되었을  호출할 함수를 지정합니다.
              onClick={() => {
                // this.setState 사용하여 state 새로운 값을 넣을  있습니다.
                this.setState({ number: number + 1 });
              }}
            >
              +1
            </button>
          </div>
        );
      }
    }
     
    export default Counter;

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