[JS 포트폴리오 만들기] 선택한 버튼에 하이라이트 주기 (색상변경)

2022.03.23

 

---

🤔❓어떻게 선택된 버튼에 클래스를 추가할까?

현재 상태는 work__categories라는 큰 클래스 안에 3개의 category__btn이 들어가 있다.

  <div class="work__categories">
    <button class="category__btn selected" data-filter="*">All<span class="category__count selected">5</span></button>
    <button class="category__btn" data-filter="js">Javascript<span class="category__count">3</span></button>
    <button class="category__btn" data-filter="react">React<span class="category__count">2</span></button>
  </div>

category__btn을 클릭했을 때, 클릭 된 버튼이 selected되도록 만들고 싶다.

(즉, 버튼을 선택했을 때, 해당 버튼에만!! 클래스를 넣어서 선택된 효과를 만들고 싶다.)

 

일단, 각 버튼을 호출하는 방법은 event.target이라는 함수로 호출이 가능하다는 것은 이전시간을 통해 배웠다.

그래서 이 기능을 이용해서 각 버튼에 어떻게 selected라는 클래스를 추가하면 좋을지 고민했다.

---

😃❗이렇게 하면 되지 않을까?

 

1) 클릭된 버튼의 data-값과 동일한 값이 있는 상자에 클래스를 추가하도록 하면 되지 않을까?

work__categories를 클릭해서 event.target.dataset.filter를 통해 각 버튼의 data-filter값을 가져왔으니 해당 데이터를 재활용하면 어떨까?라는 생각을 했다.

 

