[JS] 탭메뉴를 만드는 두 가지 방법 (반복문, 이벤트 버블링)

 

 

탭 메뉴를 만드는 두가지 방법에 대한 강의 내용 정리하기.
처음에는 흐름대로 코드를 짜고 반복문을 활용해서 리팩토링한다음
이벤트버블링 개념을 활용해 이벤트리스너를 줄여 최적화하는 법을 배웠다.

 

 

 

 

📌 탭메뉴 만들기

const tabButton = $('.tab-button');
const tabContent = $('.tab-Content');
tabButton.eq(0).click(function(){
  tabButton.removeClass('active');
  tabContent.removeClass('show');
  tabButton.eq(0).addClass('active');
  tabContent.eq(0).addClass('show');
});

이렇게 코드를 만들면, .eq(0) 자리에 각 버튼 순서에 해당하는 숫자를 넣어서 코드를 줄줄 복붙 해주어야 한다.

이렇게 같은 코드가 반복되는 경우, 반복문을 사용할 수 있다.

 

 

 

 

📌 반복문으로 탭메뉴 리팩토링

const tabButton = $('.tab-button');
const tabContent = $('.tab-Content');
for (let i = 0; i < tabButton.length; i++) {
  tabButton.eq(i).click(function(){
    tabButton.removeClass('active');
    tabContent.removeClass('show');
    tabButton.eq(i).addClass('active');
    tabContent.eq(i).addClass('show');
  });
};

코드를 반복문 안에 넣어주고
필터링함수 .eq(0)에 들어가는 숫자는 i로 바꿔주면
i가 탭버튼의 length만큼 반복되므로
이 코드묶음 하나로 탭버튼을 동작하게 한다.

 

 

 

 

📌 이벤트리스너를 줄여보기

💡 미리 알아야 할 개념 : 이벤트 버블링

어떤 HTML 태그에 이벤트가 발생하면, 그 태그의 모든 상위요소에 같이 이벤트가 발생한다.
이 개념에서 파생되는 몇가지 메소드가 있다.

tabButton.click(function(event){
  event.target;
  // 실제로 이벤트가 발생한 요소만 잡아준다
  event.currentTarget;
  // 이벤트리스너를 걸어놓은 요소
  event.preventDefault();
  // 이벤트 발생시 나타나는 기본 동작을 막아준다
  event.stopPropagation();
  // 이벤트가 발생한 상위요소에 중복으로 이벤트가 발생하는 것을 막아준다
});

event.target; 을 활용해서 리팩토링해보면

const tabList = $('.tab-list');
const tabButton = $('.tab-button');
const tabContent = $('.tab-content');
for (let i = 0; i < tabButton.length; i++) {
  tabButton.click(function(event){
    if (event.target == document.querySelectorAll('.tab-button')[i]) {
      openTab(i)
    };
  });
};
function openTab(i) {
    tabButton.removeClass('active');
    tabContent.removeClass('show');
    tabButton.eq(i).addClass('active');
    tabContent.eq(i).addClass('show');
};

요렇게 되는 것이다.
주의할 점은 .target 메소드는 바닐라 자바스크립트 문법이기때문에, 제이쿼리 문법과 같이 if 문 조건식에 넣으면 안된다는 것!