🎨 탭 기능 구현하기 (하드코드 vs 반복문)

👩🏻‍💻 간단한 탭 기능을 하드코드 방식과 반복문을 활용한 방식으로 구현하여 비교해보았다

---

🏗️ HTML 코드

    <div class="container mt-5">
      <ul class="list">
        <li class="tab-button">Products</li>
        <li class="tab-button orange">Information</li>
        <li class="tab-button">Shipping</li>
      </ul>
      <div class="tab-content">
        <p>상품설명입니다. Product</p>
      </div>
      <div class="tab-content show">
        <p>스펙설명입니다. Information</p>
      </div>
      <div class="tab-content">
        <p>배송정보입니다. Shipping</p>
      </div>
    </div> 

📌 설명
✅ 3개의 탭화면 코드를 만들어준다
✅ 각 탭을 클릭하면 해당 내용이 보여진다

---

✍️ 하드코드 방식 (비효율적인 코드 😵)

// 각각의 탭에 변수정의
const buttons = document.querySelectorAll(".tab-button"); // 모든 탭 버튼을 선택
const productsButton = buttons[0]; // 첫 번째 탭 버튼 (제품)
const informationButton = buttons[1]; // 두 번째 탭 버튼 (정보)
const shippingButton = buttons[2]; // 세 번째 탭 버튼 (배송)
const contents = document.querySelectorAll(".tab-content"); // 모든 탭 내용을 선택
const productsContent = contents[0]; // 첫 번째 탭 내용 (제품)
const informationContent = contents[1]; // 두 번째 탭 내용 (정보)
const shippingContent = contents[2]; // 세 번째 탭 내용 (배송)

// 버튼 1, 2, 3에 이벤트리스너 부착
productsButton.addEventListener("click", productsHandle); // 첫 번째 버튼 클릭 시 productsHandle 함수 실행
informationButton.addEventListener("click", informationHandle); // 두 번째 버튼 클릭 시 informationHandle 함수 실행
shippingButton.addEventListener("click", shippingHandle); // 세 번째 버튼 클릭 시 shippingHandle 함수 실행

// 버튼을 누르면 해당 탭으로 이동되는 각 함수 실행
function productsHandle() {
  // 다른 버튼에서 'orange' 클래스를 제거하고, 첫 번째 버튼에 추가
  informationButton.classList.remove("orange");
  shippingButton.classList.remove("orange");
  productsButton.classList.add("orange");

  // 다른 탭 내용을 숨기고, 첫 번째 탭 내용을 표시
  informationContent.classList.remove("show");
  shippingContent.classList.remove("show");
  productsContent.classList.add("show");
}

function informationHandle() {
  // 다른 버튼에서 'orange' 클래스를 제거하고, 두 번째 버튼에 추가
  productsButton.classList.remove("orange");
  shippingButton.classList.remove("orange");
  informationButton.classList.add("orange");

  // 다른 탭 내용을 숨기고, 두 번째 탭 내용을 표시
  productsContent.classList.remove("show");
  shippingContent.classList.remove("show");
  informationContent.classList.add("show");
}

function shippingHandle() {
  // 다른 버튼에서 'orange' 클래스를 제거하고, 세 번째 버튼에 추가
  productsButton.classList.remove("orange");
  informationButton.classList.remove("orange");
  shippingButton.classList.add("orange");

  // 다른 탭 내용을 숨기고, 세 번째 탭 내용을 표시
  productsContent.classList.remove("show");
  informationContent.classList.remove("show");
  shippingContent.classList.add("show");
}

---

🏆 반복문을 사용한 코드 (깔끔한 코드 ✨)

// 각각의 탭에 변수정의
const buttons = document.querySelectorAll(".tab-button");
const contents = document.querySelectorAll(".tab-content");

// 모든 버튼에 클릭 이벤트리스너 부착
buttons.forEach((button, index) => {
  button.addEventListener("click", () => handleTab(index));
});

function handleTab(index) {
  // 모든 버튼에서 'orange' 클래스 제거하고 클릭한 버튼에 추가
  buttons.forEach((button) => button.classList.remove("orange"));
  buttons[index].classList.add("orange");

  // 모든 탭 내용을 숨기고 클릭한 탭 내용만 표시
  contents.forEach((content) => content.classList.remove("show"));
  contents[index].classList.add("show");
}

---

🎨 구현 화면

📌 초기 화면

📌 탭 클릭 시 변경된 화면

---