쇼핑몰 검색 페이지 구현_순수 JS_4

 

3. 탭 구현_1

: 추천 검색어, 최근 검색어 탭이 검색 폼 아래 위치!!

 

우선 html 코드는

form 태그와 search-result 사이에 추천 검색어와 최근 검색어를 li 태그로 작성해주었다.

이렇게!!

 

---

3. 탭 구현_2

: 기본으로 추천 검색어 탭을 선택

 

 

먼저 TabView.js 파일을 만들어 주었당!!

그리고 다른 view들과 마찬가지로 기본적인 내용들을 작성해주었고

 

흠.. 그리고

 

이렇게 추천 검색어에 active 클래스가 생기도록 해줄 것이다!!!

 

 

그래서 아래처럼 setActiveTab이라는 함수를 만들어 줬다.

tabName을 인자로 받고 element의 li를 찾는다!! 이것을 Array로 만들고!! (왜지....)

forEach 함수를 통해 li의 className에다가 active 문자열을 추가해주면 되는데, tabName이 같은 경우에만 해준다!

아닌 경우는 빈 문자열로ㅎㅎ

 

+) Array.from() 은 문자열 등 유사 배열(Array-like) 객체를 배열로 만들어주는 메서드이다...

+) forEach 함수도 배열을 순회할 때 사용!! 

 

 

이제.. Maincontroller 에서 TabView를 import 해주고 init 함수에서 TabView를 setup했다! selector는 id인 tabs로!!

 

 

그리고

 

탭은 추천 검색어나 최근 검색어를 선택할 수 있는데 controller에서 어떤 탭을 선택했는지 내부적으로 가지고 있기 위해 selectedTab이라는 변수를 하나 만들어 주었고 디폴트로 추천 검색어를 넣어줌!

 

그리고 TabView의 setActiveTab함수를 호출하면 되는데.... 여기서!!!!

 

 

controller에는 view가 Formview, Resultview, Tabview 이렇게 세개나 import 해와서 그려주기 때문에

이것을 한 번에 그려주기 위해!!!

아래처럼 renderView 함수를 작성해준다.

 

 

init에서는 renderView를 한 번만 호출하면 controller가 가지고 있는 view들을 모두 그릴 수 있도록한다!!

 

renderView 함수에서 TabView를 그리도록 해주고, 처음에는 ResultView를 hide로 숨김처리 해주었다.

 

 

 

이러면!!

짜잔

이렇게 처음에 추천 검색어가 선택되어있고... renderView 까지 나오는 것을 확인할 수 있다.

 

 

---

 

 

3. 탭 구현_3

: 각 탭을 클릭하면 탭 아래 내용이 변경된다!

 

추천 검색어 탭과 최근 검색어 탭을 각각 클릭하면 그게 알맞은 내용으로 화면이 바뀌도록 구현할 것이다.

 

 

우선 TabView의 setup함수에 bindClick을 작성해주고

 

bindClick함수는 이렇게 구현을 하였는데... 자..

탭들은 li로 이루어져있기 때문에 li를 순회하면서 만들면 된다.

그래서 위에서 쓴 것처럼 Array.from과 forEach를 통해 li에 하나 하나 접근하여 객체로 만드는데

addEventListener로 'click' 이벤트를 listen한다..! 그리고 그 click 이벤트가 발생했을 때, onClick 함수를 호출하고 인자로는 해당 탭의 innerHTMML을 넘기는 것이지!!!!! 후...

 

그러면 onClick 함수에서는 tabName을 인자로 받을 것이고 여기서 setActiveTab함수를 호출하기!!!

 

여기서 또 한 가지 중요한 점은

 

탭이 change 되었다는 것을 controller에게 알려야 한다. TabView는 탭만 관리하는 것이고 탭 아래의 다른 내용은 신경쓰지 않기 때문이다!!!!

 

따라서 탭이 변경되었다는 내용을 controller에게 알리기 위해 @change 이벤트를 emit해주고 tabName을 전달해준다.

 

 

이제 Maincontroller에서는 @change라는 이벤트를 수신해야 하기 때문에

Maincontroller의 TabView.setup에서 @change 이벤트가 발생했을 때, onChangeTab이라는 함수를 호출하게 하였고 인자로는 이벤트의 tabName을 전달해주었다.

그리고 onChangeTab 함수에는 우선 되는지 확인하기 위해 debugger를 걸어줌!!

 

자 이제 확인해보면...

 

 

이렇게 추천 검색어를 클릭한 경우에는 tabName이 추천 검색어로 debugger가 걸렸고

 

최근 검색어를 클릭하면 tabName이 최근 검색어로 debugger가 걸린 것을 확인할 수 있다!!!

 

후...흐아....