[js] mvc 패턴을 연습해보자 -3 탭(2)

오늘의 요구사항은,

● 기본으로 추천 검색어 탭을 선택한다

 

이 역할은 TabView.js 안에 

show 메서드가 해야할 일이다.

 

먼저,

show(selectedTab) {

this.element.innerHTML = this.template.getTabList();

qsAll("li", this.element).forEach(li => {

li.className = li.dataset.tab === selectedTab ? 'active' : '';

})

super.show()

}

모든 li태그에 반복을 돌며 selectedTab과 같으면 클래스에 active를 활성화 시켜준다.

이렇게 하기 위해서는, selectedTab에 대한 정보를 어디서 들고있어야한다.

 

이는 model의 역할을 하고있는 Store.js에서 다루어야 한다.

그렇게 하기 위해서,

TabView.js 파일 안에 있는 TabType을 밖에서 써먹기 위해 export 시켜준다. 

export const TabType = {

KEYWORD: 'KEYWORD',

HISTORY: 'HISTORY'

}

그 다음 Store.js constructor 맨 마지막에 

export default class Store {

constructor(storage) {

console.log(tag, "constructor");

if (!storage) throw "no storage";

this.storage = storage;

this.searchKeyword = "";

this.searchResult = [];

this.selectedTab = TabType.KEYWORD;

}

this.selectedTab = TabType.KEYWORD;

추가시켜준다.

이제 이 것을 view에 전달해주어야한다.

 

이는 controller의 역할이다.

따라서

Controller.js 파일에 가서 render()를 살펴보자

render() {

if (this.store.searchKeyword.length > 0) {

return this.renderSearchResult();

}

this.tabView.show(this.store.selectedTab);

this.searchResultView.hide();

}

 

this.tabView.show(this.store.selectedTab);

이 부분을 통해 해당 기능을 구현할 수 있다.

 

아래는 기본으로 추천 검색어가 선택된 결과이다.

● 기본으로 추천 검색어 탭을 선택한다

오늘의 요구사항 끝~

 

-참고 인프런 김정환 "만들고 비교하며 학습하는 리액트"