inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[React 1부] 만들고 비교하며 학습하는 React

[순수JS 1] 검색폼 4(풀이)

emit함수 질문있습니다.

280

당황한 노새

작성한 질문수 12

1

    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.기존에 등록된 이벤트이므로 등록된 함수내용 실행.

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

emit함수질문 react MVC

답변 1

4

김정환

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

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

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

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

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

리액트 1,2부 이후 후속 강의나 준비 중인 다른 강의가 있으신가요?

1

113

2

super.show() 호출하는 이유가 궁금합니다.

1

102

2

class와 constructor를 이용한 객체 지향 프로그래밍

0

240

2

mvc 패턴 질문

0

211

2

Cannot read properties of undefined (reading 'props')

0

290

2

delegate, emit 필요한 이유

0

206

2

어떤거를 먼저 들어야 하는지 도와주세요

1

275

1

localhost:8080 접속 불가

1

296

1

최근검색어 3 풀이에서

1

195

1

import 문제

1

247

1

자동변환 관련

1

213

1

sort() 질문 드립니다.

1

312

2

reset 시점에 searchResult 빈 배열로 update

2

321

2

Button에 Onclick사용

1

261

1

npx lite-server error 확인 요청드립니다.

1

482

2

node 20이상 쓸때 꿀팁

4

779

3

디버깅 관련질문이 있습니다.

1

309

1

[순수JS2]탭 3(풀이) 질문있습니다.

1

233

1

추상화를 어떻게 받아들이면 될까요??

1

446

1

on 메서드 eventName 문의

1

268

1

import에 관해서 질문드립니다

1

262

1

view.js의 on 메소드에 대해 질문드립니다

1

263

1

componentDidMount에서 getKeywordList()를 하는 이유

1

248

1

[순수JS1]검색폼2_git branch 이동관련

1

284

1