[토이 프로젝트] Counter refactoring

Counter Refactoring

구현 방법을 동일하게 이용하여 코드를 다시 구현하였다.

 

구현 방법	구현 여부
document.querySelectorAll	O
forEach	O
addEventListener	O
currentTarget	O
classList	O
textContent	O

 

목차
1. querySelectAll와 forEach를 이용하여 각각에 이벤트 부여하기
2. textContent
3. addEventListener와 event
4. target vs currentTarget (this)
5. classList와 add

 

1. querySelectAll와 forEach를 이용하여 각각에 이벤트 부여하기

• querySelectorAll을 이용하면 같은 클래스 이름을 가진 태그들을 모두 가져올 수 있다.
• forEach를 이용하여 가져온 모든 태그를 각각 보여줄 수 있고, 기능을 넣어줄 수 있다.

btns=document.querySelectorAll(".btns__iemts")
btns.forEach((btn)=>{console.log(btn)}) // 각각의 태그를 가져올 수 있다.

 

2. textContent

태그 안의 내용을 가져올 수 있다.

btns=document.querySelectorAll(".btns__iemts")
btns.forEach((btn)=>{console.log(btn.textContent)}) // 각각의 태그의 내용을 가져올 수 있다.

 

3. addEventListener와 event

html에 onclick 속성을 이용하여 이벤트를 부여할 수도 있지만, addEventListener와 event를 이용하여 이벤트를 부여할 수 있다. 후자의 경우가 전자보다 더 자유롭게 태그들을 다룰 수 있다. (target을 이용하여 더 많은 속성을 이용할 수 있기 때문이다.)

 

4. target vs currentTarget (this)

• current target : 이벤트 리스너가 달린 요소
• target : 실제 이벤트가 발생하는 요소

이벤트 버블링

 

이벤트 버블링에서 차이를 확인할 수 있다. tagName을 이용하여 확인할 수 있다.

 

• current target : 이벤트 버블링 발생한다. this와 같다. 그래서 현재 태그 이름과 현재 태그와 같은 클래스를 가진 부모 태그 이름도 가져온다.
• target : 실제 이벤트가 발생하는 요소만을 의미하기 때문에, 이벤트 버블링 발생하지 않는다. 그래서 현재 태그 이름만 가져온다.

 

5. classList와 add

classList에 add를 이용하여 해당 태그에 클래스 이름을 넣어줄 수 있다.

그래서 해당 버튼을 클릭하면 클래스를 넣어주고, 클래스 이름에 해당 클래스 이름이 들어있으면, 카운트를 변경하고 색상을 변경하였다. includes를 이용하여 포함 여부를 체크하였다.

 

주의할 점은 innerText는 string이기 때문에, parseInt를 이용하여 숫자로 변경한 후 처리를 한 뒤에 다시 innerText에 넣어준다.

 

// 한꺼번에 여러 요소 등록하기.
const btn = document.querySelectorAll(".btn__items"); // NodeList
let count = document.getElementById("count");

// forEach를 활용하여 한번에 addEventListener 등록하기.
btn.forEach((element) => {
  element.addEventListener("click", (event) => {
    if (element.textContent === "DECREASE") {
      event.currentTarget.classList.add("decrease");
      if (event.currentTarget.className.includes("decrease")) {
        count.innerText = parseInt(count.innerText) - 1;
        count.style.color = "#ff0000";
      }
    } else if (element.textContent === "RESET") {
      event.currentTarget.classList.add("reset");
      if (event.currentTarget.className.includes("reset")) {
        count.innerText = parseInt(0);
        count.style.color = "#102a42";
      }
    } else {
      event.currentTarget.classList.add("increase");
      if (event.currentTarget.className.includes("increase")) {
        count.innerText = parseInt(count.innerText) + 1;
        count.style.color = "#008000";
      }
    }
  });
});

 

개념을 100% 이해하지 못 하였지만, 혼자 힘으로 코드를 구현하여 전보다 좀 더 좋은 코드를 작성할 수 있었다.

또한 배열에서 이용하는 메서드를 전보다 더 깊고 정확하게 사용할 수 있었다.