reset 이벤트에 커스텀 이벤트를 연결하는 이유가 무엇인가요?

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

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

작성

242

1234

x 버튼 누르면 검색어 지우는건 굳이 이벤트 emit subscribe 안해도 이미 html 버튼의 타입이 reset이라
x버튼 누르면 검색어가 사라지는데요

        <button type="reset" class="btn-reset"></button>

굳이 커스텀 이벤트를 발생시키고

    bindEvents() {
        on(this.inputElement, "keyup", () => this.handleKeyup());
        on(this.element, "submit", (event) => this.handleSubmit(event));

        // reset 이벤트에 대해 this.handleReset() 실행
        this.on("reset", () => this.handleReset());
    }

    handleReset() {
        console.log("reset 이벤트 발생");
        this.emit("@reset");
   }

@reset 이벤트에 해 reset() 를 연결해서 this.store.searchKeyword = ""; 를 해주는 이유가 있나요?

ex)

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

  reset() {
    console.log(tag, "reset");
    this.store.searchKeyword = "";
}

react MVC

답변 1

네카라

btn의 reset type은 단순히 input의 value를 없애는것으로 알고있습니다.

this.store.searchKeyword = "";

위의 코드는 input의 value를 없애는것이 목적이 아니라 플로우가 render()함수로 가서 searchResultView의 hide()로 가게 됩니다. 따라서#search-result-view의 display 속성을 none으로 바꾸는데 있습니다!

혹시 틀린게 있으면 지적해주세요🙏

김정환

지식공유자

네 맞습니다. reset=type은 브라우져가 관리하는 input의 상태에만 영향을 미칩니다. 별도로 상태관리를 하는데 그게 searchKeyword라고 보시면되요. 이 값에 따라 다른 뷰를 제어할 목적으로 커스텀 이벤트를 사용했습니다.

네카라님 감사합니다.

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

reset 이벤트에 커스텀 이벤트를 연결하는 이유가 무엇인가요?