만들면서 학습하는 리액트(react):준비편 - 순수JS - 006
준비편 - 순수JS
[순수JS 1] 탭2
요구사항
기본으로 추천 검색어 탭을 선택한다
구현
- TabView.js 수정
import { qs, qsAll } from "../helper.js";
...
export const TabType = {
KEYWORD: "KEYWORD",
HISTORY: "HISTORY",
}
...
export default class TabView extends View {
...
show(selectedTab) {
this.element.innerHTML = this.template.getTabList();
qsAll("li", this.element).forEach(li => {
li.className = li.dataset.tab === selectedTab ? "active" : "";
});
super.show();
}
}
- Store.js 수정
import { TabType } from './views/TabView.js';
...
export default class Store {
constructor(storage) {
...
this.searchResult = [];
this.selectedTab = TabType.KEYWORD;
}
}
- Controller.js 수정
...
export default class Controller {
...
render() {
...
}
this.tabView.show(this.store.selectedTab);
this.searchResultView.hide();
}
}