'제발.. style은 자기자리에서 처리해주길...'

Breadman·2020년 8월 6일

TIL

목록 보기

3/11

신입사원 연수를 간 지인이 겪은 일화가 있다.

동기들과 리무진 버스를 타고 가다가 휴게소에 들렀는데 마침 속이 안좋았더랬다.
그래서 화장실을 갔다오고 자리로 이동하려던 찰나, 괄약근에 힘이 풀려 그만 기체를 return하고 말았다고한다. 밀폐된 공간에 return했다는 것에 대한 미안함을 안고, 사건현장을 빠르게 이탈해 다행히 범인이 누구인지 아는 사람이 없었다고한다. 하지만 그 후에 현장을 지나던 동기가 내뱉은 말이 너무 인상깊었다고 했다.

'제발.. 방귀는 자기자리에서 껴주길...'

이렇듯 각자의 일은 각자의 자리에서 책임지는 게 도리(?)라는 것이다.

style은 CSS가 처리해주길..

DOM을 극단적으로 이용하면 html나 css는 비워둔 채 JS에서 모든 작업을 할 수 있다.
처음 웹개발 공부를 시작하면서 만든 todolist가 그러했다.
~~(소스코드보기로 보여지는 html을 숨김으로서 보안을 생각하니 뭐니하는 얇은 생각으로 작성했던 부끄러운 기억이 있다..)~~

결국엔 각각 어찌저찌 분리했는데, 최근에 신선한 방법을 알게 되어 스스로의 공부를 위해 적어본다.

CSS class의 활용

CSS의 class는 여러 element들을 집단(혹은 묶음)으로서의 의미를 갖게하고, 동일한 style적용의 편리성을 위해 사용된다.
이러한 class는 JS의 class와 구분되기 위해, JS에서 className이라는 property로 사용된다.

const title = document.querySelector("h1");

title.className = "title";

이를 이용하면 JS가 굳이 style을 건드리지 않아도 event에 맞춰서 style을 바꿀 수 있다.

How to

index.html

<!-- index.html -->
...
<body>
  <h1 class="title">Hello!!</h1>
</body>
...

style.css

/* style.css */
.title {
  cursor: pointer;
}

.click {
  color: red;
}

index.js

const title = document.querySelector(".title");

const CLICKED_CLASS = "click";

function clickHandler() {
  title.className = CLICKED_CLASS; 
}

title.addEventListener("click", clickHandler);

이렇게 하면 아주 신박하게 분리가 된다.
몰랐던 나에겐 아주 신박해서 놀라왔다.
~~(자꾸 신박하다하는데, 그만큼 신박하게 느껴졌다는 걸 알 수 있다.)~~

하지만,
완벽하지않다.
.title 의 style 속성(cursor: pointer)이 날아가버렸으니까.

간단한 해결방법으로,
className에 CLICKED_CLASS를 대입할 때 title class까지 추가하면 된다.

그러나 CSS의 class 특성상 하나의 element에 여러 class를 지정할 수 있기 때문에, 일일이 기존의 class를 대입해줄 순 없는 노릇이다..

게다가 '한 번 더 클릭하면 다시 원래대로 돌아오게 해주세요!'라고 요청사항이라도 들어오면, 굉장히 피곤해질 것이다.

도와줘요 classList

우리는 classList를 활용해야한다.
className도 여러 class를 얻을 수 있지만 'String' 타입인 반면, classList는 보다 가공된 'Array'로 얻을 수 있다. 또한 class를 추가하거나 삭제하는 등 method를 가지고 있어 위의 요청사항을 쉽게 해결할 수 있다.

index.js의 clickHandler()를 다음과 같이 고치면,

function clickHandler() {
  const hasClassName = title.classList.contains(CLICKED_CLASS);
  if(!hasClassName) {
    title.classList.add(CLICKED_CLASS);
  } else {
    title.classList.remove(CLICKED_CLASS);
  }
}