float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현

float를 이용한 탭 메뉴 버튼 만들기2 -  jQuery, vanilla JS 구현

 

이전 포스팅에서 HTML/CSS를 이용해서 탭메뉴 버튼의 UI를 만들어보았습니다.

 

float를 이용한 탭 메뉴 버튼 만들기 - Part 1

float를 이용한 탭 메뉴 버튼 만들기 - Part 1

 

 

그러면 이제 이 메뉴를 동적으로 작동하도록 만들어야겠죠? 그런 역할을 해주는 언어가 바로 Javascript입니다.

프로그래밍 언어를 이용하는 코딩은 흥미진진합니다. 생명력을 불어 넣어주게 되니까요. 그럼 바로 당장 시작해봅시다!

 

 

jQuery로 먼저 구현해봅시다.

 

jQuery를 사용해보는 이유는, 이번 예제에서는 결과물을 내는 것이 Vanilla JS보다 훨씬 간단하게 구현이 가능하기 때문입니다. 뭐 다른 이유 없습니다.

 

제이쿼리로 구현을 해본 후 바닐라 자바스트립트로도 구현을 정리해보면, 분명 더 좋은 공부가 될 것입니다.

본문에 jQuery용 스크립트를 잊지 말고 꼭 넣어줍시다.

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

const btnTab = $(".tab-button");
const tabContent = $(".tab-content");

for (let i = 0; i < btnTab.length; i++) {
  btnTab.eq(i).on("click", function () {
    btnTab.removeClass("selected");
    btnTab.eq(i).addClass("selected");
    tabContent.removeClass("show");
    tabContent.eq(i).addClass("show");
  });
}

브라우저에 띄워서 클릭을 해보면 잘 동작합니다

 

브라우저에 띄워서 클릭을 해보면 잘 동작합니다. 오, 성공입니다!

 

 

 

jQeury 코딩 내용 살펴보기

 

 

$(".tab-button")은 document.querySelector(".tab-button")과 똑 같은 거라고 했었죠?

타이핑 하는 글자가 적고 간결해진다는 장점이 큰 것 같습니다.

 

const btnTab = $(".tab-button"); 이라고 작성해서 변수에 담은 이유가 있을까요?

있습니다! 변수에 담으면 매번 셀렉터 쿼리를 날리는 것보다, 한번만 쿼리를 날리면 되기 때문에 성능에서 유리하고, 램도 절약되고 뭐 그렇습니다. 그냥 더 좋은 코딩방식이라고 일단 이해해두시면 OK!

 

 

그 아래에서는 for 반복문을 돌면서, click이 일어날 때마다 selected와 show 클래스를 붙여줬다 떼어줬다 하는 방식입니다. 코드를 보면서 이해 되시죠?

 

 btnTab.eq(i) 부분에서 .eq는 element queue 입니다. 배열의 경우와 유사한 사용방식입니다. fruit[1] 이런 방식. 

 

jQuery는 $를 통해서 document.querySelectorAll을 수행한 후 결과를 배열에 담아 놓는 형태로 동작합니다. 그래서 .eq를 통해서 하나씩 꺼내서 다루는 것일 뿐입니다.

 

코드가 간결해서 한줄씩 살펴보면 그 의미를 바로 알 수 있을 것입니다.

 

 

 

let i = 0 으로 선언한 것을, var i = 0으로 바꿔주면?

 

위 예제의 반복문에서 let으로 변수 선언한 것을 var로 선언해주면 실행이 될까요? 안 될까요?

일단 직접 코드를 바꿔본 다음에 실행해보세요. 잘 안될껄요? 신기하죠?

클릭해보면 이렇게 메뉴가 이상해질 겁니다. var 때문에 말이죠.

 

var는 예전에 만든 것이고 const나 let처럼 구분해서 사용하지 않아서 편리할 것 같은데 말이죠.

 

이유를 알고 싶다면, 아래 내용 꼭 확인해두시기 바랍니다.

 

Javascript의 변수 선언: var, let, const는 서로 어떻게 다를까?

Javascript의 변수 선언: var, let, const는 서로 어떻게 다를까?

 

 

 

Vanilla JS로 구현해보기

 

그러면 순수 자바스트립트로는 동일한 동작을 어떻게 구현하면 될까요?(일단 직접 먼저 해보세요.)

다양한 방법이 존재하겠지만, 저는 다음과 같이 코드를 작성해보았습니다.

 

일단 html을 조금 수정했습니다.

