[javascript] 14. 탭기능

---

탭 하나에 대한 기능 우선 구현

먼저 탭을 만든다

    <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> 

jQuery의 특징은

선택한 요소에 해당하는 클래스를 전부 찾아준다

$('.tab-button') 에 해당하는 모든 클래스를 찾아주기 때문에
➡️ 특정 요소만을 찾고 싶다면 $('.tab-button'). eq(0) 와 같이 인덱싱을 해주어야 한다

<script>
    //첫번째 버튼 실행
    $('.tab-button').eq(0).on('click', function () {
    //모든 버튼의 orange 제거
    $('.tab-button').removeClass('orange')
    //버튼 0에 orange 추가
    $('.tab-button').eq(0).addClass('orange')
    //모든 버튼의 show 제거
    $('.tab-content').removeClass('show')
    //버튼 0에 show 추가
    $('.tab-content').eq(0).addClass('show')
})
</script>

위와 같이 탭의 수대로 만드는 것은 비효율적 !!
➡️ 반복문을 사용해야 한다

반복문

<script>
for (let i = 0; i < 3; i++) {
    $('.tab-button').eq(i).on('click', function () {
        $('.tab-button').removeClass('orange')
        $('.tab-button').eq(i).addClass('orange')
        $('.tab-content').removeClass('show')
        $('.tab-content').eq(i).addClass('show')
    })
}
</script>

🤔 var이 아닌 let을 쓰는 이유는?

for 안에서 var i = 0 쓰면

• var 변수는 범위가 function

• var i 들어있는 포스트잇은 for 바깥에 생성된다

for 안에서 let i = 0 쓰면

• let 변수는 범위가 { }

• let i 들어있는 포스트잇은 for 안쪽에 3개 생성된다

  => 그리고 컴퓨터는 변수가져다쓸 때 가까운거 가져다 쓰려고한다

🤔 확장성을 추가하려면?

만약 tab이 더 많아진다면 i값의 범위를 수정해야한다
번거로우니 확장성 을 고려하여 다시 수정을 하였다

for (let i = 0; i < $('.tab-button').length; i++)

좋은 코드란?

1. 원하는 기능이 잘 구현되었는가
2. 확장성좋은가
3. 나중에 관리가 쉬울 것인가
4. 성능문제 없는가