JavaScript로 크롬 앱 만들기 #10

노마드 코더 - 바닐라 JS로 크롬 앱 만들기 #10

✔ 리팩토링의 중요성

Step1. if ~ else를 사용하여 h1 텍스트 클릭 시 색상 변화주기

/* CSS */
body {
  background-color: beige;
}

h1 {
  color: cornflowerblue;
  transition: color 0.5s ease-in-out;

}

.clicked {
  color: tomato;
}

// JavaScript
const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
  const currentColor = h1.style.color;
  let newColor;
  if(currentColor === "blue") {
    newColor = "tomato";
  } else {
    newColor = "blue";
  }
  h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

* 헷갈렸던 부분 정리
→ h1.style.color = newColor; 를 왜 지정해주는가?
1. h1.style.color를 currentColor라는 const 변수로 지정. 이유: 계속 등장하는 코드이기 때문에 변수로 퉁쳐서 편하게 쓰기 위함
2. newColor를 빈 let 변수로 선언. 이는 바뀌는 색상을 받는 변수이다.
3. if ~ else를 통해 newColor의 초기값들이 지정되었다. ex) newColor = "tomato"
4. 이 초기화된 newColor를 h1.style.color에 지정해줘야(setter의 역할) 변화가 일어난다.

Step 2. CSS는 CSS에서 지정해주고 JS단은 JS 코드만 나오도록 해주기

const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
  const clickedClass = "clicked";
  if(h1.className === clickedClass) {
    h1.className = "";
  } else {
    h1.className = clickedClass;
  }
}

h1.addEventListener("click", handleTitleClick);

• 위와 같이 class명을 정해 CSS에 색상을 정하고 JS상에는 CSS 관련 코드가 나오지 않도록 조정
• 이때 className을 써버리면 원래 지정된 class명이 있음에도 불구하고 JS에서 class명을 완전히 새로 덮어버리는 현상이 발생한다.

Step 3. 원래의 className을 살려라

const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
  const clickedClass = "clicked";
  if(h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass);
  } else {
    h1.classList.add(clickedClass);
  }
}

h1.addEventListener("click", handleTitleClick);

• classList: class 목록으로 작업할 수 있도록 허용해준다. 원래의 class명을 해치지 않고 작업 가능
• h1.classList.contains(clickedClass) → clickedClass에 해당하는 "clicked" 클래스가 존재하는가?
• remove(): 제거
• add(): 추가

Step 4. 위의 긴 코드들을 한줄로 줄여보자.

const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
  h1.classList.toggle("clicked");
}

h1.addEventListener("click", handleTitleClick);

• toggle: className이 존재하는지 확인하여 존재 시 className을 제거하고 존재하지 않을 시 className을 추가한다. 스위치(on/off)의 기능을 한다고 생각하면 이해하기 쉽다.