3.6 CSS in JS (1)

강의

저번에는 클릭하면 글자색이 파란색으로 바뀌는걸 만들었음. 근데 그건 한번만 실행되고 뭐 다음 event가 없었다.

그래서 이번에는 파란색에서 다른색, 다른색에서 다시 파란색이 되도록 만들어보자!

그러기 위해서 무언가가 true인지 확인을 해주면 된다. => 조건문 사용
글자색이 파란색이면 다른색으로 지정해라. 이런 식으로 ㅇㅇ

const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
    if(h1.style.color === "blue"){  // 글자색이 파란색이면
        h1.style.color = "tomato";  // 토마토색으로 바꿔라
    } else{
        h1.style.color = "blue";    // 글자색이 파란색이 아니라면 파란색으로 바꿔라
    }
}
h1.addEventListener("click",handleTitleClick);

위의 코드가 잘못된 코드는 아니지만, 코드를 개선해서 더 깔끔한 코드를 작성할 수 있다.
h1.style.color가 많이 호출되어있는걸 알 수 있다.
호출만해서 어떻다 비교하는게 아니라, 호출한걸 저장을 한 다음에 비교를 하는거임 ㅇㅇ (?)
color 현재 상태를 저장하는 것을 해보자!

---

function handleTitleClick(){
    const currentColor = h1.style.color; 
    let newColor;
    if(currentColor === "blue"){
        newColor = "tomato";
    } else{
        newColor = "blue";
    }
    h1.style.color = newColor; 

• let newColor;
  => 수정 가능한 변수로 지정한다. 왜냐하면 파란색, 토마토색으로 값이 변할 수 있기 때문이다.

• h1.style.color = newColor;
  => h1 요소의 색상을 newColor로 지정해라. 조건문 끝나고의 코드이므로, newColor에 저장된 값이 h1 요소의 색상을 결정한다.

헷갈렸던 부분

function handleTitleClick(){
    const currentColor = h1.style.color; 
    if(currentColor === "blue"){
        currentColor = "tomato";
    } else{
        currentColor = "blue";
    }
    h1.style.color = currentColor; 
}

• 내가 처음에 왜 이렇게 코드를 짜면 에러가 뜨는지 몰랐다.
  => 우선 const로 변수를 생성했으므로, currentColor = "tomato"; , currentColor = "blue"; 이 부분이 틀렸다. 수정이 불가능한 변수이니까ㅇㅇ

• const currentColor = h1.style.color;
  => 수정이 불가능해서 let newColor; 변수를 만든것 까지는 이해가 갔었는데....
  const currentColor = h1.style.color; 이 라인이 이해가 안갔다. 아니 쉬팔 h1.style.color <-얘가 어차피 계속 바뀌는 값이면 currentColor <- 얘도 계속 바뀌니까 값이 고정이 안되는거 아니야?! 라고 생각했음

  처음에 생각한대로 보면, currentColor = "tomato"; 걍 존나 틀림ㅇㅇ. 근데, const currentColor = h1.style.color; 이건 잘생각해보면 값을 변경한게 아님. h1.style.color 자체가 어떤 값을 가리키는건 맞지만, 값 자체는 아니므로 currentColor는 값이 수정되는게 아니다...라고 이해했는데 맞나..? (ﾉ*･ω･)ﾉ

끝마치며

니꼬는 tyle을 JS에서 변경하는걸 별로 좋아하지 않는다. 다른 언어들을 섞는걸 별론 선호하지 않기 때문이다. 니꼬는 JS를 상호작용을 만들어 내는데 적합하다고 생각하기 때문에, css를 JS파일에서 다루기 보다는 그냥 css파일에서 다루는걸 선호한다.

이건 다음 강의때 하자!