화살표 함수() => {}를 사용하여 이를 올바르게 바인딩합니다.

AG Grid에서 일하는 제 역할의 일부로서 여러 가지 반복되는 문제를 보게 됩니다. 내가 여러 번 본 그러한 문제 중 하나는 이것입니다.

this.props is undefined in a callback but I know that it does have a value in my component!

이게 뭔가요 ?

이것이 쉽게 발생할 수 있는 경우의 예를 살펴보겠습니다. 다음은 클릭 이벤트 리스너를 추가한 aBar Chart에 대한 코드 섹션입니다.

이 예제는 React로 작성되었지만 Angular, Typescript 및 모든 클래스 기반 코드에서 동일한 경험을 할 것입니다.

class ChartExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        series: [
          {
            listeners: {
              nodeClick: function (event) {
                // Do something with our props
                console.log("Props are:", this.props)
              },
            },
          },
        ],        
      },
    };
  }

  render() {
    return (
      <div className="wrapper">
        <AgChartsReact options={this.state.options} />
      </div>
    );
  }
}

render(<ChartExample test={'Test Value'} />, document.querySelector('#root'));

이 코드의 핵심 부분은 리스너를 정의하는 다음 섹션입니다.

 listeners: 
  {
    nodeClick: function (event) {
        // Do something with our props
        console.log("Props are:", this.props)
    }
  }

구성 요소가 props를 수신하면 콘솔에 기록될 것으로 예상됩니다. 그러나 노드를 클릭하면 위의 코드 로그undefined가 기록됩니다. 이Plunker에서 직접 확인할 수 있습니다.

화살표 기능 수정

순전히 구문 변경처럼 보이는 것을 만들고 함수 정의를 동등한 화살표 형식으로 바꾼 다음 다시 시도하면 갑자기 소품이 콘솔에 올바르게 기록됩니다! 업데이트됨Plunker

 listeners: {
              nodeClick: (event) => {
                // props are defined
                console.log("Props are:", this.props)
              },
            },

여기서 무슨 일이 일어나고 있으며 구문(event) => {}을 사용하면 갑자기 this.props가 올바른 값을 갖게 되는 이유는 무엇입니까!?

이 화살표 기능 바인딩

이것이 작동하는 이유에 대한 짧은 대답은 기본적으로 화살표 함수가 주변 범위의 값에 바인딩this하기 때문입니다. 따라서 우리의 예에서 this는 this.props가 올바르게 정의됨을 의미하는 구성 요소 클래스에 올바르게 바인딩됩니다. 표준function을 사용할 때 정의this는 구성 요소에 바인딩되지 않고 대신 이벤트가 발생한 클래스의 값을 갖습니다.

이 주제에 대해 더 깊이 알고 싶다면 Understanding Arrow Functions in JavaScript을 추천합니다.

바인드를 사용한 대체 수정

콜백을 정의할 때 이것을 명시적으로 바인딩하여 원래 코드를 수정할 수도 있다는 점을 언급할 가치가 있습니다.

listeners: {
              nodeClick: function (event) {
                console.log("Props are:", this)                
              }.bind(this),
            },

결론

this.props 또는 그 문제에 대해 this.anyClassProp 가 특정 값을 포함할 것으로 예상할 때 정의되지 않았다는 사실에 놀랐다면 this 를 사용하고 있는 컨텍스트를 확인할 수 있습니다. 단순히 함수 정의를 화살표 함수로 업데이트하면 문제가 해결될 수 있습니다.

이러한 문제의 결과로 사용자의 혼란을 피하기 위해 기본적으로 화살표 기능을 사용하도록 모든 AG Grid 예제를 크게 업데이트했습니다.