화살표함수의 this 바인딩

화살표 함수는 자신의 this, arguments, super, new.target을 바인딩하지 않습니다. 대신, 화살표 함수는 자신이 생성된 스코프의 해당 값을 상속받습니다.

function myFunction() {
  console.log(this);
}

const obj = {
  myFunction: myFunction,
};

obj.myFunction(); // obj를 this로 바인딩

위 예제에서 myFunction은 obj 객체에 메서드로 할당되었으므로, obj 객체를 this로 바인딩합니다. 하지만, 함수가 다른 함수 내부에서 호출되거나 다른 곳으로 전달되면 this 바인딩이 유지되지 않을 수 있습니다.

그러나 화살표 함수를 사용하면 이러한 문제를 해결할 수 있습니다

const myArrowFunction = () => {
  console.log(this);
};

const obj = {
  myArrowFunction: myArrowFunction,
};

obj.myArrowFunction(); 
// 화살표 함수는 자신의 this 바인딩이 없으므로 외부 스코프인 obj를 상속

위 예제에서 myArrowFunction은 화살표 함수로 정의되었기 때문에 자신의 this 바인딩이 없습니다. 그래서 외부 스코프인 obj 객체의 myArrowFunction 메서드 내부에서 호출되더라도, this는 obj를 상속받아 외부 스코프의 this를 그대로 사용하게 됩니다.

따라서 화살표 함수를 사용하면 함수의 this 바인딩을 고려할 필요가 없어지므로, 특히 콜백 함수 등에서 유용하게 사용됩니다. 이러한 특성 때문에 화살표 함수를 JSX 속성에 사용하면 react/jsx-no-bind 규칙을 위반하지 않게 됩니다.