만들면서 학습하는 리액트(react):준비편 - 순수JS - 012
준비편 - 순수JS
[순수JS 1] 최근 검색어 2
요구사항
목록에서 x 버튼을 클릭하면 선택된 검색어가 목록에서 삭제된다
구현
- historyListView 수정
import { delegate, formatRelativeDate, qs } from "../helpers.js";
...
export default class HistoryListView extends KeywordListView {
...
bindEvents() {
delegate(this.element, "click", "button.btn-remove", (event) => this.handleClickRemoveButton(event));
super.bindEvents();
}
handleClickRemoveButton(event) {
console.log(tag, "handleClickRemoveButton", event.target);
const value = event.target.parentElement.dataset.keyword;
this.emit("@remove", { value });
}
}
- Store.js 수정
...
export default class Store {
...
}
removeHistory(keyword) {
this.storage.historyData = this.storage.historyData.filter(history => history.keyword !== keyword);
}
}
- Controller 수정
...
export default class Controller {
...
subscribeViewEvents() {
...
this.historyListView
.on("@click", (event) => this.search(event.detail.value));
.on("@remove", (event) => this.removeHistory(event.detail.value));
}
...
removeHistory(keyword) {
this.store.removeHistory(keyword);
this.render();
}