[JavaScript] class name에 따른 동적 효과

리액트만 사용하다가 순수 자바스크립트가 기억이 잘 안나 공부하는 도중,

class를 이용하여 추가하고 교체하는 방법이 헷갈려서 다시 공부를 시작했다.

기초를 중요하게 생각해서 deep dive책을 다시 읽고 있고, 노마드 코더의 바닐라 자바스크립트 강의를 참고했다.

// HTML
<h1 class="title">Click Button</h1>

// JS
h1.className = "clicked";

 

 

자바스크립트를 사용하여 직접적으로 CSS를 바꾸지 않고,

클래스명만 변경하여 클래스명에 따른 CSS를 적용하려고 하는데

className을 사용하면 기존에 존재하던 클래스명이 사라지고 새로운 클래스명으로 교체 된다.

 

기존에 있던 클래스명을 살리고, 자바스크립트로 이벤트 활성시 새로운 클래스명을 추가하는 방법은 무엇일까?

 

classList를 사용하는 것이다.

 

기존 클래스명에 클래스 존재 확인시에는 contains를 사용한다.

h1.classList.contains(clickedClass)

 

 

기존 클래스명에서 클래스를 제거할 때는 remove를 사용한다.

h1.classList.remove(clickedClass);

 

 

기존 클래스명에서 클래스를 추가할 때는 add를 사용한다.

h1.classList.add(clickedClass);

 

 

활용한 예시를 보면

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

function handleH1Click() {
  const clickedClass = 'clicked';

  if (h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass);
  } else {
    h1.classList.add(clickedClass);
  }
}

h1.addEventListener('click', handleH1Click);

h1을 불러오고

클릭시 함수를 만들어 이 함수안에 오타 방지를 위해 'clicked'라는 상수를 clickedClass라는 이름으로 만들고

h1의 클래스 중에서 clickedClass가 포함되어 있으면 clickedClass를 클래스에서 제거하고, 포함되어 있지 않으면 clickedClass를 클래스에서 추가한다.

 

 

더 간단하게 만드는 메소드는 없을까?

toggle을 이용하면 된다.

5줄의 코드가 1줄로 줄어든다.

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

function handleH1Click() {
  h1.classList.toggle('clicked');
}

h1.addEventListener('click', handleH1Click);

toggle을 사용하면 if문으로 길게 작성하지 않아도 알아서 변환해주는 스위치의 역할을 해 준다.

 

 

누르기 전 클래스명

눌렀을 때 추가된 클래스명