[JavaScript 4] CSS가 JS에서 동작하는 법

• HTML은 웹사이트의 뼈대를, CSS는 디자인을, JS는 동적인 웹사이트를 구현하는 것에 사용되는 언어다.
• JS를 통해서도 디자인을 변경할 수 있지만, 권장하지 않는다.
• CSS는 디자인에 최적화된 언어고, JS는 동적인 웹사이트를 만드는데 최적화 되어있기 때문이다.

역할에 맞게 언어를 사용하는 법

1. CSS를 이용해서 addEventListner의 경우를 더 간단하게 만들 수 있다.

1. 클릭할때마다 텍스트의 색이 바뀌도록 설정한다고 가정했을 때:

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

function clickHappens(){
  const currentColor = h1.style.color;
  let newColor = ; //이때 newColor라는 setter 변수는 정의하지 않는다. 정의하지 않음으로서 대입을 할 수 있음
if (currentColor === "blue"){
  newColor === "red";
} else {
  newColor === "blue";
} 
  h1.style.color = newColor;
  /*
  순서가 h1.style.color = newColor인 이유는, 
  우리는 newColor라는 변수에 h1의 색을 넣는게 아니라, 변경될 h1의 색이 변수 newColor에 할당되길 원하기 때문이다.
  프로그래밍에서 "=" 사용 시, 왼쪽의 항목이 오른쪽의 항목으로 대입됨을 의미한다.
  */
}

title.addEventListener("click", clickHappens);

• [html의 있는 hello라는 클래스명을 가진 div아래에 있는 첫번째 아이템인 h1태그]의 텍스트가 css에서 "blue"라고 정의되어 있다.
• "click"이라는 이벤트 발생 시, 함수가 호출된다.
  • 호출된 함수엔 클릭 시점에서 h1의 색이 파란색(기본색)일 경우, 해당 색을 붉은색("red")로 변경한다.
  • 그리고 클릭을 해서 함수가 호출된 시점에 h1의 색이 파란색이 아닐 경우, 파란색으로 변경한다.
• 그리고 JS에서 변수의 값을 할당함으로서 해당 코드가 생성되었다.
  • 변수를 생성함으로서 현재 값의 상태에 따라 변경되어야 할 상태가 새로 지정되는 방식이다.

2. 만약 CSS를 이용했다면, 코드는 이렇게 변경된다:

h1{
color: blue;
}

.active{
color: red;
}

//css에 h1의 기본값을 파란색으로 주고, .active라는 클래스가 실행될때 실행되는 대상의 색은 붉은색이라고 정의한다.
(이때 h1에 클래스명은 넣어두지 않았다.)
//active가 적용된 대상은 h1이든, div든, span이든, 색이 붉게 변하는 효과를 갖게된다.

• 이 CSS를 JS에 활용한다면:

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

 function clickHappens(){
 if (h1.className === "active"){
   h1.className = "";
 } else {
   h1.className = "active"
 }

 title.addEventListener("click", clickHappens);

• h1의 클래스명이 "active"일 경우, 클래스명을 빼서 h1의 기본상태 (color: blue)로 상태를 돌린다.

  • 이때, h1은 class명을 갖고 있지 않은 상태가 디폴트 상태이다.
  • className은 이전 calss를 상관하지않고 모든걸 교체해 버린다.
    • 이때 이전에 주어졌던 class명은 소실된다.
    • JS 코드를 통해 html을 변경시키고, css는 변경된 html을 바라보게된다.

• 만약 클래스 명이 active가 아니라면, (클래스명이 주어지지 않은 디폴트 상태인 경우) h1에게 active라는 클래스명을 부여한다.

• 해당 함수는 클릭이 발생할때 실행이 됨으로, 클릭할때마다 색이 파란색에서 붉은색으로 왔다갔다 변한다.

  • 이렇게 작성된 JS코드는 변수를 새로 정의하는 방식으로 작성한 코드보다 간결하며, css를 통해 간접적으로 디자인이 변경되기 때문에 더 다양하게 디자인 요소를 변경할 수 있다.

    h1{
    color: blue;
    transition: color 0.5s ease-in-out;
    }
    
    .active{
    color: red;
    }
    			```

  • JS코드를 추가할 필요 없이 디자인 설정이 추가되어 동일한 JS코드가 실행되어도 transition 애니메이션이 추가되는 것을 확인할 수 있다.

2. 만약 이전의 클래스명을 잃지 않은 방식으로 h1을 작업하려면 어떻게 될까?

1. classList를 사용할 수 있다!
   • html의 내용물 (class 명)을 조작할 수 있게 만든다.
2. classList는 짝으로 오는 사용할 수 있는 함수의 종류가 여러가지가 있다.
   • ex. contains: constains라는 function은 명시된 class명이 HTML element의 class에 포함되어 있는지 확인한다.

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

function clickHappens(){
  const clickedClass = "clicked"
  if (h1.classList contains(clickedClass){ 
  // contains를 사용해서 h1의 클래스명에 clicked가 포함되어있는지 확인한다.
    h1.classList.remove(clickedClass); 
  //만약 h1의 클래스명에 clicked라는 문자가 포함되면, 해당 클래스명(clicked)을 제거한다.
  } else { 
  // 만약 애초에 "clicked"가 클래스명에 없다면 clickedClass라는 변수를 이용해 "clicked"를 h1의 클래스명에 추가한다.
    h1.classList.add(clickedClass);
  }
  
title.addEventListener("click", clickHappens);

• 이런 방식으로 "clicked"라는 문자열을 본래의 클래스명에 추가/제거를 통해 html을 변경한다면, 본래의 클래스명이 무엇이든 이전 클래스명을 잃지 않는 방식으로 원하는 이벤트를 JS로 추가할 수 있다.
  
  

3. 가장 중요한 것은, 어떤 것을 구현하고자 했을 때 어떻게 설계를 하는 것이 가장 효율적인지 생각하는 것이다!

1. classList.contains()를 사용해서 특정 클래스명의 유무를 확인하고 add/remove를 통해 클래스명을 통제했다.
   • 여기서 중요한 것은 클래스명 유무 확인과 해당 클래스명 추가/제거다.
   • 이때 가장 효율적으로 사용할 수 있는 classList와 관련된 함수는 "toggle"이다.

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

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

2. toggle은 함수 자체가 스위치처럼 특정 클래스명이 있는 경우 삭제하고, 없는 경우 추가한다.
   • 스위치처럼 추가/제거하는 클래스명 자체를 매개변수로 주기 때문에 변수를 선언할 필요도 없다.

기능을 구현하고자 할 때 가장 효율적인 방식을 생각해야한다.
이게 설계를 잘 해야한다는 뜻일까? 구조적 사고를 잘 하면 되는걸까?

css 선택자를 잘 사용하는법부터 시작하면 프로그래밍 언어의 "구조적 사고"를 더 배울 수 있다고 생각한다.
JS의 특성도 잘 공부해야지!

출처: 노마드 코더 바닐라 JS