[JavaScript] 바닐라 JS로 크롬 앱 만들기_#05

Getter와 Setter

앞서 코드는 Html에서 원소를 불러와 색을 직접 입력시켜 주었다.
하지만, 이는 css를 지정하는 이상적인(?) 방법은 아니다.
style.css 파일 안에 css를 지정하고 이를 다루는 것이 바람직하다.

getter와 setter를 지정하고 글자색을 바꿔보자.

const h1 = document.querySelector("div.hello:first-child 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);

1. currentColor는 getter이다. 위 코드에선 color값을 복사하는 역할을 한다. newColor에 바뀌는 color를 담을 것이므로, currentColor는 const로 newColor는 let으로 선언하는 것이 적절하다.

2. newColor는 setter이다. 변수에 대입된 색상값을 h1.style.color에 최종적으로 할당하는 역할을 한다.

3. 프로그래밍언어에서 "="(equal) 표시는 오른쪽에 있는 값을 왼쪽에 대입한다는 뜻이다. 이를 염두에 두시면 코드를 이해하는데 편하다.

4. 함수 내에서 선언된 변수는 함수 밖에서는 존재하지 않는다. 그렇기 때문에 currentColor를 const로 변수 선언을 하더라도, 함수가 호출될 때 마다 새로운 값을 받을 수 있다.

이를 토대로 코드를 순차적으로 이해하면,

1) click event 발생 및 함수 실행
2) currentColor 변수 선언 후 h1.style.color 값 복사 (getter)
3) newColor 변수 선언
4) currentColor 현재 값 확인
5) 조건에 따라 newColor에 "tomato" or "blue" 값 대입
6) 마지막으로 h1.style.color에 newColor값 대입 (setter)

toggle

토글이란, class name이 존재하는지 확인한다.
만약 class name이 존재한다면 toggle은 class name을 제거한다.
class name이 존재하지 않는다면 toggle은 class name을 추가한다.

말로 이해하기 어렵다면 아래의 코드를 보자.
놀랍게도 아래 3코드는 모두 같은 기능을 한다.

보면서 어떤 것이 제일 좋아보이는지 생각해보자 !

1. ClassName 자체를 바꾸는 하드코딩

// Css 파일 안에 'h1'와'.clicked'의 font 색을 지정해주었음

const h1 = document.querySelector("div.hello:first-child h1");

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

h1.addEventListener("click", handleTitleClick);

2. ClassList를 사용하여 기본 ClassName은 건들지 않는 방법

const h1 = document.querySelector("div.hello:first-child h1");

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

h1.addEventListener("click", handleTitleClick);

3. toggle

const h1 = document.querySelector("div.hello:first-child h1");

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

h1.addEventListener("click", handleTitleClick);

이처럼 toggle이란 기능은 코드를 정말 짧고, 편리하다.
일종의 스위칭 기능처럼 어떤 기능을 왔다갔다하면서 변화시킬 수 있다.
앞으로의 활용성을 기대해보겠다 :)