바로 전 게시글과 이어집니다.

className은 HTML 상에서 해당 개체의 class가 존재한다고 해도 아예 바꿔버린다.

classList

class들의 목록으로 작업이 가능하게 해준다.

classList.contains()

() 속에 명시된 class가 HTML 요소의 class에 포함이 되어있는지 확인해준다는 뜻이다.

remove는 제거, add는 추가

--> 이렇게 하면 class name을 바꾸지 않고 class list를 사용하여 간편하게 오류 없이 작업이 가능하다.

toggle function

해당 요소의 classList에 해당 class가 존재하는지 확인 후 만약 존재한다면 toggle이 확인 후 지워준다.
반대로 해당 class가 존재하지 않는다면, toggle이 확인 후 추가해준다.

위 코드 중 if와 else에서 하는 일, (class list에 class name이 포함되면 제거하고 포함 되어있지 않으면 포함하는 일)을 한다.


이 경우에는 const clickedClass의 값인 active를 한번만 사용해주기 때문에 바로 위 코드처럼 string으로 나타내주면 된다.