this 바인딩

this 라는 것은 어떤 클래스 안에 있는 함수를 다른 함수의 콜백으로 전달할때는 그 함수가 포함되어져있는 클래스의 정보가 사라지기 때문에 바인딩이 필요하다.

arrow function이 없었을 때는 bind 를 많이 썼다.

this.onClick = this.onClick.bind(this);
this.field.addEventListener('click', this.onClick);

arrow function을 이용한 바인딩 ✅

this.field.addEventListener('click', (event)=> this.onClick(event)); //이벤트를 추가하여 자동 바인딩시킴

멤버변수로 만들기 ✅

onClick = (event) => {..}; // onclick(){} 가 아닌 변수 형태로 만들면됨