클래스 필드 문법, bind 사용, 함수형 컴포넌트 비교하기

 

같은 예제를 가지고 클래스 컴포넌트에서 bind 사용 방식과, 클래스 필드 문법 사용, 함수형 컴포넌트 사용 방식을 비교해 보자

 

1. 클래스 컴포넌트 - 생성자에 bind 사용

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 생성자에서 bind로 this 바인딩
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this); // bind로 this를 바인딩
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

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

export default MyComponent;

 

 

 

 

2. 클래스 필드 문법

import React, { Component } from 'react';

class MyComponent extends Component {
  state = { count: 0 };

  // 클래스 필드 문법으로 화살표 함수 메서드 정의
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

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

export default MyComponent;

 

여기서는 handleClick 메서드가 클래스 필드로 정의되어, 화살표 함수를 사용하여 this가 자동으로 바인딩 된다.

 

 

 

3. 함수형 컴포넌트

함수형 컴포넌트에서는 this가 필요 없고 대신 상태는 useState 훅을 사용하여 관리한다.

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <p>Count: {count}</p>
    </div>
  );
};

export default MyComponent;

handleClick 메서드는 일반 함수로 선언되며, this와 바인딩할 필요가 없다.