각 탭을 클릭할때 active class 변화 책임

각 탭을 클릭할때 탭의 active class 변화의 책임이 TabView.js에 있다고 생각해서 TabView클래스 안에서 처리하도록 했습니다.

선택된Tab의 상태를 Controller에게 알리기 전에 View에서 선택된 Tab을 render를 하는것이 MVC 패턴에서 어긋나는 부분인가요?

아래 코드 : 탭상태변화를 바로 View에 반영하고 이벤트발생

  // ✨
  bindEvents() {
    this.element.addEventListener("click", this.handleTabClick.bind(this));
  }
  // ✨
  handleTabClick(e) {
    this.show(e.target.dataset.tab);
    this.emit("@tabChanged", { tab: e.target.dataset.tab });
    e.stopPropagation();
  }

전체코드

export default class TabView extends View {
  constructor() {
    console.log(tag, "constructor");
    super(qs("#tab-view"));
    this.template = new Template();
    // TODO
    this.bindEvents();
  }
  // ✨
  bindEvents() {
    this.element.addEventListener("click", this.handleTabClick.bind(this));
  }
  // ✨
  handleTabClick(e) {
    this.show(e.target.dataset.tab);
    this.emit("@tabChanged", { tab: e.target.dataset.tab });
    e.stopPropagation();
  }

  show(selectedTab) {
    this.element.innerHTML = this.template.getTabList();
    qsAll("li", this.element).forEach((li) => {
      li.className = li.dataset.tab == selectedTab ? "active" : "";
    });
    super.show();
  }
  // this가 이벤트 객체로 바인딩 되었다.
  // this --- e.currentTarget
  // this --- TabView
}

인프런 커뮤니티 질문&답변