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

추천검색어와 최근 검색어가 있는 '탭'을 만들어보자.

이번 페이지의 요구사항은

● 추천 검색어, 최근 검색어 탭이 검색폼 아래 위치한다

 

index.html에 

<div class="content">

<div id="tab-view"></div>

<div id="search-result-view"></div>

<div id="tab-view"></div>

추가해주고,

 

TapView.js 파일을 만들고 초기 셋팅을 해준다.

 

const TabType = {

KEYWORD: 'KEYWORD',

HISTORY: 'HISTORY'

}

const TabLabel = {

[TabType.KEYWORD]: '추천 검색어',

[TabType.HISTORY]: '최근 검색어',

}

탭타입과 탭라벨을 만들어주고,

 

export default class TabView extends View {

constructor() {

super(qs("tab-view"));

this.template = new Template()

}

show() {

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

super.show()

}

}

super를 활용하여 index.html에 있는 <div id="tab-view"></div>

이 것을 elements로써 활용해준다.

(자세한건 View.js 파일에...)

 

그 후 템플릿이라는 클래스를 새로 만들어주고,

show메서드를 이용하여

View.js 안에 있는 show 메서드로 오버라이딩 해준다.

 

class Template {

getTabList() {

return `

<ul class="tabs">

${Object.values(TabType)

.map(tabType => ({ tabType, tabLabel: TabLabel[tabType]}))

.map(this._getTab)

.join('')

}

</ul>

`

}

 

여기서 Object.values란

특정 객체를 대상으로 value값만 뽑아서 배열로 반환하는 메서드이다.

콘솔창에 찍으면 다음과 같은 결과가 도출된다.

 

그 후 map을 돌려보겠다.

그 후에 다시 map을 돌릴건데,

그 전에 _getTab은 다음과 같다.

_getTab({tabType, tabLabel}) {

return `

<li data-tab="${tabType}">

${tabLabel}

</li>

`

}

이를 활용해 map을 돌려주면,

새로 생성된 객체 하나하나에 HTML코드를 생성할 수 있다.

 

그렇게 하면,

최종 결과물을 완성할 수 있고,

● 추천 검색어, 최근 검색어 탭이 검색폼 아래 위치한다

요구사항을 충족시킬 수 있다.

 

 

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