클래스형 컴포넌트와 클래스 필드 문법

 

클래스형 컴포넌트

아래 예제는 버튼을 클릭하면 숫자를 증가시키는 기능을 제공한다.

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement.bind(this)}>Increment</button>
      </div>
    );
  }
}

export default Counter;

 

 

클래스 필드 문법을 사용한 형태

클래스 필드 문법은 constructor와 bind를 사용하지 않고 클래스의 메서드를 정의하는 방식이다. 이를 사용하면 코드가 더 간결해진다.

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default Counter;

 

 

차이점

1. constructor 생략

- 클래스 필드 문법에서는 state를 constructor 없이 바로 정의할 수 있다.

2. 메서드 바인딩 불필요

- 메서드 handleIncrement를 화살표 함수로 정의하면 this가 자동으로 바인딩된다. bind 메서드를 사용할 필요가 없다.