14 ClassName과 ClassList의 차이

 

 

className & classList 차이

 

 

 

1. Toggle Button의 원리

2. className과 classList 두 방식의 차이점

 

 

 

 

 

1. Toggle Button의 원리

 

이제껏 구현하려 했던 것이 다름 아닌 toggle button의 원리이다.

그것은 클래스와 이벤트 리스너로 이뤄어져있다.

글자의 색 정보를 담고 있는 클래스와 색을 변화시킬 수 있는 function.

그리고 버튼을 클릭하면 동작을 실행하라는 명령으로 되어있는 것이다.

 

이전 장에서 글자 색 정보를 css에서 클래스로 정의하고,

js에서 function을 만들고, eventListener로 실행하게 해 주었다.

 

이 function 내에서도 className이라는 아이에게 변수를 할당하여 

조건에 따라 글자색의 클래스를 바꾸도록 기능을 넣어준 것이다.

 

className이라는 구문의 문제점이 있는데, 

이는 html내에 있는 다른 class들의 name까지도 적용될 수 있는 오류의 소지가 있다.

class 뒤에 붙는 것이 Name과 List 두 가지가 있다.

classList를 사용하면 기존 클래스 내부에 항목을 추가하거나 삭제할 수 있다.

그래서 clicked 즉 클릭했다는 그 값을 클래스에 추가하거나 삭제하는 방식으로 

컬러 클래스를 

 

 

 

먼저 만들었던 것을 보자.

 

. js파일

function handleTitleClick(){

    const textColorClass = "textColor";

    if(h1.className === textColorClass){

        h1.className = "";

    } else{

        h1.className = textColorClass;

    }

}

 

 

js에서 textColor라는 것을 변수에 할당하고, h1의 하위의 클래스에 그 값이 참일 때와 거짓일 때를 구분하여 색을 적용하도록 했다.

css에서 원래의 색은 h1의 원래 컬러값인 blue이고, textColor라는 클래스로 tomato 컬러값을 가지고 있다.

그래서 색을 변화시킨다.

즉, 클릭했을 때 컬러값이 무엇인지 확인해서 그 값을 변경하는 방식이다.

 

js파일을 className >> classList를 사용하여 바꾸어보자.

 

function handleTitleClick(){

    const clickedClass = "clicked";

    if(h1.classList.contains(clickedClass)){

        h1.classList.remove(clickedClass);

    } else{

        h1.classList.add(clickedClass);

    }

}

 

 

clickedClass 라는 변수에 clicked라 이벤트 값을 직접 넣어준다.

그래서 h1하위에 clicked라는 클래스를 담고있느냐 아니냐를 확인해서  클래스를 비우거나 추가하는 방식으로 색을 변화시킨다.

clicked가 있으면 글자색클래스를 삭제해라(css에서 클래스가 갖고 있는 컬러값을 넣지말라),

clicked가 없으면 글자색클래스를 추가해라(css에서 클래스가 갖고 있는 컬러값을 넣어라)라는 의미이다.

즉, 클릭을 구분자로 사용하여 컬러값을 담고있는 클래스를 추가, 삭제하는 방식으로 값을 변경하는 방식이다.

 

 

 

 

 

 

 

 

 

 

2. 두 방식의 차이점

 

 

첫 번째 방식은 클릭하는 순간의 textColor 값을 확인해서 참 거짓을 구분하는 것이고

두 번째 방식은 클릭하는 것 자체를 확인해서 해당 하위의 클래스를 제거하거나 추가하는 방식으로 변화를 만든다.

 

 

앞서 이야기 했듯이, 첫 번째 방식인 className을 사용하는 것은 html에 있는 class 자체에 영향을 미칠 수 있는 오류 발생 소지가 있기에, 그 하위에 혹은 내부에 classList 즉 항목을 하나 추가해서 그것을 넣었다 뺐다 하는 방식으로 하는 것이다.

 

 

 

 

이제 이 복잡해보이는 if 구문을 단 한 줄의 코드로 바꿔보자.

궁극적으로 toggle이 담고 있는 의미를 프로그래밍 언어로 지금까지 살펴봤다고 보면되겠다.

 

 

 

function handleTitleClick(){

    h1.classList.toggle("clicked");

}

 

 

이 코드의 의미는 위에 설명한 내용과 같다.

조건문처럼, 만약에 h1의 classList에 clicked를 담고 있다면 해당 클래스를 제거하고, 없다면 해당 클래스를 추가하라는 뜻이다. 

좀 더 구체적으로 얘기하자면 "token"을 생성하고 제거하는 것을 의미하는데, 토큰이라는 것 이 웹 내에서 이용할 수 있는 하나의 권한이라고 보면된다. 클릭이라는 행위를 하고자 하는 주체를 토큰으로 설정하고, 그 토큰을 제거할 수도, 생성할 수도, 움직일 수도 있게 해주는 역할을 한다. 

 

 

 

 

 

 

 

 

BR. h