CSS in Javascript part Two

이제는 자바스크립트가 아닌 css 파일에서 직접 스타일을 지정하도록 했다.

js 파일에서 h1 태그에 active라는 클래스를 추가하면, css 파일에 의해 클릭했을 때 글자의 색이 tomato색으로 바뀌는 것을 확인할 수 있다.

이전과 달리 css와 js 파일을 구분하면 더 적은 js 코드로 동일한 결과를 얻을 수 있다.

이번에는 다시 클릭하면 active라는 클래스를 제거하도록(다시 cornflowerblue 색이 되도록) 만들어보자

h1태그의 className이 active라면 className을 없애주고 그렇지 않다면 className을 active로 지정하는 함수로 코드를 수정했다.

이제 화면을 실행하면 클릭을 반복함에 따라 글자의 색이 cornflower -> tomato -> cornflower .....로 계속 바뀌는 것을 확인할 수 있다.

css에 0.5초 뒤에 색상을 바꿔주는 코드를 한 줄 추가했다.

화면을 실행하면 0.5초 뒤에 색상이 바뀌어서 그라데이션처럼 보이는 것을 확인할 수 있다.(영상은 귀찮아서 첨부안함)

하지만 아직 js 코드를 더 개선해야 하는데, 코드를 깔끔하게 하는 두 가지 방법중 한 가지를 사용해보겠다.(나머지는 다음에)

js에 있는 함수에서 string을 두 개 사용하고 있는데, 이는 내가 임의로 만든 이름이기 때문에 만약 변경하게 된다면 일일이 수정해줘야 해서 error의 위험이 있다.(스펠링 오류 등등)

그러니 이런 error를 방지하기 위해 이것을 변수로 만들어준 다음 코드를 수정했다.

이제 변수를 잘못 사용하면 console 창에서 어떤 부분이 잘못됐는지 확인할 수 있다.

그런데 이 코드에서는 버그가 발견되었다.

h1 태그에 class가 없는 상태로 시작했는데, 만약 class가 있는 상태로 시작하면 어떻게 될까?

이렇게 class와 그에 해당하는 스타일을 지정한 후 새로고침을 하면 js가 class를 clicked로 바꿔버려서 지정한 스타일이 사라지게 된다.

이걸 해결하려면 js의 변수에 font도 추가해주면 되지만, 이것은 별로 좋은 방법이 아니다.

class를 조금이라도 변경하면 js와 css 모두를 수정해야 하기 때문이다.

우리는 js가 모든 class를 변경하는것이 아니라 원래 있던 class는 보관하도록 만들어야 한다.(즉, 설정해둔 font라는 class를 없애지 않고 clicked라는 class를 변경하도록 해야함)

이제 그걸 어떻게 하는지 배워보자

class name을 바꾸는 다른 방법은, classList를 사용하는 방법이다.

classList는 className과 classList 두 가지 옵션이 있는데 classList는 말 그대로 내가 class들의 목록으로 작업할 수 있게 해준다.(className에서는 모든 것을 교체해버림)

우리가 명시한 class가 html element의 class에 포함되어 있는지 알려주는 contains라는 함수를 사용하여 js 코드를 수정했다. 이것은 html element가 가지고 있는 또 하나의 요소(classList)를 사용하는 것이다.

위의 코드에서 우리는 classList가 clicked를 포함하고 있는지만 확인한다.

이제 새로고침 후 실행하면 화면은 이전과 똑같이 동작하지만 여전히 className을 교체하고 있다.(h1.className = "";)

우리는 className을 교체하려는게 아니기 때문에 remove나 add 함수를 사용하기로 했다.

만약 clickedClass가 h1의 classList에 포함되어 있다면, clickedClass를 지우고(remove함수), 그렇지 않다면 clickedClass를 추가하는(add함수) 코드를 작성했다.

이제 모든 class를 교체하지 않고 js가 특정한 class만 변경하거나 추가하게 된다.

이제 이 js 코드들을 다 지우고 toggle() 함수를 사용해보자.

toggle함수는 class name이 존재하는지 확인을 하는데, 만약 class name이 존재한다면 그것을 지우고 class name이 존재하지 않는다면 그것을 추가할 것이다.

즉, toggle은 우리가 위에서 작성했던 js 코드를 기본적으로 구현하는 것이다.(classList에 class name이 포함되면 제거하고, 포함되지 않으면 추가하는 것)

여기서는 clicked를 한 번만 사용하기 때문에 생성했던 변수를 지웠다.

새로고침 후 확인해보면 한 줄의 코드로 이전과 똑같이 동작하는 것을 알 수 있다.

※ toggle은 h1의 classList에 clicked라는 class가 이미 있는지 확인해서 있다면 clicked라는 class를 제거해주고 clicked라는 class가 없다면 추가해주는 역할을 함

show you