콜백 함수 메서드 등록

export default function CityList({ $app, intialState, handleLoadMore }) {
  this.state = intialState;
  this.$target = document.createElement("div");
  this.$target.className = "city-list";
  this.handleLoadMore = handleLoadMore;
  $app.appendChild(this.$target);
  this.template = () => {
    let temp = `<div class="city-items-container">`;
    if (this.state) {
      this.state.cities.forEach((elm) => {
        temp += `
        <div class="city-item" id=${elm.id}>
          <img src=${elm.image}></img>
          <div class="city-item-info">${elm.city},${elm.country}</div>
          <div class="city-item-score">❤️${elm.total}</div>
        </div>
        `;
      });
    }
    temp += `</div>`;
    return temp;
  };
  this.render = () => {
    this.$target.innerHTML = this.template();
    if (!this.state.isEnd) {
      const $loadMoreBtn = document.createElement("button");
      $loadMoreBtn.className = "add-items-btn";
      $loadMoreBtn.textContent = "더보기";

      this.$target.appendChild($loadMoreBtn);
      $loadMoreBtn.addEventListener("click", this.handleLoadMore);
    }
  };
  this.setState = (newState) => {
    this.state = newState;
    this.render();
  };
  this.render();
}

이 코드에서

this.handleLoadMore=handleLoadMore;

이부분이 왜 필요한지 이해가 되지 않아서 질문드립니다.
콜백 함수를 이벤트 리스너에 등록 해도 되지 않나요?

this로 메서드 등록해서 사용하는 이유가 궁금합니다.

추가적으로 바닐라 js 로 spa 구현하는 개념들이 매우 어렵고 복잡하게 느껴지는데
바닐라 js로 spa를 구현해보는 프로젝트를 해보고 프레임워크로 넘어가야 하는것일까요..