inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

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

307

피그마 천재

작성한 질문수 6

0

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

2

네카라

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

this.store.searchKeyword = "";

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

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

4

김정환

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

네카라님 감사합니다.

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

1

112

2

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

1

101

2

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

0

239

2

mvc 패턴 질문

0

209

2

Cannot read properties of undefined (reading 'props')

0

288

2

delegate, emit 필요한 이유

0

206

2

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

1

275

1

localhost:8080 접속 불가

1

296

1

최근검색어 3 풀이에서

1

195

1

import 문제

1

246

1

자동변환 관련

1

213

1

sort() 질문 드립니다.

1

312

2

reset 시점에 searchResult 빈 배열로 update

2

320

2

Button에 Onclick사용

1

259

1

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

1

481

2

node 20이상 쓸때 꿀팁

4

775

3

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

1

306

1

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

1

232

1

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

1

446

1

on 메서드 eventName 문의

1

268

1

import에 관해서 질문드립니다

1

261

1

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

1

263

1

componentDidMount에서 getKeywordList()를 하는 이유

1

247

1

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

1

283

1