emit함수 질문있습니다.

Question

    hadleSubmit(e){
        e.preventDefault();
        console.log(tag,"handleSubmit");
        const {value} = this.inputElement;
        this.emit("@submit",{value})
   }

이렇게 해당 컴포넌트에 emit에 @submit 인자를 넣어서 실행시킨 것 까지는 이해했는데요.

  //어떻게 구독한거죠???
  subscirbeViewEvents(){
    this.searchFormView.on('@submit',event=>this.search(event.detail.value)).on("@reset",()=>{this.reset()});
 }

어떻게 구독하고있는건지 모르겠습니다. @submit은 어디에 저장되어있던건가요?;;

여러가지 검색해보고 고민한 결과로는..

1.handleSubmit 내부의 emit은 단지 이벤트 네임을 전달받아 커스텀이벤트를 만들고, 만드는 즉시 이벤트를 실행.

2. 컨트롤러에서 생성자가 subscirbeViewEvents 를 실행시키는데, 그 때에 이벤트리스너를 등록하는 개념이므로, 사실상 어떤 x라는 이벤트가 터지면 이렇게 해라. 라는 이벤트 등록을 위한 함수.

3.다시말해, 2번 시점에 이미 해당 이벤트는 등록되어있는것

4.handleSubmit내부에서 emit함수는 커스텀이벤트를 만들고 만든 즉시 실행했음

5.기존에 등록된 이벤트이므로 등록된 함수내용 실행.

이게 적절한 이해인지 궁금합니다. (사실 질문내용을 작성 하면서 대략적인 이해가 된거 같기도합니다;;;)

Answer

어느 정도 이해하고 계신것 같습니다. 몇 가지 용어가 좀 불분명해 개념을 확실히 설명드릴 필요가 있을 것 같습니다.

subscribeViewEvents()는 뷰에서 발생할 이벤트를 구독하는 함수입니다. 이미 함수 이름을 보면 알 수 있죠. 뷰의 on()이 실제로 이벤트 구독을 하는 함수인데요. 구독이라는 것은 이벤트가 발생한 시점에 무언가를 도록 하는 것이죠.

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

이 문장은 @submit이란 이벤트가 발생했을 때 어떤 함수를 실행하도록 합니다. @submit 이벤트를 구독하고 있다가 이벤트가 발생하면 search()를 실행하는 셈이죠.

이 이벤트는 handleSubmit()에서 발생하는데 실제로 emit() 함수가 이벤트를 발행합니다. 코드를 따라가면 View 함수인데요 커스텀 이벤트를 발생하고 있어요.

당황한 노새

emit함수 질문있습니다.

이 글과 비슷한 Q&A

javascript 공부없이 바로 react native 배워도 되나요?

타입스크립트 테스트코드 작성

리액트 셀렉트 박스 질문드려요

onSnapshot 함수 unsubscribe 에 대해서 질문이 있습니다