js 검색폼 만들기(2)[form 새로고침 막기, submit으로 다른객체에 값 전달]

form의 새로고침을 막아서 값이 지워지는 것 막기

bindEvents() {

    on(this.inputElement, "keyup", () => this.handleKeyup());

    on(this.element, "submit", event => this.handleSubmit(event))

  }

 

handleSubmit(event){

    event.preventDefault();

    console.log(tag, 'handleSubmit')

  }

 

form이 제출될 때 event.preventDefault();를 사용하지 않으면, 폼의 기본 동작인 페이지 새로고침이 발생합니다. 이 때문에 다음과 같은 일이 발생합니다:

1. 페이지 새로고침: 폼 제출은 기본적으로 페이지를 새로고침하거나 다른 페이지로 이동시킵니다. 이 과정에서 현재 페이지의 상태(예: 콘솔에 출력된 로그)가 소실됩니다.
2. 콘솔 로그의 빠른 소실: handleSubmit 함수 내의 console.log가 실행되기는 하지만, 페이지가 거의 즉시 새로고침되기 때문에 콘솔에 출력된 로그를 볼 수 없습니다

 

---

 submit 이벤트를 통해 값을 다른 객체로 연결하는 과정

submit을 시발점으로 @submit이라는 하위 이벤트가 값을 어딘가로 제출하는 똑같은 역할을 해줘서 값을 다른 객체에 전달 후, 출력

 

SearchFormView의 메소드1

bindEvents() {

    on(this.inputElement, "keyup", () => this.handleKeyup());

    on(this.element, "submit", event => this.handleSubmit(event))

  }

 

• 이벤트 정보 접근: event 객체는 이벤트와 관련된 다양한 정보를 포함합니다. 예를 들어, 어떤 요소에서 이벤트가 발생했는지, 이벤트의 유형 등입니다.

---

SearchFormView의 메소드2

 

handleSubmit(event){

    event.preventDefault();

    console.log(tag, 'handleSubmit');

    const {value} = this.inputElement;

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

  }

 

• 폼 데이터 접근: 폼 제출 이벤트에서 event 객체는 폼과 관련된 데이터에 직접 접근하지는 않습니다. 폼 내의 데이터, 예를 들어 사용자가 입력한 값은 별도로 접근해야 합니다. 이 경우, const {value} = this.inputElement; 라인은 inputElement (텍스트 입력 필드)의 현재 값을 가져와서 value 변수에 저장합니다

여기서 this.inputElement의 this는 이 메서드가 속한 인스턴스, 즉 SearchFormView를 가리키며,

event 객체는 이 메서드에 전달된 이벤트 매개변수를 의미합니다.

---

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));

  }

  search(keyword){

    console.log(tag, keyword);

  }

}

 

"@submit": 이는 발생시키는 이벤트의 이름입니다. 여기서 @ 기호는 일반적인 이벤트와 구분하기 위해 사용된 것으로 보입니다. 이는 특정한 이벤트 리스너가 이 이벤트를 구독하고 있다는 것을 나타낼 수 있습니다.  

 

여기서 on은 제이쿼리를 사용했다고 강사님이 말씀하셨는데 on은 보통 addeventListenr의 더 범위가 넓은 같은 동작이라 알고 있다. 

---

 

전체 process 요약

submit 하게 되면  handleSubmit() 을 불러와서 전체 동작을 저장. 객체 안의 입력 값만을 구조분해 할당으로 데려와서 다시 @submit 이벤트 수행. 계속 이벤트를 저장해두었다가 Controller가 그 이벤트(@submit)를 받게해서 검색어 값을 그대로 받아낸 뒤 search(keyword)로 검색폼의 값 출력.