React-클래스형 컴포넌트

클래스 컴포넌트로 카운트 만들어 보기**

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  }
 
  state = {
    counter: 0
  };
  
  handleIncrease () {
    this.setState({
      counter: this.state.counter + 1
      });
  };

  handleDecrease () {
    this.setState({
      counter: this.state.counter - 1
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleIncrease}>+1</button>
        <button onClick={this.handleDecrease}>-1</button>
      </div>
    );
  }
}

export default Counter;

• 클래스 컴포넌트는 필수적으로 Class를 사용하고 Component로 상속을 받아야 한다.

• 클래스형 컴포넌트에서 상태를 관리 할 때에는 state 사용.
  state 를 선언 할 때에는 constructor 내부에서 this.state 를 설정해주시면 된다.

• this.setState()는 상태를 변경해줄 때 주로 사용하는데 this.setState 를 사용 할 때는 위 코드 처럼 객체 안에 업데이트 하고 싶은 값을 넣어서 호출하면 된다.

• this.setState 라는 함수를 사용했을 때 this 는 컴포넌트 인스턴스를 가르켜야 하는데, 그냥 사용 했을 땐 this가 컴포넌트 인스턴스를 가르키지 않기 때문에 위에 코드처럼 binding을 해주거나 화살표 함수로 변경 해주어야 한다.

• render() 메소드를 써서 JSX문법으로 컴포넌트를 출력한다.
  물론 여기서도 class 이기때문에 state를 호출 시에는 this.props.counter처럼 적어줘야 하고,
  함수는 this.handleIncrease 식으로 작성해줘야한다!.