[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 문 조건식에 넣으면 안된다는 것!