클래스 필드 문법과 화살표 함수의 차이

클래스 필드 문법에서 메서드를 정의할 때, 내부적으로 화살표 함수와 유사하게 동작하지만, 둘 사이에는 약간의 차이가 있다.

 

1. 정의 위치

• 화살표 함수는 클래스 내부 메서드로 정의되더라도, 명시적으로 선언된 함수 이다.
• 클래스 필드 문법은 메서드를 클래스의 속성으로 정의한다.

예시 : 화살표 함수

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = () => {
      console.log(this.state.count); // 화살표 함수는 this가 자동 고정
    };
  }
}

 

예시 : 클래스 필드 문법

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this.state.count); // 클래스 필드 문법도 this가 자동 고정
  };
}

 

결과 적으로 두 방식 모두 메서드 내부에서 this가 항상 현재 컴포넌트 인스턴스를 가르키도록 동작한다.

 

2. 실행 컨텍스트 차이

클래스 필드 문법으로 작성된 메서드는 인스턴스의 속성으로 저장된다.

반면 일반적인 화살표 함수는 constructor에서 정의되기 때문에 약간의 메모리 차이가 있을 수 있다.

 

예시

// 클래스 필드 문법
class A {
  method = () => {}; // 클래스 필드: 인스턴스의 속성으로 저장
}

// 화살표 함수 (생성자에서 정의)
class B {
  constructor() {
    this.method = () => {}; // 생성자에서 정의: 같은 동작
  }
}

 

 

 

예제 코드로 비교하기

class Example {
// 클래스 필드 문법
  myFieldMethod = () => {
    console.log("클래스 필드 문법", this);
  };

  constructor() {
// constructor 내부의 화살표 함수
this.myConstructorMethod = () => {
      console.log("constructor에서 선언된 화살표 함수", this);
    };
  }
}

const instance = new Example();
instance.myFieldMethod();// "클래스 필드 문법", this = instance
instance.myConstructorMethod();// "constructor에서 선언된 화살표 함수", this = instance

 

 

결론

비슷한점 :

• 둘 다 this가 자동으로 고정되며 React에서 동일한 목적(이벤트 핸들러 정의 등)으로 사용된다.

다른 점 :

• 클래스 필드 문법은 constructor 없이도 메서드를 선언할 수 있어서 더 간단하다.
• 화살표 함수는 생성자에서 정의하는 방식으로 사용된다.

 

정리

화살표 함수 :

• constructor에 선언한 것은 전부 화살표 함수이다.
• 형태 : this.methodName = () => {...}
• this는해당 인스턴스에 바인딩된다.

클래스 필드 문법 :

• constructor 바깥에서 선언된 형태
• 형태 : methodName = () => {...}
• 내부적으로 화살표 함수처럼 작동하지만, 클래스 문법 일부로 도임된 것이다.