바닐라 자바스크립트 - CSS와 JavaScript 분리하기

출처 및 참고 : 

 - 노마드 코더 챌린지(바닐라 JS로 크롬 앱 만들기) : https://nomadcoders.co/

 

 

# CSS in JavaScript

우리는 자바 스크립트 내에서 CSS를 변경시켰다. 하지만 이는 무언가 좋지 않아보인다. 

각각의 일들을 독립시켜줄 필요가 있다. 

자바스크립트는 HTML을 변경할 것이고 CSS는 HTML을 바라보고 있는 구조가 된다. 

 

JavaScript는 상호작용으로 이용하는걸 선호한다.
  1. element를 찾기
  2. event listen 하기
  3. 해당 event에 반응하기(어떤것을 보여주거나, 감추거나 색을 바꾸거나 등등)

JavaScript : 애니메이션 작업
CSS : Style 작업

 

// CSS

body {
    background-color: beige;
}

/* css 와 소통하기 작업 
    transition ease-in-out : 초에 따라 색 천천히 변경
*/
h1 {
    color : cornflowerblue;
    transition: color 0.5s ease-in-out;
}

/* clicked 클래스 생성 */
.clicked {
    color : tomato;
}

.sexy-font {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

 

// JavaScript

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    // blue가 아니라면 blue로 변경 tomato가 아니라면 tomato로 변경
    // 클릭시 가져온 element 색상 변경 이벤트 
    const currentcl = h1.style.color;
    let newcl;
    console.log("pre : "+currentcl);
    if(currentcl === "tomato" ){
        // h1.style.color = "blue";
        newcl = "blue";
        console.log("cur : " + newcl);
    }
    else{
        // h1.style.color = "tomato";
        newcl = "tomato";
        console.log("cur : " + newcl);
    }
    h1.style.color = newcl;
    // 이코드는 h1 color를 각각 연산마다 부르는것이 아니어서 조금 더 효율적이다. 
    // 왜 color를 바꾸려하는지도 쉽게 알아볼 수 있다. 
}


h1.addEventListener("click", handleTitleClick);

 

 

텍스트를 클릭하면 로그와 함께 색상이 변경되는것을 확인할 수 있다. 

하지만 이것은 JavaScript 내에서 CSS를 변경하고 있는 코드이다. 

 

위에 올려둔 CSS 코드에서 .clicked 부분이 클래스 이름을 정해줬다고 생각하면 되는데 우리는 이것을 이용해 CSS와 JS간의 독립형태를 구성할 것이다. 

 

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    // 생성된 클래스 이름은 css안의 clicked 클래스로 인해 색이 변경된다. 
    console.log(h1.className); 
    const clickedClass = "clicked"; // string 연산 error를 최소화하기 위한 작업
    // classList.contains.add : 현 클래스를 포함하면서 클래스를 더 추가한다. 
    if(h1.classList.contains(clickedClass)){
        // contains가 clickedClass를 포함하고 있는지만 보는것. 
        h1.classList.remove(clickedClass); 
        // clickedClass에 저장된 string만 제거한다.
    }
    else{
        // 만약 clickedClass가 h1의 classList에 포함되어 있지 않다면 
       h1.classList.add(clickedClass);
    }
}

h1.addEventListener("click", handleTitleClick);

 

- classList라는 함수를 이용했는데 자세한건 직접 찾아봐도 좋고 주석을 참고해도 좋다. 

- 해당 코드도 잘 적용이된다.

 

 

그리고 하나 더

    if(h1.classList.contains(clickedClass)){
        // contains가 clickedClass를 포함하고 있는지만 보는것. 
        h1.classList.remove(clickedClass); 
        // clickedClass에 저장된 string만 제거한다.
    }
    else{
        // 만약 clickedClass가 h1의 classList에 포함되어 있지 않다면 
       h1.classList.add(clickedClass);
    }

지금 이 소스에서 우리는 직접 if, else문을 써서 조건에 맞게 css를 변경하라고 알려줬다.

하지만 정말 편하게도 toggle이라는 함수를 사용하면 if, else문을 사용하지 않아도 된다. 

 

무슨말이냐 우선 공식 레퍼런스 페이지를 참고해도 좋다. 

 

참고 : https://developer.mozilla.org/ko/docs/Web/API/Element/classList

 

 

element 인 classList에는 여러 object들이 있는데 그중 하나이다. 

///////// toggle function
/*
    toggle function의 구현 코드는 아래와 비슷함.
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass); 
    }
    else{
        h1.classList.add(clickedClass);
    }
*/

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    h1.classList.toggle("clicked");
    // h1의 classList에 clicked class가 이미 있는지 확인해서 clicked가 존재하면 제거한다
    // 만약 h1 classList에 clicked가 존재하지 않는다면 toggle function은 clicked를 classList에 추가해 준다. 
}

h1.addEventListener("click", handleTitleClick);

 

이렇게 toggle 함수를 사용해서 인자값(argument)만 넘겨주면 해당 알고리즘이 적용되어 결과를 리턴해준다. 

 

결국 우리는 JavaScript에서 h1 태그에 className을 "clicked"으로 지정해주면 HTML을 바라보는 CSS에서 값이 변동된것을 인식하고 알맞는 동작을 하게 되는것이다. 

---

바닐자 자바스크립트 꽤 재밌따.