<div class="container mt-5">
    <ul class="list">
      <li class="tab-button selected" data-id="0" >Tab Menu01</li>
      <li class="tab-button" data-id="1">Tab Menu02</li>
      <li class="tab-button" data-id="2">Tab Menu03</li>
    </ul>
    <div class="tab-content show">
      <p>Menu01 설명내용</p>
    </div>
    <div class="tab-content">
      <p>Menu02 설명내용</p>
    </div>
    <div class="tab-content">
      <p>Menu03 설명내용</p>
    </div>

const btnTab = document.querySelector(".list");
const tabContents = document.querySelectorAll(".tab-content");

btnTab.addEventListener("click", function (e) {
  for (let i = 0; i < e.currentTarget.children.length; i++) {
    e.currentTarget.children[i].classList.remove("selected");
    tabContents[i].classList.remove("show");
  }
  e.target.classList.add("selected");
  tabContents[e.target.dataset.id].classList.add("show");
});

 

음.. 뭔가 일단 jQuery 코드에 비해 복잡해보입니다. 어쩔...

동작은 잘 됩니다. jQuery랑 똑같습니다.

동작은 잘 됩니다. jQuery랑 똑같습니다.

 

역시 CSS 셀렉트 쿼리를 변수에 담아서 사용했습니다.

 

그리고 click이 발생하면 반복문을 돌리면서, .selected와 .show 클래스를 싹~ 떼어준 후 선택된 탭 메뉴에만 해당 클래스를 붙일 수 있도록 했습니다.

 

그런데, 이상한 것들이 몇개 보이는 것 같습니다.

 

 

data-id ?

 

html 태그에 추가된 data- 형식은 개발편의를 위해 임시로 데이터를 담아 놓을 수 있는 변수 같은 거라 보면 됩니다.

작성할 때는 data-id="0"이라고 적고, 사용하 때는 elem(엘리먼트).dataset.id 형태로 사용하면 됩니다.

 

작명은 자유롭게 합니다. data-choice="apple" 이라면, elem.dataset.choice 형태로 호출하면 apple을 가져다 줍니다.

 

그럼 이런 걸 도대체 왜 사용할까요? 편해서 사용합니다.

위 JS 코딩에서 data-id를 사용하지 않는 형태로 코드를 한번 작성해보시면 팍~ 체감할 수 있을겁니다.

(나중에 한번 더 다루면서 정리해봅시다!)

 

 

 

e.target, e.currentTarget

 

e.target은 내가 콕! 찍어서 클릭한 대상을 말하고, e.currentTarget은 이벤트 리스너가 달려 있는 대상을 말합니다.

왜 이렇게 필요한 것이냐면... 지난 포스팅에 '이벤트 버블링'에 대해서 정리해두었습니다. 꼭 보고 오세요!

 

이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리

이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리

 

 

그럼 이번에도 var i = 0으로 바꿔 보면?

 

그럼 이번에도 var i = 0으로 바꿔 보면 실행이 될까요? 안될까요?

 

결론부터 말하자면 잘 됩니다.사실 아까랑 코드가 살짝 다르거든요.

 

jQuey를 사용한 코드는 반복문 안에 이벤트 리스너가 있는 형태고,

JS를 사용한 코드는 이벤트 리스터 안에 반복문이 있는 형태로 다르게 코딩을 했더랬습니다.^^

 

이러한 차이는 Javacript의 특이한 변수의 성질(더러븐...) 때문 인데요, 자바스크립트를 앞으로 학습해 나가야 한다면 반드시, 꼭 이해를 해두시는 것이 신상에 좋을껄요?

 

변수 선언과 관련한 내용은 꼭 이해해두고 넘어가시기 바랍니다.

 

Javascript의 변수 선언: var, let, const는 서로 어떻게 다를까?

Javascript의 변수 선언: var, let, const는 서로 어떻게 다를까?

 

 

 

마치며

 

오늘은 공부 분량을 좀 많이 넣어서 정리를 했습니다.

 

프로그래밍이라는 게 결국 하나의 간단한 기능들이 여기 저기에서 서로 얽히고 섥히면서 돌아가게 마련인데요, 그래서 다소 복잡해보일 수 있겠지만, 한 단계 더 레벨업 할 수 있도록 작은 미로를 만들어 두었다 칩시다.

 

미로가 그리 복잡하지 않으니, 꼭 탈출에 성공하시기를 바라겠습니다.^^

오늘도 즐거운 코딩 하시기 바랍니다.

 

즐거운 코딩생활, 즐코딩.

KINcoding.