View와 Controller의 관계

왜 View의 reset 내용을 Controller로 보내는가?

MVC 패턴에서 View는 단순히 사용자 인터페이스를 표현하고 사용자의 입력을 감지하는 역할을 합니다. 사용자의 액션에 대한 실제 로직 처리는 Controller가 담당합니다. 이렇게 함으로써, View와 비즈니스 로직을 분리하여 View를 다양한 환경에서 재사용할 수 있게 하고, 애플리케이션 로직을 한 곳에 모아 관리하기 쉽게 합니다.

 

Controller는 사용자의 입력과 상호작용을 받아들여서, 그에 따라 필요한 데이터 처리나 서버 통신 등의 작업을 담당합니다. MVC 패턴에서 Controller는 Model과 View 사이의 중재자 역할을 하며, 두 구성 요소 사이의 데이터 흐름을 관리합니다.

---

예시를 통한 서로의 연결의 필요성 및 과정 이해

아래의 SearchFromView.js에서

click 을 통해서 handleReset 함수 호출을 하게하여. 관련 리셋 내용을 Controller고 보내줌.

막상. handleReset의 호출은 button의 click 이벤트 발생 때나, 검색 폼창의 단어가 다시 0이 됬을 때 하도록 하지만...

 

reset이 됬다는 데이터를 서버와 수신할 Controller.js에 보냄.

 

on 함수가 eventListener니까

커스텀이벤트를 emit을 통해 발생시켜줘야 구독하는 곳(Controller)에서

on함수로 eventListener메소드를 사용하여 받아내서 사용

 

---

객체 전체를 this.searchFormView = searchFormView;로 받아 왔다고 해서 자동적으로 연결이 되는게 아님.

 

this.searchFormView = searchFormView;는 단지 객체 참조의 할당일 뿐이며, 이벤트 연결과 메서드 호출의 자동화는 이루어지지 않습니다. 이벤트 연결과 메서드 호출은 명시적으로 subscribeViewEvents와 같은 메서드를 통해 설정되어야 합니다.

---

Controller.js

export default class Controller {

  constructor(store, { searchFormView }) {

    console.log(tag, "constructor");

    this.store = store;

    this.searchFormView = searchFormView;

    this.subscribeViewEvents();

  }

  subscribeViewEvents() {

    this.searchFormView.on("@submit", (event) =>

      this.search(event.detail.value)

    );

    this.searchFormView.on("@reset", () => this.reset());

  }

  search(searchKeyword) {

    console.log(tag, "search", searchKeyword);

  }

  reset() {

    console.log(tag, "reset");

  }

}

---

 

SearchFromView.js

 on(this.resetElement, "click", () => this.handleReset());

  }

  handleKeyup() {

    const { value } = this.inputElement;

    this.showResetButton(value.length > 0);

    if (value.length <= 0) {

      this.handleReset();

    }

  }

  handleSubmit(event) {

    event.preventDefault();

    const { value } = this.inputElement;

    this.emit("@submit", { value });

  }

  handleReset() {

    this.emit("@reset");

  }

}