생성자 없이 React에서 'this'를 바인딩하는 방법

이 게시물은 원래 my blog 에 있었습니다.
this React에서 현재 구성 요소에 대한 참조입니다. 일반적으로 React의 this는 기본 제공 메서드에 바인딩되어 있으므로 상태를 업데이트하거나 양식에서 이벤트 핸들러를 사용하려는 경우 다음과 같이 할 수 있습니다.

<input type="text" ref={this.someInput} required placeholder="This is a Method" defaultValue={getSomeMethod()}/>

여기서 this.someInput는 렌더링 중인 React 구성 요소에 상태를 전달합니다.

그러나 불행하게도 React는 사용자 지정 메서드에 자동 바인딩되지 않습니다this. 즉, 일반적인 JavaScript로는 할 수 없는 일부 입력을 받아 DOM을 조작하려는 경우 원하는 DOM 조작을 수행하기 위해 ref를 생성합니다.

그러나 React는 자동 바인딩되지 않기 때문에this 다음 코드는 기록될 때 undefined를 출력합니다.

someInput = React.createRef();
  renderSomeInput (event) {
    event.preventDefault();
    const someFunction = this.someInput.current.value;
    console.log(this);
  }

이를 방지하기 위해 constructor 함수를 사용하여 구성 요소를 렌더링하거나 원하는 상태를 얻을 수 있습니다.

class SomeCompenent extends React.Component {
   constructor() {
    super();
    this.renderSomeInput.bind(this);
   }
}

이것은 구성 요소에서 ref를 렌더링하는 적절한 방법이지만 하나의 구성 요소에 여러 사용자 지정 메서드를 바인딩하려면 어떻게 해야 합니까? 꽤 지저분해질텐데...

class SomeCompenent extends React.Component {
   constructor() {
    super();
    this.renderSomeInput.bind(this);
    this.renderSomeInput.bind(this);
    this.renderSomeInput.bind(this);
    this.renderSomeInput.bind(this);
   }
}

당신은 아이디어를 얻습니다.

대신 화살표 함수에 메서드를 할당하여 메서드를 선언함으로써 사용자 지정 React 메서드에 바인딩this할 수 있습니다.

class SomeCompenent extends React.Component {

someInput = React.createRef();
  renderSomeInput = (event) =>  {
    event.preventDefault();
    const someFunction = this.someInput.current.value;
    console.log(this);
  }
}

그러면 this의 값을 SomeComponent 구성 요소에 바인딩할 수 있습니다.

도움이 되었기를 바랍니다!

ES6는 우리에게 클래스와 생성자를 주었고 React는 그것들을 바로 활용했습니다. 항상 생성자가 필요한 것은 아니며 생성자를 사용할 때와 사용하지 않을 때를 아는 데 도움이 됩니다.