react - class, JSX 콜백함수에서 this

React를 사용할 때 일반적으로 DOM 요소가 생성된 후에 리스너를 추가하기 위해 addEventListener 를 호출할 필요가 없습니다.

대신 요소가 처음 렌더링될 때 리스너를 제공합니다.

ES6 class 를 이용해 요소를 정의할 때 이벤트 핸들러의 일반적인 패턴은 클래스의 메서드 형태입니다. 

 

JSX 콜백에서 this 의 의미에 대해 주의해야합니다.

자바스크립트에서 클래스 메서드는 기본적으로 bound 되지 않습니다. 만약 constructor 내부에서 

this.handleClick = this.handleClick.bind(this) 바인드를 잊은채로 onClick 에 전달하면, this 는 함수가 실제로 호출될 때 undefined 로 취급됩니다.

 

이건 React에서 정의한 동작이 아닙니다. 자바스크립트의 함수의 동작 방식 의 일부입니다.

일반적으로 onClick={this.handleClick} 처럼 () 없이 메서드를 참조하면, 그 메서드를 bind 해야합니다.

만약 bind 를 호출하는 게 귀찮은 경우 이 문제를 해결할 수 있는 두가지 방법이 있습니다.

 

1. 만약 실험 기능인 퍼블릭 클래스 필드 문법 을 사용한다면 클래스 필드를 정확히 콜백에 bind할 수 있습니다.

- 함수선언에서 화살표함수를 사용

 

2. JSX에서 이벤트에 거는 콜백함수에서 화살표함수를 사용

이경우는 바인드를 하지 않아도 되지만, 해당 컴포넌트를 렌더링 할때마다 서로 다른 콜백이 만들어진다.

. 대부분의 경우에서 크게 문제는 없습니다. 하지만 만약 콜백에서 하위 컴포넌트에 prop을 전달하는 경우, 이 컴포넌트는 큰 비용으로 다시 렌더링될 수 있습니다. 이런 종류의 성능 문제를 피하기 위해 보통

 

생성자 함수에서 바인딩하거나

클래스 필드 문법을 사용하는 걸 권장합니다.

 

https://reactjs-kr.firebaseapp.com/docs/handling-events.html