그래서, data-filter값을 가져온 함수 안에 selected라는 클래스를 추가해봤다.

  setTimeout(() => {
    projects.forEach((project) => {
      if (filter === '*' || filter === project.dataset.filter) {
      	
        //해당 필터값을 선택하면 선택된 필터가 있는 카테고리버튼에 selected라는 클래스를 추가해보자
        const categoryBtn = document.querySelector('category__btn');
        categoryBtn.classList.add('selected');
        
        project.classList.remove('invisible'); 
      ....
    });

하지만 이렇게 적으니 안된다. 디버깅을 해보니 categoryBtn의 가장 처음버튼 (홈버튼)에 selected라는 클래스가 들어간다.

 

나는 이렇게 작동될거라 생각했다.

코드	예상값	실제값
categoryBtn.classList.add('selected');	filter값이 js인 버튼 클래스에 selected가 추가됨	가장 최상단의 버튼 클래스에 selected가 추가됨
[참고] project.classList.remove('invisible');	project.invisible	project.invisible

 

내가 위와같이 생각했던 이유는 내가 선택한 버튼의 filter값과 project의 filter값이 같으면 project에 클래스를 추가하라는 명령을 기존에 봤었기 때문이었다.

 

그렇다면, 카테코리도 마찬가지로 filter값이 있으니 내가 선택한 버튼의 filter값과 project의 filter값이 같으면 category__btn에 클래스를 추가하면 되는거 아닌가?라고 생각다.

 

하지만 실제로 작동시켜봤을 땐, 내가 선택한 버튼이 아니라 가장 최상단에 있는 버튼에 selected라는 클래스가 추가됐다.

그렇다는 말은, 내가 선택한 버튼이 타켓이 되지 않았단 것이다.

 

지금 이 글을 작성하면서 찬찬히 뜯어보니, 당연히 작동하지 않을 수 밖에 없다.

왜나하면 project의 경우에는 해당 filter값과 '직접적'으로 일치하는 항목에만 클래스를 추가하도록 설계되어있기 때문이다.

그런데 나는 project의 filter값이 맞으면 category에도 추가해줘라는 '간접적'인 명령을 내렸기 때문이다.

컴퓨터는 내가 원하는 행동을 '아주 구체적으로'이야기 해줘야 하기 때문에 이런 명령은 전혀 이해하지 못한다.

 

내가 원하는 방법으로 카테고리를 선택하고 싶다면, project랑 동일한 방법으로 코드를 만들면 될 것 같아 만들어보았다.

workCategories.addEventListener('click', (event) => {
  //버튼을 누르면 반환되는 각 filter값을 가져옴
  const filter = event.target.dataset.filter || event.target.parentNode.dataset.filter;
  if (filter == null) {
    return;
  }
  
  //카테고리 버튼을 모두 불러온다.
  const categoryBtns = document.querySelectorAll('.category__btn');
  
  //카테고리 버튼을 모두 돌면서, 내가 선택한 값과 카테고리 버튼의 filter값이 같다면 'selected'클래스를 추가하고
  //그렇지 않다면 버튼을 제거한다.
  categoryBtns.forEach((category) => {
    filter === category.dataset.filter ? category.classList.add('selected') : category.classList.remove('selected')
  });

이렇게 하니 작동이 된다.

 

 

하지만 문제가 있다.

 

1. 반복문을 통해 배열 값의 일치여부를 확인하는 것은 너무 시간적으로 오래 걸린다. 즉, 시간효율성이 좋지 않다.

단순히 선택된 값을 하이라이트하는데 반복문을 넣을 정도의 코드를 짜는건 좀 오버스펙이란 생각이 든다.

 

2. 기존에 'All'에 선택되어있던 하이라이트를 제거하고 모든 버튼이 비활성화 되어있는 상태로 시작했는데, 막상 구현하고 나니까 기본값으로 'All'이 선택되어있고, 다른 버튼을 누르면 해당 버튼이 활성되도록 만드는게 더 좋을 것 같단 생각이 들었다.

 

위 두가지 문제를 한번 해결해보자.



 

2) 버튼을 눌렀을 때, 해당 버튼의 노드이름을 활용한다.

workCategories.addEventListener('click', (event) => {
  ...
  //선택된 상태를 기본값으로 가져온다.
  const selected = document.querySelector('.category__btn.selected');
  selected.classList.remove('selected');
  
 });

 

먼저 기본적으로 버튼이 활성화 되어있도록 만들어 보자.

 

기본 All버튼을 모두 활성화 되도록 만드는 방법은 아예 기본값으로 selected 됐을 때 클래스를 적용시키는 것이다.

selected(선택된 상태)를 기본값으로 가져오고, 클릭 이벤트가 발생하면 카테고리 버튼의 selected 클래스를 없앤다.

 

이제 내가 선택한 버튼이 하이라이트 되도록 만들건데 앞에 1번에서는 선택한 버튼의 data 값을 가져와서 해당 data와 일치하는지 반복문을 돌렸지만, 이번에는 그냥 event.target을 이용해 선택한 버튼을 가져오면 된다. 

 

이렇게 쉬운 방법이 있었는데 왜? 라고 묻는다면, 나는 내가 버튼을 눌렀을 때 반환되는 filter값을 이용하고 싶었을 뿐..이라고 해두자.

 

 

event.target을 이용하면 내가 선택한 버튼의 요소가 출력된다. 그러면 여기서 바로 class를 추가하면 된다.

 

workCategories.addEventListener('click', (event) => {

  //선택된 상태를 기본값으로 가져온다.
  const selected = document.querySelector('.category__btn.selected');
  selected.classList.remove('selected');
  
  // 버튼을 눌렀을 때 해당 버튼에 selected 클래스가 들어가도록 한다.
  const target = event.target.nodeName === 'BUTTON' ? event.target : event.target.parentNode;
  console.log(event.target);
  target.classList.add('selected');
  
 });

그런데 왜 nodeName이 버튼인 항목만 선택하도록 조건문을 만들었냐하면, 위 그림에서와 같이 button 상자 안에 span상자가 같이 들어가 있어서 span을 누르게 되면 작동이 안된다. 그래서 상자가 button이 아니면 (== span이면) 해당 타겟의 부모노드를 선택하도록 만든거다.

 

 

짠, 이렇게 하면 원하는 대로 잘 선택되고 작동된다.

역시, 여러가지 방법론이 있는 것 같단 생각이 한번더 들면서 내가 클래스를 추가하고 제거하는데 뭔가 좀 헷갈리고 있었구나를 알게 됐다.

 

---

eunne's github: https://github.com/eunne/Project_Portfolio.git