Javascript: className 보다 classList를 사용해야 하는 이유(그리고 toggle)

className 보다 classList를 사용해야 하는 이유

자바스크립트에서는 css 속성을 브라우저 이벤트에 따라 다르게 동작하도록 하기 위하여 .className으로 css 변수명을 변경한다. 하지만 자바스크립트에서 동적 스타일을 적용하기 위하여 className을 무방비하게 사용하는 것은 위험하다.

---

// index.html 파일에 <h1>에 아무런 class 이름을 지정하지 않고 작성함.
const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){

	const CLICKED_CLASS = 'clicked';
    
    if (h1.className === CLICKED_CLASS) {
  	h1.className = "";
  } else {
 	h1.className = CLICKED_CLASS;
 }

}

h1.addEventListener("click", handleTitleClick);

해당 코드는 html 파일에서 <h1> 태그를 클래스 명칭 없이 작성하고, <h1> 태그의 클래스 명이 없는 경우 클래스 명 'clicked'를 추가하고, 'clicked'가 있으면 다시 또 빈 변수명을 추가하여 css 스타일을 변경해주는 코드이다.

이 경우에는 h1 태그에 어떤 클래스명도 존재하지 않기 때문에 clicked를 추가하고 비우는 것을 반복해도 아무 문제가 없을 것이다. 하지만 만약에 h1 태그에 특정 클래스명이 이미 있던 경우에는 어떻게 될까?

 

이러한 경우에는 최초로 지정한 css 클래스가 사라지면서 clicked와 빈 변수명만 남으면서, 이전 클래스에 내가 지정한 css 스타일을 모두 날려버리게 된다. 

이렇게 되면 프론트엔드 개발자가 의도한대로 스타일을 동적으로 변경되는 것이 아니기 때문에 코드를 다시 변경해야 할 것이다. 그러므로 우리는 className 대신에 classList를 사용해야한다!

---

classList의 장점

classList는 이미 부여한 클래스 속성에 추가로 새로운 클래스 명을 추가하기 때문에 기존 어떠한 클래스가 있었어도, 또는 아무런 클래스명도 지정하지 않았어도 새롭게 추가, 삭제, 대체하기가 가능하여 더 안전한 코드를 작성할 수 있다.

• .classList.add(String): 새로운 css 클래스 속성 추가. 기존에 이미 있는 클래스라면 무시함.
• .classList.remove(String): 해당 css 클래스 속성 삭제. 기존에 없는 클래스라도 에러가 발생하지 않음.
• .classList.replace(기존 클래스명, 새로 추가할 클래스명): 기존 클래스 대신에 추가하는 클래스로 대체함.

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

위의 예시도 classList를 사용하면, h1의 과거 클래스가 있었다고 하더라도 쉽게 기존 클래스를 유지하면서 새로운 클래스를 추가해줄 수 있고, 또 해당 클래스를 삭제하면서 css 속성을 끄고 킬 수 있다.

css 속성 끄고 키기 더 쉬운 방법: toggle

우리가 변수명으로 toggleModal과 같은 명칭을 지을 때 toggle은 '끄고 키다'라는 의미를 갖고 있다. 위의 예시처럼 클래스명을 지우고 다시 생성하는 일을 반복할 때 더 쉽게 제어가 가능한 메소드가 바로 toggle이다.

function handleTitleClick() {
  // toggle은 위의 코드를 모두 제거하고 간결하게 바꿈
  h1.classList.toggle("clicked");
}

그러므로 만약 css 속성을 삭제하고 부여하는 동작을 반복해야한다면, toggle을 사용하는 것을 가장 추천한다.

---

raw value의 위험성

raw value는 let, const 키워드와 함께 변수에 선언되지 않은 날 것의 값을 의미한다. 이러한 값을 코드에 사용할 경우, 코드가 길어지거나 여러 파일의 코드를 한꺼번에 수정하는 과정에서 개발자가 변경하지 않거나 틀리게 적은 raw value가 발생하면서 쉽게 오류를 발생시킬 수 있기 때문에 raw value를 직접 적는 것은 지양해야한다.

반드시 raw value는 상수와 같이 변하지 않는 변수에 저장하여 관리해주는 것이 에러나 오타 발생률을 줄일 수 있다.

 

출처:

1. 바닐라 JS로 크롬 앱 만들기, 노마드코더, https://nomadcoders.co/javascript-for-beginners/lectures/2897

All Courses – 노마드 코더 Nomad Coders

2. 자바스크립트 classList를 써야하는 이유, 노루룽, https://hyunjungchoi.tistory.com/70