함수를 인자로 어딘가에 전달 할때 class 정보는 함께 전달되지 않는다.
this.onClick 에서 class 정보가 함께 전달되어져야 할 것 같지만 그렇지 않다.

export default class Field {
  constructor() {
    this.field = document.querySelector('.field');
    this.fieldRect = this.field.getBoundingClientRect();
    this.imgsArr = [];
    this.id = 0;

    this.field.addEventListener('click', **this.onClick**);
  }

onClick(event) {
    const target = event.target;
    if (target.matches('.carrot')) {
      target.style.opacity = 0;
      target.classList.add('hidden');
      **this.onItemClick && this.onItemClick('carrot');**
    }
    else if (target.matches('.bug')) {
      **this.onItemClick && this.onItemClick('bug');**
    }
  }
}

onClick 에서 **this.onItemClick** 의 this 정보가 남아있지 않게 된다. 따라서
onItemClick 이 undefined 가 된다.

JS 에서 어떤 class에 있는 함수를 누군가에게 전달 해 줄 때는 class 정보가 무시되 때문에
무시하고 싶지 않을때는 함수를 class 와 binding 해 줘야한다.

방법 1.
this.field.addEventListener('click', **this.onClick.bind(this)**);

방법 2.
arrowFunction 을 사용한다. arrow func 는 this 가 유지 된다.
this.field.addEventListener('click', (event) => **this.onClick(event)**);

방법 3.
함수를 멤버변수로 만들고 arrow func 를 가리킨다.
onClick = event => {
    const target = event.target;
    if (target.matches('.carrot')) {
      target.style.opacity = 0;
      target.classList.add('hidden');
      **this.onItemClick && this.onItemClick('carrot');**
    }
    else if (target.matches('.bug')) {
      **this.onItemClick && this.onItemClick('bug');**
    }
  }
}